commons-shared-web-ui 0.0.1

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

@@ -0,0 +1,2051 @@
+import * as i0 from '@angular/core';
+import { NgModule, EventEmitter, Output, Input, Component, HostListener, forwardRef, HostBinding } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import * as i2$1 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import * as i4 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i6 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i7 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i7$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i8$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatListModule } from '@angular/material/list';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';
+import * as i8 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { CdkAccordionModule } from '@angular/cdk/accordion';
+import { MatSortModule } from '@angular/material/sort';
+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 * as i1$1 from '@angular/router';
+import * as i3 from '@angular/common/http';
+import { HttpClientModule } 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 });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MaterialModule, imports: [MatCardModule,
+            MatSnackBarModule,
+            MatCheckboxModule,
+            MatDividerModule,
+            MatSelectModule,
+            MatRadioModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatInputModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatTabsModule,
+            MatButtonModule,
+            MatMenuModule,
+            MatTabsModule,
+            MatProgressBarModule,
+            MatTooltipModule,
+            MatSliderModule,
+            MatListModule,
+            MatChipsModule,
+            MatSortModule,
+            MatAutocompleteModule,
+            MatSlideToggleModule,
+            MatButtonToggleModule], exports: [MatCardModule,
+            MatSnackBarModule,
+            MatCheckboxModule,
+            MatDividerModule,
+            MatSelectModule,
+            MatRadioModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatInputModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatTabsModule,
+            MatButtonModule,
+            MatMenuModule,
+            MatTabsModule,
+            MatProgressBarModule,
+            MatTooltipModule,
+            MatSliderModule,
+            MatListModule,
+            MatChipsModule,
+            MatPaginatorModule,
+            MatTableModule,
+            MatExpansionModule,
+            CdkAccordionModule,
+            MatSortModule,
+            MatAutocompleteModule,
+            MatSlideToggleModule,
+            MatButtonToggleModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MaterialModule, imports: [MatCardModule,
+            MatSnackBarModule,
+            MatCheckboxModule,
+            MatDividerModule,
+            MatSelectModule,
+            MatRadioModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatInputModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatTabsModule,
+            MatButtonModule,
+            MatMenuModule,
+            MatTabsModule,
+            MatProgressBarModule,
+            MatTooltipModule,
+            MatSliderModule,
+            MatListModule,
+            MatChipsModule,
+            MatSortModule,
+            MatAutocompleteModule,
+            MatSlideToggleModule,
+            MatButtonToggleModule, MatCardModule,
+            MatSnackBarModule,
+            MatCheckboxModule,
+            MatDividerModule,
+            MatSelectModule,
+            MatRadioModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatInputModule,
+            MatIconModule,
+            MatProgressSpinnerModule,
+            MatTabsModule,
+            MatButtonModule,
+            MatMenuModule,
+            MatTabsModule,
+            MatProgressBarModule,
+            MatTooltipModule,
+            MatSliderModule,
+            MatListModule,
+            MatChipsModule,
+            MatPaginatorModule,
+            MatTableModule,
+            MatExpansionModule,
+            CdkAccordionModule,
+            MatSortModule,
+            MatAutocompleteModule,
+            MatSlideToggleModule,
+            MatButtonToggleModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatCardModule,
+                        MatSnackBarModule,
+                        MatCheckboxModule,
+                        MatDividerModule,
+                        MatSelectModule,
+                        MatRadioModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatTabsModule,
+                        MatButtonModule,
+                        MatMenuModule,
+                        MatTabsModule,
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        MatSliderModule,
+                        MatListModule,
+                        MatChipsModule,
+                        MatSortModule,
+                        MatAutocompleteModule,
+                        MatSlideToggleModule,
+                        MatButtonToggleModule
+                    ],
+                    exports: [
+                        MatCardModule,
+                        MatSnackBarModule,
+                        MatCheckboxModule,
+                        MatDividerModule,
+                        MatSelectModule,
+                        MatRadioModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatTabsModule,
+                        MatButtonModule,
+                        MatMenuModule,
+                        MatTabsModule,
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        MatSliderModule,
+                        MatListModule,
+                        MatChipsModule,
+                        MatPaginatorModule,
+                        MatTableModule,
+                        MatExpansionModule,
+                        CdkAccordionModule,
+                        MatSortModule,
+                        MatAutocompleteModule,
+                        MatSlideToggleModule,
+                        MatButtonToggleModule
+                    ]
+                }]
+        }] });
+
+class CardType1Component {
+    config;
+    theme = 'theme-1';
+    cardClick = new EventEmitter();
+    get valueStyle() {
+        return this.config.valueColor ? { color: this.config.valueColor } : {};
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardType1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CardType1Component, isStandalone: false, selector: "lib-card-type-1", inputs: { config: "config", theme: "theme" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div [class]=\"'cc-card ' + theme\" [style.width]=\"config.width || '100%'\" [style.height]=\"config.height || '100%'\" (click)=\"cardClick.emit()\">\n  <div class=\"card-content\">\n    <div class=\"card-label\">{{ config.label }}</div>\n    <div class=\"card-value\" [ngStyle]=\"valueStyle\">{{ config.value }}</div>\n    <div\n      *ngIf=\"config.subtext\"\n      class=\"card-subtext\"\n      [ngClass]=\"config.subtextClass\"\n    >\n      {{ config.subtext }}\n    </div>\n  </div>\n</div>\n", styles: [".cc-card{display:flex;flex-direction:column;justify-content:center;max-width:100%;box-sizing:border-box;overflow:hidden}.card-label{font-family:var(--cc-font-family);font-size:var(--cc-text-size-label);color:var(--cc-text-color-secondary);text-transform:uppercase;font-weight:var(--cc-text-weight-medium);margin-bottom:8px}.card-value{font-family:var(--cc-font-family);font-size:var(--cc-text-size-value);color:var(--cc-text-color-primary);font-weight:var(--cc-text-weight-bold);margin-bottom:4px}.card-subtext{font-family:var(--cc-font-family);font-size:12px;color:var(--cc-text-color-secondary)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardType1Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card-type-1', standalone: false, template: "<div [class]=\"'cc-card ' + theme\" [style.width]=\"config.width || '100%'\" [style.height]=\"config.height || '100%'\" (click)=\"cardClick.emit()\">\n  <div class=\"card-content\">\n    <div class=\"card-label\">{{ config.label }}</div>\n    <div class=\"card-value\" [ngStyle]=\"valueStyle\">{{ config.value }}</div>\n    <div\n      *ngIf=\"config.subtext\"\n      class=\"card-subtext\"\n      [ngClass]=\"config.subtextClass\"\n    >\n      {{ config.subtext }}\n    </div>\n  </div>\n</div>\n", styles: [".cc-card{display:flex;flex-direction:column;justify-content:center;max-width:100%;box-sizing:border-box;overflow:hidden}.card-label{font-family:var(--cc-font-family);font-size:var(--cc-text-size-label);color:var(--cc-text-color-secondary);text-transform:uppercase;font-weight:var(--cc-text-weight-medium);margin-bottom:8px}.card-value{font-family:var(--cc-font-family);font-size:var(--cc-text-size-value);color:var(--cc-text-color-primary);font-weight:var(--cc-text-weight-bold);margin-bottom:4px}.card-subtext{font-family:var(--cc-font-family);font-size:12px;color:var(--cc-text-color-secondary)}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], cardClick: [{
+                type: Output
+            }] } });
+
+class CardType2Component {
+    config;
+    theme = 'theme-1';
+    cardClick = new EventEmitter();
+    get iconBoxStyle() {
+        if (this.config.iconUrl) {
+            return { backgroundColor: 'transparent' };
+        }
+        return this.config.iconBackgroundColor ? { backgroundColor: this.config.iconBackgroundColor } : {};
+    }
+    get iconStyle() {
+        return this.config.iconColor ? { color: this.config.iconColor } : {};
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardType2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CardType2Component, isStandalone: false, selector: "lib-card-type-2", inputs: { config: "config", theme: "theme" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div [class]=\"'cc-card ' + theme\" [style.width]=\"config.width || '100%'\" [style.height]=\"config.height || '100%'\" (click)=\"cardClick.emit()\">\n  <div class=\"card-content-wrapper\">\n    <div class=\"icon-box\" [ngStyle]=\"iconBoxStyle\">\n      <img *ngIf=\"config.iconUrl; else matIconTpl\" [src]=\"config.iconUrl\" class=\"icon-image\" alt=\"icon\">\n      <ng-template #matIconTpl>\n        <mat-icon [ngStyle]=\"iconStyle\">{{ config.iconName }}</mat-icon>\n      </ng-template>\n    </div>\n    <div class=\"text-content\">\n      <div class=\"card-label\">{{ config.label }}</div>\n      <div class=\"value-wrapper\">\n         <span class=\"card-value\">{{ config.value }}</span>\n         <span *ngIf=\"config.targetText\" class=\"card-target\">{{ config.targetText }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".cc-card{display:flex;flex-direction:column;justify-content:center;max-width:100%;box-sizing:border-box;overflow:hidden}.card-content-wrapper{display:flex;align-items:center;gap:16px}.icon-box{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;background-color:#fce8e6;color:#d32f2f}.icon-box mat-icon{font-size:24px;width:24px;height:24px}.icon-box .icon-image{object-fit:contain;border-radius:.5rem}.text-content{display:flex;flex-direction:column}.card-label{font-family:var(--cc-font-family);font-size:var(--cc-text-size-label);color:var(--cc-text-color-secondary);text-transform:uppercase;font-weight:var(--cc-text-weight-medium);margin-bottom:4px}.value-wrapper{display:flex;align-items:baseline;gap:8px}.card-value{font-family:var(--cc-font-family);font-size:var(--cc-text-size-value);color:var(--cc-text-color-primary);font-weight:var(--cc-text-weight-bold)}.card-target{font-family:var(--cc-font-family);font-size:12px;color:var(--cc-text-color-secondary)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardType2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card-type-2', standalone: false, template: "<div [class]=\"'cc-card ' + theme\" [style.width]=\"config.width || '100%'\" [style.height]=\"config.height || '100%'\" (click)=\"cardClick.emit()\">\n  <div class=\"card-content-wrapper\">\n    <div class=\"icon-box\" [ngStyle]=\"iconBoxStyle\">\n      <img *ngIf=\"config.iconUrl; else matIconTpl\" [src]=\"config.iconUrl\" class=\"icon-image\" alt=\"icon\">\n      <ng-template #matIconTpl>\n        <mat-icon [ngStyle]=\"iconStyle\">{{ config.iconName }}</mat-icon>\n      </ng-template>\n    </div>\n    <div class=\"text-content\">\n      <div class=\"card-label\">{{ config.label }}</div>\n      <div class=\"value-wrapper\">\n         <span class=\"card-value\">{{ config.value }}</span>\n         <span *ngIf=\"config.targetText\" class=\"card-target\">{{ config.targetText }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".cc-card{display:flex;flex-direction:column;justify-content:center;max-width:100%;box-sizing:border-box;overflow:hidden}.card-content-wrapper{display:flex;align-items:center;gap:16px}.icon-box{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;background-color:#fce8e6;color:#d32f2f}.icon-box mat-icon{font-size:24px;width:24px;height:24px}.icon-box .icon-image{object-fit:contain;border-radius:.5rem}.text-content{display:flex;flex-direction:column}.card-label{font-family:var(--cc-font-family);font-size:var(--cc-text-size-label);color:var(--cc-text-color-secondary);text-transform:uppercase;font-weight:var(--cc-text-weight-medium);margin-bottom:4px}.value-wrapper{display:flex;align-items:baseline;gap:8px}.card-value{font-family:var(--cc-font-family);font-size:var(--cc-text-size-value);color:var(--cc-text-color-primary);font-weight:var(--cc-text-weight-bold)}.card-target{font-family:var(--cc-font-family);font-size:12px;color:var(--cc-text-color-secondary)}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], cardClick: [{
+                type: Output
+            }] } });
+
+class CardsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CardsModule, declarations: [CardType1Component,
+            CardType2Component], imports: [CommonModule,
+            MaterialModule], exports: [CardType1Component,
+            CardType2Component] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardsModule, imports: [CommonModule,
+            MaterialModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CardsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CardType1Component,
+                        CardType2Component
+                    ],
+                    imports: [
+                        CommonModule,
+                        MaterialModule
+                    ],
+                    exports: [
+                        CardType1Component,
+                        CardType2Component
+                    ]
+                }]
+        }] });
+
+class AlertComponent {
+    variant = 'info';
+    title = '';
+    message = '';
+    icon = true;
+    customIcon = ''; // New input for custom class
+    // Customization Inputs
+    width;
+    height;
+    borderRadius;
+    padding;
+    gap;
+    backgroundColor;
+    color; // New input for custom text color
+    borderColor;
+    fontSize;
+    fontWeight;
+    boxShadow;
+    // Granular Border Radius Customization
+    borderTopLeftRadius;
+    borderTopRightRadius;
+    borderBottomLeftRadius;
+    borderBottomRightRadius;
+    constructor() { }
+    ngOnInit() {
+    }
+    get isDefaultIcon() {
+        return this.icon === true;
+    }
+    get isStringIcon() {
+        return typeof this.icon === 'string';
+    }
+    get isObjectIcon() {
+        return typeof this.icon === 'object' && this.icon !== null;
+    }
+    get iconString() {
+        return typeof this.icon === 'string' ? this.icon : '';
+    }
+    get isImgIcon() {
+        const icon = this.icon;
+        if (typeof icon === 'string') {
+            return icon.includes('/') || icon.includes('.') || icon.startsWith('http');
+        }
+        return typeof icon === 'object' && icon !== null && icon.type === 'img';
+    }
+    get iconObject() {
+        return typeof this.icon === 'object' ? this.icon : { type: '', value: '' };
+    }
+    get defaultIconClass() {
+        switch (this.variant) {
+            case 'success': return 'fa-solid fa-circle-check';
+            case 'warning':
+            case 'warning-shadow': return 'fa-solid fa-triangle-exclamation';
+            case 'error': return 'fa-solid fa-triangle-exclamation';
+            case 'info':
+            default: return 'fa-solid fa-circle-info';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AlertComponent, isStandalone: false, selector: "lib-alert", inputs: { variant: "variant", title: "title", message: "message", icon: "icon", customIcon: "customIcon", width: "width", height: "height", borderRadius: "borderRadius", padding: "padding", gap: "gap", backgroundColor: "backgroundColor", color: "color", borderColor: "borderColor", fontSize: "fontSize", fontWeight: "fontWeight", boxShadow: "boxShadow", borderTopLeftRadius: "borderTopLeftRadius", borderTopRightRadius: "borderTopRightRadius", borderBottomLeftRadius: "borderBottomLeftRadius", borderBottomRightRadius: "borderBottomRightRadius" }, ngImport: i0, template: "<div class=\"cc-alert\" [ngClass]=\"'cc-alert-' + variant\" [style.width]=\"width\" [style.height]=\"height\"\r\n    [style.border-radius]=\"borderRadius\" [style.border-top-left-radius]=\"borderTopLeftRadius\"\r\n    [style.border-top-right-radius]=\"borderTopRightRadius\" [style.border-bottom-left-radius]=\"borderBottomLeftRadius\"\r\n    [style.border-bottom-right-radius]=\"borderBottomRightRadius\" [style.padding]=\"padding\" [style.gap]=\"gap\"\r\n    [style.background-color]=\"backgroundColor\" [style.color]=\"color\" [style.border-color]=\"borderColor\"\r\n    [style.font-size]=\"fontSize\" [style.font-weight]=\"fontWeight\" [style.box-shadow]=\"boxShadow\">\r\n\r\n    <div class=\"cc-alert-icon\" *ngIf=\"icon\">\r\n        <i *ngIf=\"customIcon\" [ngClass]=\"customIcon\"></i>\r\n        <i *ngIf=\"!customIcon && isDefaultIcon\" [ngClass]=\"defaultIconClass\"></i>\r\n        <i *ngIf=\"!customIcon && isStringIcon && !isImgIcon\" [ngClass]=\"iconString\"></i>\r\n        <img *ngIf=\"!customIcon && isStringIcon && isImgIcon\" [src]=\"iconString\" alt=\"alert icon\" />\r\n        <ng-container *ngIf=\"isObjectIcon\">\r\n            <i *ngIf=\"iconObject.type === 'fontawesome'\" [ngClass]=\"iconObject.value\"></i>\r\n            <span *ngIf=\"iconObject.type === 'material'\" class=\"material-icons\">{{ iconObject.value }}</span>\r\n            <img *ngIf=\"iconObject.type === 'img'\" [src]=\"iconObject.value\" alt=\"alert icon\" />\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div class=\"cc-alert-content\">\r\n        <div class=\"cc-alert-title\" *ngIf=\"title\">{{ title }}</div>\r\n        <div class=\"cc-alert-message\" *ngIf=\"message\">{{ message }}</div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".cc-alert{display:flex;align-items:flex-start;width:100%;padding:var(--cc-alert-padding, 1rem 2rem);border-radius:var(--cc-alert-radius, .75rem);gap:var(--cc-alert-gap, 1rem);box-sizing:border-box;font-family:var(--cc-alert-font-family, inherit)}.cc-alert .cc-alert-icon{font-size:var(--cc-alert-icon-size, 1.25rem);flex-shrink:0;margin-top:var(--cc-alert-icon-margin-top, .125rem)}.cc-alert .cc-alert-icon img{width:var(--cc-alert-icon-size, 1.25rem);height:var(--cc-alert-icon-size, 1.25rem);object-fit:contain}.cc-alert .cc-alert-content{display:flex;flex-direction:column;gap:.25rem;flex-grow:1}.cc-alert .cc-alert-content .cc-alert-title{font-weight:700;font-size:var(--cc-alert-title-size, 1rem);line-height:var(--cc-alert-title-line-height, 1.5rem)}.cc-alert .cc-alert-content .cc-alert-message{font-size:var(--cc-alert-message-size, .875rem);line-height:200%;opacity:.9}.cc-alert.cc-alert-info{background-color:var(--cc-alert-info-bg);color:var(--cc-alert-info-color)}.cc-alert.cc-alert-info .cc-alert-icon{color:#5f6368}.cc-alert.cc-alert-warning{background-color:var(--cc-alert-warning-bg);color:var(--cc-alert-warning-color)}.cc-alert.cc-alert-warning .cc-alert-title,.cc-alert.cc-alert-warning .cc-alert-icon{color:var(--cc-alert-warning-title-color)}.cc-alert.cc-alert-warning-shadow{background-color:var(--cc-alert-warning-bg);color:var(--cc-alert-warning-color);box-shadow:var(--cc-alert-warning-shadow)}.cc-alert.cc-alert-warning-shadow .cc-alert-title,.cc-alert.cc-alert-warning-shadow .cc-alert-icon{color:var(--cc-alert-warning-title-color)}.cc-alert.cc-alert-success{background-color:var(--cc-alert-success-bg);color:var(--cc-alert-success-color)}.cc-alert.cc-alert-error{background-color:var(--cc-alert-error-bg);color:var(--cc-alert-error-color)}.cc-alert.cc-alert-error .cc-alert-icon{color:var(--cc-alert-error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-alert', standalone: false, template: "<div class=\"cc-alert\" [ngClass]=\"'cc-alert-' + variant\" [style.width]=\"width\" [style.height]=\"height\"\r\n    [style.border-radius]=\"borderRadius\" [style.border-top-left-radius]=\"borderTopLeftRadius\"\r\n    [style.border-top-right-radius]=\"borderTopRightRadius\" [style.border-bottom-left-radius]=\"borderBottomLeftRadius\"\r\n    [style.border-bottom-right-radius]=\"borderBottomRightRadius\" [style.padding]=\"padding\" [style.gap]=\"gap\"\r\n    [style.background-color]=\"backgroundColor\" [style.color]=\"color\" [style.border-color]=\"borderColor\"\r\n    [style.font-size]=\"fontSize\" [style.font-weight]=\"fontWeight\" [style.box-shadow]=\"boxShadow\">\r\n\r\n    <div class=\"cc-alert-icon\" *ngIf=\"icon\">\r\n        <i *ngIf=\"customIcon\" [ngClass]=\"customIcon\"></i>\r\n        <i *ngIf=\"!customIcon && isDefaultIcon\" [ngClass]=\"defaultIconClass\"></i>\r\n        <i *ngIf=\"!customIcon && isStringIcon && !isImgIcon\" [ngClass]=\"iconString\"></i>\r\n        <img *ngIf=\"!customIcon && isStringIcon && isImgIcon\" [src]=\"iconString\" alt=\"alert icon\" />\r\n        <ng-container *ngIf=\"isObjectIcon\">\r\n            <i *ngIf=\"iconObject.type === 'fontawesome'\" [ngClass]=\"iconObject.value\"></i>\r\n            <span *ngIf=\"iconObject.type === 'material'\" class=\"material-icons\">{{ iconObject.value }}</span>\r\n            <img *ngIf=\"iconObject.type === 'img'\" [src]=\"iconObject.value\" alt=\"alert icon\" />\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div class=\"cc-alert-content\">\r\n        <div class=\"cc-alert-title\" *ngIf=\"title\">{{ title }}</div>\r\n        <div class=\"cc-alert-message\" *ngIf=\"message\">{{ message }}</div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".cc-alert{display:flex;align-items:flex-start;width:100%;padding:var(--cc-alert-padding, 1rem 2rem);border-radius:var(--cc-alert-radius, .75rem);gap:var(--cc-alert-gap, 1rem);box-sizing:border-box;font-family:var(--cc-alert-font-family, inherit)}.cc-alert .cc-alert-icon{font-size:var(--cc-alert-icon-size, 1.25rem);flex-shrink:0;margin-top:var(--cc-alert-icon-margin-top, .125rem)}.cc-alert .cc-alert-icon img{width:var(--cc-alert-icon-size, 1.25rem);height:var(--cc-alert-icon-size, 1.25rem);object-fit:contain}.cc-alert .cc-alert-content{display:flex;flex-direction:column;gap:.25rem;flex-grow:1}.cc-alert .cc-alert-content .cc-alert-title{font-weight:700;font-size:var(--cc-alert-title-size, 1rem);line-height:var(--cc-alert-title-line-height, 1.5rem)}.cc-alert .cc-alert-content .cc-alert-message{font-size:var(--cc-alert-message-size, .875rem);line-height:200%;opacity:.9}.cc-alert.cc-alert-info{background-color:var(--cc-alert-info-bg);color:var(--cc-alert-info-color)}.cc-alert.cc-alert-info .cc-alert-icon{color:#5f6368}.cc-alert.cc-alert-warning{background-color:var(--cc-alert-warning-bg);color:var(--cc-alert-warning-color)}.cc-alert.cc-alert-warning .cc-alert-title,.cc-alert.cc-alert-warning .cc-alert-icon{color:var(--cc-alert-warning-title-color)}.cc-alert.cc-alert-warning-shadow{background-color:var(--cc-alert-warning-bg);color:var(--cc-alert-warning-color);box-shadow:var(--cc-alert-warning-shadow)}.cc-alert.cc-alert-warning-shadow .cc-alert-title,.cc-alert.cc-alert-warning-shadow .cc-alert-icon{color:var(--cc-alert-warning-title-color)}.cc-alert.cc-alert-success{background-color:var(--cc-alert-success-bg);color:var(--cc-alert-success-color)}.cc-alert.cc-alert-error{background-color:var(--cc-alert-error-bg);color:var(--cc-alert-error-color)}.cc-alert.cc-alert-error .cc-alert-icon{color:var(--cc-alert-error-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], customIcon: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], fontWeight: [{
+                type: Input
+            }], boxShadow: [{
+                type: Input
+            }], borderTopLeftRadius: [{
+                type: Input
+            }], borderTopRightRadius: [{
+                type: Input
+            }], borderBottomLeftRadius: [{
+                type: Input
+            }], borderBottomRightRadius: [{
+                type: Input
+            }] } });
+
+class AlertModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AlertModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AlertComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        AlertComponent
+                    ]
+                }]
+        }] });
+
+class ButtonComponent {
+    variant = 'primary';
+    type = 'button';
+    disabled = false;
+    // Customization Inputs
+    width;
+    height;
+    borderRadius;
+    fontSize;
+    fontWeight;
+    backgroundColor;
+    color;
+    border;
+    icon = '';
+    constructor() { }
+    ngOnInit() {
+    }
+    get isDefaultIcon() {
+        return this.icon === true;
+    }
+    get isStringIcon() {
+        return typeof this.icon === 'string' && this.icon !== '';
+    }
+    get isImgIcon() {
+        const icon = this.icon;
+        if (typeof icon === 'string') {
+            return icon.includes('/') || icon.includes('.') || icon.startsWith('http');
+        }
+        return typeof icon === 'object' && icon !== null && !!icon.value && (icon.type === 'img' || icon.value.includes('/') || icon.value.includes('.') || icon.value.startsWith('http'));
+    }
+    get isObjectIcon() {
+        return typeof this.icon === 'object' && this.icon !== null;
+    }
+    get iconString() {
+        return typeof this.icon === 'string' ? this.icon : '';
+    }
+    get iconObject() {
+        return typeof this.icon === 'object' ? this.icon : { type: '', value: '' };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ButtonComponent, isStandalone: false, selector: "lib-button", inputs: { variant: "variant", type: "type", disabled: "disabled", width: "width", height: "height", borderRadius: "borderRadius", fontSize: "fontSize", fontWeight: "fontWeight", backgroundColor: "backgroundColor", color: "color", border: "border", icon: "icon" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" class=\"cc-btn\" [ngClass]=\"'cc-btn-' + variant\" [style.width]=\"width\"\r\n  [style.height]=\"height\" [style.border-radius]=\"borderRadius\" [style.font-size]=\"fontSize\"\r\n  [style.font-weight]=\"fontWeight\" [style.background-color]=\"backgroundColor\" [style.color]=\"color\"\r\n  [style.border]=\"border\">\r\n  <div class=\"cc-btn-icon-wrapper\" *ngIf=\"icon\">\r\n    <!-- String Icons -->\r\n    <ng-container *ngIf=\"isStringIcon\">\r\n      <i *ngIf=\"!isImgIcon\" [ngClass]=\"iconString\" class=\"cc-btn-icon\"></i>\r\n      <img *ngIf=\"isImgIcon\" [src]=\"iconString\" alt=\"button icon\" class=\"cc-btn-icon cc-btn-img-icon\" />\r\n    </ng-container>\r\n\r\n    <!-- Object Icons -->\r\n    <ng-container *ngIf=\"isObjectIcon\">\r\n      <i *ngIf=\"iconObject.type === 'fontawesome'\" [ngClass]=\"iconObject.value\" class=\"cc-btn-icon\"></i>\r\n      <span *ngIf=\"iconObject.type === 'material'\" class=\"material-icons cc-btn-icon\">{{ iconObject.value }}</span>\r\n      <img *ngIf=\"iconObject.type === 'img'\" [src]=\"iconObject.value\" alt=\"button icon\"\r\n        class=\"cc-btn-icon cc-btn-img-icon\" />\r\n    </ng-container>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</button>", styles: [".cc-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;transition:all .2s ease-in-out;font-family:var(--cc-btn-font-family);font-weight:var(--cc-btn-font-weight);font-size:var(--cc-btn-font-size);padding:var(--cc-btn-padding)}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity);cursor:var(--cc-btn-disabled-cursor);pointer-events:none}.cc-btn.cc-btn-primary{background-color:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border-radius:var(--cc-btn-primary-radius);border:var(--cc-btn-primary-border)}.cc-btn.cc-btn-warning{background-color:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border-radius:var(--cc-btn-warning-radius);border:var(--cc-btn-warning-border)}.cc-btn.cc-btn-outline{background-color:var(--cc-btn-outline-bg);color:var(--cc-btn-outline-color);border-radius:var(--cc-btn-outline-radius);border:var(--cc-btn-outline-border)}.cc-btn.cc-btn-secondary{background-color:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border-radius:var(--cc-btn-secondary-radius);border:var(--cc-btn-secondary-border)}.cc-btn.cc-btn-success{background-color:var(--cc-btn-success-bg);color:var(--cc-btn-success-color);border-radius:var(--cc-btn-success-radius);border:var(--cc-btn-success-border)}.cc-btn.cc-btn-danger{background-color:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border-radius:var(--cc-btn-danger-radius);border:var(--cc-btn-danger-border)}.cc-btn.cc-btn-danger-outline{background-color:var(--cc-btn-danger-outline-bg);color:var(--cc-btn-danger-outline-color);border-radius:var(--cc-btn-danger-outline-radius);border:var(--cc-btn-danger-outline-border)}.cc-btn .cc-btn-icon-wrapper{display:inline-flex;align-items:center;margin-right:.5rem}.cc-btn .cc-btn-icon{font-size:1.1em;line-height:1}.cc-btn .cc-btn-img-icon{width:1.25rem;height:1.25rem;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button', standalone: false, template: "<button [type]=\"type\" [disabled]=\"disabled\" class=\"cc-btn\" [ngClass]=\"'cc-btn-' + variant\" [style.width]=\"width\"\r\n  [style.height]=\"height\" [style.border-radius]=\"borderRadius\" [style.font-size]=\"fontSize\"\r\n  [style.font-weight]=\"fontWeight\" [style.background-color]=\"backgroundColor\" [style.color]=\"color\"\r\n  [style.border]=\"border\">\r\n  <div class=\"cc-btn-icon-wrapper\" *ngIf=\"icon\">\r\n    <!-- String Icons -->\r\n    <ng-container *ngIf=\"isStringIcon\">\r\n      <i *ngIf=\"!isImgIcon\" [ngClass]=\"iconString\" class=\"cc-btn-icon\"></i>\r\n      <img *ngIf=\"isImgIcon\" [src]=\"iconString\" alt=\"button icon\" class=\"cc-btn-icon cc-btn-img-icon\" />\r\n    </ng-container>\r\n\r\n    <!-- Object Icons -->\r\n    <ng-container *ngIf=\"isObjectIcon\">\r\n      <i *ngIf=\"iconObject.type === 'fontawesome'\" [ngClass]=\"iconObject.value\" class=\"cc-btn-icon\"></i>\r\n      <span *ngIf=\"iconObject.type === 'material'\" class=\"material-icons cc-btn-icon\">{{ iconObject.value }}</span>\r\n      <img *ngIf=\"iconObject.type === 'img'\" [src]=\"iconObject.value\" alt=\"button icon\"\r\n        class=\"cc-btn-icon cc-btn-img-icon\" />\r\n    </ng-container>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</button>", styles: [".cc-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;transition:all .2s ease-in-out;font-family:var(--cc-btn-font-family);font-weight:var(--cc-btn-font-weight);font-size:var(--cc-btn-font-size);padding:var(--cc-btn-padding)}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity);cursor:var(--cc-btn-disabled-cursor);pointer-events:none}.cc-btn.cc-btn-primary{background-color:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border-radius:var(--cc-btn-primary-radius);border:var(--cc-btn-primary-border)}.cc-btn.cc-btn-warning{background-color:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border-radius:var(--cc-btn-warning-radius);border:var(--cc-btn-warning-border)}.cc-btn.cc-btn-outline{background-color:var(--cc-btn-outline-bg);color:var(--cc-btn-outline-color);border-radius:var(--cc-btn-outline-radius);border:var(--cc-btn-outline-border)}.cc-btn.cc-btn-secondary{background-color:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border-radius:var(--cc-btn-secondary-radius);border:var(--cc-btn-secondary-border)}.cc-btn.cc-btn-success{background-color:var(--cc-btn-success-bg);color:var(--cc-btn-success-color);border-radius:var(--cc-btn-success-radius);border:var(--cc-btn-success-border)}.cc-btn.cc-btn-danger{background-color:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border-radius:var(--cc-btn-danger-radius);border:var(--cc-btn-danger-border)}.cc-btn.cc-btn-danger-outline{background-color:var(--cc-btn-danger-outline-bg);color:var(--cc-btn-danger-outline-color);border-radius:var(--cc-btn-danger-outline-radius);border:var(--cc-btn-danger-outline-border)}.cc-btn .cc-btn-icon-wrapper{display:inline-flex;align-items:center;margin-right:.5rem}.cc-btn .cc-btn-icon{font-size:1.1em;line-height:1}.cc-btn .cc-btn-img-icon{width:1.25rem;height:1.25rem;object-fit:contain}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], fontWeight: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }] } });
+
+class ButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule], exports: [ButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ButtonComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        ButtonComponent
+                    ]
+                }]
+        }] });
+
+class ConfirmationModalComponent {
+    config;
+    isOpen = false;
+    confirm = new EventEmitter();
+    cancel = new EventEmitter();
+    close = new EventEmitter();
+    showCodeSnippet = new EventEmitter();
+    // Default configuration
+    defaultConfig = {
+        headerTheme: 'dark', // Changed to dark as per new default requirement
+        width: '560px',
+        size: 'md',
+        closeOnBackdrop: true,
+        closeOnEsc: true,
+        showCloseButton: true,
+        cancelButton: {
+            label: 'Cancel',
+            show: true
+        }
+    };
+    mergedConfig;
+    previousActiveElement = null;
+    ngOnInit() {
+        this.updateConfig();
+        // Store currently focused element
+        this.previousActiveElement = document.activeElement;
+        // Prevent body scroll when modal is open
+        if (this.isOpen) {
+            this.toggleBodyScroll(true);
+        }
+    }
+    ngOnChanges() {
+        this.updateConfig();
+        if (this.isOpen !== undefined) {
+            this.toggleBodyScroll(this.isOpen);
+        }
+    }
+    updateConfig() {
+        // Merge user config with defaults
+        this.mergedConfig = {
+            ...this.defaultConfig,
+            ...this.config,
+            cancelButton: {
+                ...this.defaultConfig.cancelButton,
+                ...this.config.cancelButton
+            },
+            confirmButton: {
+                ...this.config.confirmButton
+            }
+        };
+    }
+    ngOnDestroy() {
+        // Restore body scroll
+        this.toggleBodyScroll(false);
+        // Restore focus to previous element
+        if (this.previousActiveElement) {
+            this.previousActiveElement.focus();
+        }
+    }
+    toggleBodyScroll(disable) {
+        if (disable) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+    }
+    handleEscape(event) {
+        if (this.isOpen && this.mergedConfig.closeOnEsc) {
+            event.preventDefault();
+            this.onClose();
+        }
+    }
+    onBackdropClick(event) {
+        // Only close if clicking directly on backdrop, not modal content
+        if (this.mergedConfig.closeOnBackdrop &&
+            event.target === event.currentTarget) {
+            this.onClose();
+        }
+    }
+    onConfirm() {
+        if (!this.mergedConfig.confirmButton.disabled &&
+            !this.mergedConfig.confirmButton.loading) {
+            this.confirm.emit();
+        }
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onShowCodeSnippet() {
+        this.showCodeSnippet.emit();
+    }
+    getModalWidth() {
+        if (this.mergedConfig.size) {
+            const sizeMap = {
+                sm: '400px',
+                md: '560px',
+                lg: '720px'
+            };
+            return sizeMap[this.mergedConfig.size];
+        }
+        return this.mergedConfig.width || '560px';
+    }
+    getConfirmButtonClass() {
+        const typeMap = {
+            primary: 'cc-btn-primary',
+            danger: 'cc-btn-danger',
+            warning: 'cc-btn-warning'
+        };
+        return `cc-btn ${typeMap[this.mergedConfig.confirmButton.type]}`;
+    }
+    getHeaderClass() {
+        return `modal-header modal-header--${this.mergedConfig.headerTheme}`;
+    }
+    resolveIconType(icon) {
+        if (typeof icon === 'string') {
+            if (icon.includes('/') || icon.includes('.') || icon.startsWith('http')) {
+                return 'img';
+            }
+            return 'material';
+        }
+        if (icon && typeof icon === 'object') {
+            if (icon.type === 'custom' || (icon.value && (icon.value.includes('/') || icon.value.includes('.') || icon.value.startsWith('http')))) {
+                return 'custom';
+            }
+            return icon.type || 'material';
+        }
+        return 'material';
+    }
+    getIconValue(icon) {
+        return typeof icon === 'string' ? icon : icon?.value;
+    }
+    getIconColor(icon) {
+        return typeof icon === 'object' ? icon.color : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfirmationModalComponent, isStandalone: false, selector: "cc-confirmation-modal", inputs: { config: "config", isOpen: "isOpen" }, outputs: { confirm: "confirm", cancel: "cancel", close: "close", showCodeSnippet: "showCodeSnippet" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n    [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n    <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" [style.width]=\"getModalWidth()\"\r\n        [style.background-color]=\"mergedConfig.backgroundColor\" [style.border-radius]=\"mergedConfig.borderRadius\"\r\n        [style.border-top-left-radius]=\"mergedConfig.borderTopLeftRadius\"\r\n        [style.border-top-right-radius]=\"mergedConfig.borderTopRightRadius\"\r\n        [style.border-bottom-left-radius]=\"mergedConfig.borderBottomLeftRadius\"\r\n        [style.border-bottom-right-radius]=\"mergedConfig.borderBottomRightRadius\" (click)=\"$event.stopPropagation()\">\r\n\r\n        <!-- Header -->\r\n        <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n            [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n            <div class=\"modal-header__content\">\r\n                <!-- Icon (Optional) -->\r\n                <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n                    <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n                        <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n                            {{ getIconValue(mergedConfig.icon) }}\r\n                        </mat-icon>\r\n                        <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [alt]=\"mergedConfig.title + ' icon'\" class=\"modal-header__custom-icon\">\r\n                        <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [alt]=\"mergedConfig.title + ' icon'\" class=\"modal-header__custom-icon\">\r\n                    </ng-container>\r\n                </span>\r\n\r\n                <!-- Title -->\r\n                <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n                    [style.color]=\"mergedConfig.headerTextColor\">\r\n                    {{ mergedConfig.title }}\r\n                </h2>\r\n            </div>\r\n\r\n            <!-- Code Snippet Button -->\r\n            <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n                (click)=\"onShowCodeSnippet()\" aria-label=\"Show code snippet\" title=\"Show Code Snippet\">\r\n                <mat-icon>code</mat-icon>\r\n            </button>\r\n\r\n            <!-- Close Button -->\r\n            <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n                aria-label=\"Close modal\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Body (Content Projection) -->\r\n        <div class=\"cc-modal-body\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n            [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n            <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n                <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n                    (click)=\"onCancel()\">\r\n                    {{ mergedConfig.cancelButton?.label || 'Cancel' }}\r\n                </button>\r\n\r\n                <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n                    [disabled]=\"mergedConfig.confirmButton.disabled || mergedConfig.confirmButton.loading\"\r\n                    (click)=\"onConfirm()\">\r\n                    <span *ngIf=\"mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n                    {{ mergedConfig.confirmButton.label }}\r\n                </button>\r\n            </ng-container>\r\n\r\n            <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark)}.modal-header--dark .modal-header__close{color:#ffffffb3}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:#ffffffb3}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-body ::ng-deep .required:after{content:\" *\";color:#ef4444}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: ConfirmationModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-confirmation-modal', standalone: false, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n    [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n    [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n    <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" [style.width]=\"getModalWidth()\"\r\n        [style.background-color]=\"mergedConfig.backgroundColor\" [style.border-radius]=\"mergedConfig.borderRadius\"\r\n        [style.border-top-left-radius]=\"mergedConfig.borderTopLeftRadius\"\r\n        [style.border-top-right-radius]=\"mergedConfig.borderTopRightRadius\"\r\n        [style.border-bottom-left-radius]=\"mergedConfig.borderBottomLeftRadius\"\r\n        [style.border-bottom-right-radius]=\"mergedConfig.borderBottomRightRadius\" (click)=\"$event.stopPropagation()\">\r\n\r\n        <!-- Header -->\r\n        <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n            [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n            <div class=\"modal-header__content\">\r\n                <!-- Icon (Optional) -->\r\n                <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n                    <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n                        <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n                            {{ getIconValue(mergedConfig.icon) }}\r\n                        </mat-icon>\r\n                        <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [alt]=\"mergedConfig.title + ' icon'\" class=\"modal-header__custom-icon\">\r\n                        <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n                            [alt]=\"mergedConfig.title + ' icon'\" class=\"modal-header__custom-icon\">\r\n                    </ng-container>\r\n                </span>\r\n\r\n                <!-- Title -->\r\n                <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n                    [style.color]=\"mergedConfig.headerTextColor\">\r\n                    {{ mergedConfig.title }}\r\n                </h2>\r\n            </div>\r\n\r\n            <!-- Code Snippet Button -->\r\n            <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n                (click)=\"onShowCodeSnippet()\" aria-label=\"Show code snippet\" title=\"Show Code Snippet\">\r\n                <mat-icon>code</mat-icon>\r\n            </button>\r\n\r\n            <!-- Close Button -->\r\n            <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n                aria-label=\"Close modal\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Body (Content Projection) -->\r\n        <div class=\"cc-modal-body\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n            [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n            <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n                <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n                    (click)=\"onCancel()\">\r\n                    {{ mergedConfig.cancelButton?.label || 'Cancel' }}\r\n                </button>\r\n\r\n                <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n                    [disabled]=\"mergedConfig.confirmButton.disabled || mergedConfig.confirmButton.loading\"\r\n                    (click)=\"onConfirm()\">\r\n                    <span *ngIf=\"mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n                    {{ mergedConfig.confirmButton.label }}\r\n                </button>\r\n            </ng-container>\r\n\r\n            <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark)}.modal-header--dark .modal-header__close{color:#ffffffb3}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:#ffffffb3}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-body ::ng-deep .required:after{content:\" *\";color:#ef4444}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], confirm: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], showCodeSnippet: [{
+                type: Output
+            }], handleEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+class ConfirmationModalModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalModule, declarations: [ConfirmationModalComponent], imports: [CommonModule,
+            MatIconModule, // For material icons support
+            FormsModule // For ngModel in user examples (although mostly projected content, user might need it)
+        ], exports: [ConfirmationModalComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalModule, imports: [CommonModule,
+            MatIconModule, // For material icons support
+            FormsModule // For ngModel in user examples (although mostly projected content, user might need it)
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ConfirmationModalComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatIconModule, // For material icons support
+                        FormsModule // For ngModel in user examples (although mostly projected content, user might need it)
+                    ],
+                    exports: [
+                        ConfirmationModalComponent
+                    ]
+                }]
+        }] });
+
+class FilterSidebarComponent {
+    router;
+    route;
+    config;
+    initialFilters = {};
+    filterChange = new EventEmitter();
+    filterApply = new EventEmitter();
+    filterClear = new EventEmitter();
+    tabChange = new EventEmitter();
+    showCodeSnippet = new EventEmitter();
+    filters = {};
+    selectedTabId = null;
+    // ControlValueAccessor callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(router, route) {
+        this.router = router;
+        this.route = route;
+    }
+    ngOnInit() {
+        if (this.initialFilters) {
+            this.filters = { ...this.initialFilters };
+        }
+        // Initialize from URL query params
+        this.route.queryParams.subscribe(params => {
+            if (Object.keys(params).length > 0) {
+                // Merge params into filters, handling potential array/string conversions if needed
+                // For now assuming direct mapping or basic string values
+                this.filters = { ...this.filters, ...params };
+            }
+        });
+        // Initialize Tabs
+        if (this.config?.tabs?.items?.length) {
+            if (this.config.tabs.defaultActive) {
+                this.selectedTabId = this.config.tabs.defaultActive;
+            }
+            else {
+                this.selectedTabId = this.config.tabs.items[0].id;
+            }
+        }
+    }
+    // ControlValueAccessor Implementation
+    writeValue(value) {
+        if (value) {
+            this.filters = { ...value };
+        }
+        else {
+            this.filters = {};
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Component Logic
+    onTabClick(tab) {
+        this.selectedTabId = tab.id;
+        this.tabChange.emit(tab.id);
+    }
+    onFilterChange(key, value, isMulti = false) {
+        if (isMulti) {
+            this.toggleFilterValue(key, value);
+        }
+        else {
+            this.filters[key] = value;
+        }
+        // Notify Generic Change
+        this.notifyChanges(key, this.filters[key]);
+    }
+    toggleFilterValue(key, value) {
+        const currentValues = this.filters[key] || [];
+        if (Array.isArray(currentValues)) {
+            const index = currentValues.indexOf(value);
+            if (index > -1) {
+                // Remove value
+                this.filters[key] = currentValues.filter((v) => v !== value);
+            }
+            else {
+                // Add value
+                this.filters[key] = [...currentValues, value];
+            }
+        }
+        else {
+            // Initialize array if undefined
+            this.filters[key] = [value];
+        }
+    }
+    notifyChanges(key, value) {
+        this.onChange(this.filters);
+        // Update URL
+        this.updateUrl();
+        this.filterChange.emit({
+            key,
+            value,
+            allFilters: this.filters
+        });
+    }
+    updateUrl() {
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: this.filters,
+            queryParamsHandling: 'merge', // Merge with existing params
+            replaceUrl: true // Don't create new history entry for every filter change
+        });
+    }
+    applyFilters() {
+        this.filterApply.emit(this.filters);
+    }
+    clearFilters() {
+        this.filters = {};
+        this.onChange(this.filters);
+        // Clear URL params (navigate with empty queryParams to clear, or reset to defaults)
+        // Since we don't know "defaults" specifically for URL here without config, 
+        // we'll remove the keys currently in filters from the URL.
+        // Actually, easiest way to clear specific params is passing null.
+        // However, to clear ALL filter related params, we might need a more robust strategy 
+        // if there are other params we want to keep. 
+        // For this task, we will just navigate with empty paramsObject for the keys in `filters` 
+        // or just clear all if that's the intention. 
+        // Let's try to clear only the keys we know about from the config if possible, 
+        // but since `filters` is dynamic, let's clear the keys present in the current state before clearing.
+        // A safer approach for "Clear All" in a filter sidebar is often to strip query params.
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: {}, // Clear all query params
+            // queryParamsHandling: 'merge' // attributes to merge would need to be null to remove
+        });
+        this.filterClear.emit();
+    }
+    trackByFn(index, item) {
+        return item.key || index;
+    }
+    onShowCodeSnippet() {
+        this.showCodeSnippet.emit();
+    }
+    isImgUrl(icon) {
+        return icon.includes('/') || icon.includes('.') || icon.startsWith('http');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterSidebarComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FilterSidebarComponent, isStandalone: false, selector: "lib-filter-sidebar", inputs: { config: "config", initialFilters: "initialFilters" }, outputs: { filterChange: "filterChange", filterApply: "filterApply", filterClear: "filterClear", tabChange: "tabChange", showCodeSnippet: "showCodeSnippet" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FilterSidebarComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"cc-filter-sidebar\">\r\n\r\n    <!-- Header with Code Snippet Button -->\r\n    <div class=\"cc-filter-header\" *ngIf=\"config?.settings?.showCodeSnippet\">\r\n        <button mat-icon-button class=\"cc-code-snippet-btn\" (click)=\"onShowCodeSnippet()\" title=\"Show Code Snippet\">\r\n            <i class=\"fas fa-code\"></i>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Tabs Section -->\r\n    <div *ngIf=\"config?.tabs?.items?.length\" class=\"cc-filter-tabs\">\r\n        <div *ngFor=\"let tab of config.tabs!.items\" class=\"cc-filter-tab\" [class.active]=\"tab.id === selectedTabId\"\r\n            (click)=\"onTabClick(tab)\">\r\n            <i *ngIf=\"tab.icon && !isImgUrl(tab.icon)\" [class]=\"tab.icon\"></i>\r\n            <img *ngIf=\"tab.icon && isImgUrl(tab.icon)\" [src]=\"tab.icon\" alt=\"icon\" class=\"cc-filter-tab-icon\">\r\n            <span>{{ tab.label }}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Filters Content -->\r\n    <div class=\"cc-filter-content\">\r\n\r\n        <ng-container *ngFor=\"let section of config.sections; trackBy: trackByFn\">\r\n\r\n            <!-- Accordion Section -->\r\n            <mat-accordion *ngIf=\"section.type === 'accordion'\" class=\"cc-filter-accordion\">\r\n                <mat-expansion-panel [expanded]=\"section.expanded\" class=\"mat-elevation-z0\">\r\n                    <mat-expansion-panel-header>\r\n                        <mat-panel-title>\r\n                            {{ section.title }}\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n\r\n                    <!-- Content of Accordion -->\r\n                    <ng-container *ngIf=\"section.options\">\r\n                        <div class=\"cc-filter-group\">\r\n                            <mat-checkbox *ngFor=\"let option of section.options\"\r\n                                [checked]=\"filters[section.key]?.includes(option.value)\"\r\n                                (change)=\"onFilterChange(section.key, option.value, true)\">\r\n                                {{ option.label }}\r\n                            </mat-checkbox>\r\n                        </div>\r\n                    </ng-container>\r\n                </mat-expansion-panel>\r\n            </mat-accordion>\r\n\r\n            <!-- Select Section -->\r\n            <div *ngIf=\"section.type === 'select'\" class=\"cc-filter-section\">\r\n                <label *ngIf=\"section.title\" class=\"cc-filter-label\">{{ section.title }}</label>\r\n                <mat-form-field appearance=\"outline\" class=\"cc-filter-full-width\">\r\n                    <mat-select [placeholder]=\"section.placeholder || 'Select'\" [(value)]=\"filters[section.key]\"\r\n                        [multiple]=\"section.multi\"\r\n                        (selectionChange)=\"onFilterChange(section.key, $event.value, section.multi)\">\r\n                        <mat-option *ngFor=\"let option of section.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n\r\n            <!-- Radio Group Section -->\r\n            <div *ngIf=\"section.type === 'radio-group'\" class=\"cc-filter-section\">\r\n                <label *ngIf=\"section.title\" class=\"cc-filter-label\">{{ section.title }}</label>\r\n                <mat-radio-group [(ngModel)]=\"filters[section.key]\" (change)=\"onFilterChange(section.key, $event.value)\"\r\n                    class=\"cc-filter-radio-group\">\r\n                    <mat-radio-button *ngFor=\"let option of section.options\" [value]=\"option.value\">\r\n                        {{ option.label }}\r\n                    </mat-radio-button>\r\n                </mat-radio-group>\r\n            </div>\r\n\r\n            <!-- Checkbox Group Section (Standalone) -->\r\n            <div *ngIf=\"section.type === 'checkbox-group'\" class=\"cc-filter-section\">\r\n                <label *ngIf=\"section.title\" class=\"cc-filter-label\">{{ section.title }}</label>\r\n                <div class=\"cc-filter-group\">\r\n                    <mat-checkbox *ngFor=\"let option of section.options\"\r\n                        [checked]=\"filters[section.key]?.includes(option.value)\"\r\n                        (change)=\"onFilterChange(section.key, option.value, true)\">\r\n                        {{ option.label }}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n    </div>\r\n\r\n    <!-- Actions Footer -->\r\n    <div class=\"cc-filter-actions\" *ngIf=\"config.actions\">\r\n        <button mat-button class=\"cc-btn-text text-danger\" *ngIf=\"config.actions?.clear?.visible !== false\"\r\n            (click)=\"clearFilters()\">\r\n            {{ config.actions?.clear?.label || 'Clear Filter' }}\r\n        </button>\r\n        <button mat-flat-button color=\"warn\" class=\"cc-btn-primary\" *ngIf=\"config.actions?.apply?.visible !== false\"\r\n            [disabled]=\"config.actions?.apply?.disabled\" (click)=\"applyFilters()\">\r\n            {{ config.actions?.apply?.label || 'Apply Filter' }}\r\n        </button>\r\n    </div>\r\n</div>", styles: [".cc-filter-sidebar{display:flex;flex-direction:column;height:100%;background-color:var(--cc-filter-bg, #ffffff);border-right:1px solid var(--cc-filter-border-color, #E5E7EB);width:var(--cc-filter-width, 320px);box-shadow:2px 0 12px #0000000a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.cc-filter-header{display:flex;justify-content:flex-end;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #f0f0f0;background-color:var(--cc-filter-header-bg, #fafafa)}.cc-filter-header .cc-code-snippet-btn{color:var(--cc-primary-color, #EF4444);transition:all .2s ease}.cc-filter-header .cc-code-snippet-btn:hover{background-color:#ef444414;transform:scale(1.05)}.cc-filter-header .cc-code-snippet-btn i{font-size:1.1rem}.cc-filter-tabs{display:flex;flex-direction:column;padding:1rem 1.25rem;gap:.625rem;border-bottom:1px solid #E5E7EB;background-color:var(--cc-filter-header-bg, #ffffff)}.cc-filter-tabs .cc-filter-tab{padding:.875rem 1.125rem;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--cc-filter-tab-color, #6B7280);font-weight:500;font-size:.9375rem;transition:all .25s cubic-bezier(.4,0,.2,1);border:1.5px solid transparent;position:relative}.cc-filter-tabs .cc-filter-tab:hover{background-color:var(--cc-filter-tab-hover-bg, #F9FAFB);color:var(--cc-filter-tab-hover-color, #374151);transform:translate(2px)}.cc-filter-tabs .cc-filter-tab.active{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:var(--cc-filter-tab-active-color, #DC2626);border-color:var(--cc-filter-tab-active-border, #FECACA);box-shadow:0 2px 8px #ef44441f;font-weight:600}.cc-filter-tabs .cc-filter-tab.active:before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background-color:#ef4444;border-radius:0 2px 2px 0}.cc-filter-tabs .cc-filter-tab i{font-size:1.125rem;opacity:.9}.cc-filter-tabs .cc-filter-tab .cc-filter-tab-icon{width:1.125rem;height:1.125rem;object-fit:contain}.cc-filter-content{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.cc-filter-section{display:flex;flex-direction:column;gap:.625rem}.cc-filter-group{display:flex;flex-direction:column;gap:.75rem}::ng-deep .cc-filter-group .mat-mdc-checkbox,::ng-deep .cc-filter-group .mat-mdc-radio-button,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button{margin-bottom:.5rem}::ng-deep .cc-filter-group .mat-mdc-checkbox .mdc-checkbox,::ng-deep .cc-filter-group .mat-mdc-checkbox .mdc-radio,::ng-deep .cc-filter-group .mat-mdc-radio-button .mdc-checkbox,::ng-deep .cc-filter-group .mat-mdc-radio-button .mdc-radio,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox .mdc-checkbox,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox .mdc-radio,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button .mdc-checkbox,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button .mdc-radio{padding:8px}::ng-deep .cc-filter-group .mat-mdc-checkbox .mdc-label,::ng-deep .cc-filter-group .mat-mdc-radio-button .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button .mdc-label{font-size:.9375rem;color:#374151;padding-left:8px}::ng-deep .cc-filter-group .mat-mdc-checkbox:hover .mdc-label,::ng-deep .cc-filter-group .mat-mdc-radio-button:hover .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox:hover .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button:hover .mdc-label{color:#111827}::ng-deep .cc-filter-group .mat-mdc-checkbox-checked .mdc-label,::ng-deep .cc-filter-group .mat-mdc-radio-checked .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox-checked .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-radio-checked .mdc-label{font-weight:500;color:#dc2626}.cc-filter-label{font-size:.875rem;font-weight:500;color:var(--cc-filter-section-title-color, #374151);margin-bottom:.25rem}.cc-filter-full-width{width:100%}::ng-deep .cc-filter-accordion .mat-expansion-panel{box-shadow:none!important;background:transparent;border-radius:8px;margin-bottom:.5rem}::ng-deep .cc-filter-accordion .mat-expansion-panel:hover{background-color:#00000003}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header{padding:12px 0;height:auto;min-height:48px;border-radius:8px;transition:all .2s ease}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header.mat-expanded{height:auto;background-color:#ef444405}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header:hover{background-color:#ef44440a!important}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header .mat-content{font-weight:600;color:var(--cc-filter-accordion-title-color, #374151);text-transform:uppercase;font-size:.8125rem;letter-spacing:.05em}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-indicator:after{color:#ef4444}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-body{padding:.75rem 0 .5rem}.cc-filter-content::-webkit-scrollbar{width:6px}.cc-filter-content::-webkit-scrollbar-track{background:transparent}.cc-filter-content::-webkit-scrollbar-thumb{background-color:#0000001a;border-radius:3px}.cc-filter-content:hover::-webkit-scrollbar-thumb{background-color:#0003}::ng-deep .cc-filter-full-width.mat-mdc-form-field{width:100%}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff!important;border-radius:8px;padding:0}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .cc-filter-full-width.mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .cc-filter-full-width.mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#e2e8f0;border-width:1px;transition:border-color .2s ease}::ng-deep .cc-filter-full-width.mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .cc-filter-full-width.mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .cc-filter-full-width.mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#94a3b8}::ng-deep .cc-filter-full-width.mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .cc-filter-full-width.mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .cc-filter-full-width.mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--cc-primary-color, #EF4444);border-width:2px}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-form-field-flex{padding:0 12px;align-items:center;height:48px}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-form-field-infix{padding:8px 0!important;min-height:unset!important;display:flex;align-items:center}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-select-value{color:#1e293b;font-weight:500;font-size:.9375rem}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-select-placeholder{color:#94a3b8}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-select-arrow{color:#64748b}::ng-deep .mat-mdc-select-panel{background-color:#fff!important;border-radius:8px!important;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d!important;padding:6px 0!important;border:1px solid #E2E8F0;min-width:100%!important;margin-top:4px}::ng-deep .mat-mdc-select-panel .mat-mdc-option{padding:0 16px;height:40px;font-size:.9375rem;color:#334155;transition:background-color .15s ease}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover{background-color:#f8fafc!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item--selected{background-color:#fef2f2!important;color:#ef4444!important;font-weight:500}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{color:inherit}.cc-filter-actions{padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--cc-filter-footer-border-color, #E5E7EB);background:linear-gradient(to bottom,#fafafa,#fff);box-shadow:0 -2px 8px #00000008}.cc-filter-actions button{font-weight:500;border-radius:8px;padding:10px 20px;transition:all .25s ease;text-transform:none;font-size:.9375rem}.cc-filter-actions button.cc-btn-primary{background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;box-shadow:0 2px 8px #ef444440}.cc-filter-actions button.cc-btn-primary:hover{box-shadow:0 4px 12px #ef444459;transform:translateY(-1px)}.cc-filter-actions button.cc-btn-primary:active{transform:translateY(0)}.cc-filter-actions button.cc-btn-text{color:#ef4444!important;font-weight:600}.cc-filter-actions button.cc-btn-text:hover{background-color:#ef444414!important}\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.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: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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.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: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i8.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-filter-sidebar', standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FilterSidebarComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"cc-filter-sidebar\">\r\n\r\n    <!-- Header with Code Snippet Button -->\r\n    <div class=\"cc-filter-header\" *ngIf=\"config?.settings?.showCodeSnippet\">\r\n        <button mat-icon-button class=\"cc-code-snippet-btn\" (click)=\"onShowCodeSnippet()\" title=\"Show Code Snippet\">\r\n            <i class=\"fas fa-code\"></i>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Tabs Section -->\r\n    <div *ngIf=\"config?.tabs?.items?.length\" class=\"cc-filter-tabs\">\r\n        <div *ngFor=\"let tab of config.tabs!.items\" class=\"cc-filter-tab\" [class.active]=\"tab.id === selectedTabId\"\r\n            (click)=\"onTabClick(tab)\">\r\n            <i *ngIf=\"tab.icon && !isImgUrl(tab.icon)\" [class]=\"tab.icon\"></i>\r\n            <img *ngIf=\"tab.icon && isImgUrl(tab.icon)\" [src]=\"tab.icon\" alt=\"icon\" class=\"cc-filter-tab-icon\">\r\n            <span>{{ tab.label }}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Filters Content -->\r\n    <div class=\"cc-filter-content\">\r\n\r\n        <ng-container *ngFor=\"let section of config.sections; trackBy: trackByFn\">\r\n\r\n            <!-- Accordion Section -->\r\n            <mat-accordion *ngIf=\"section.type === 'accordion'\" class=\"cc-filter-accordion\">\r\n                <mat-expansion-panel [expanded]=\"section.expanded\" class=\"mat-elevation-z0\">\r\n                    <mat-expansion-panel-header>\r\n                        <mat-panel-title>\r\n                            {{ section.title }}\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n\r\n                    <!-- Content of Accordion -->\r\n                    <ng-container *ngIf=\"section.options\">\r\n                        <div class=\"cc-filter-group\">\r\n                            <mat-checkbox *ngFor=\"let option of section.options\"\r\n                                [checked]=\"filters[section.key]?.includes(option.value)\"\r\n                                (change)=\"onFilterChange(section.key, option.value, true)\">\r\n                                {{ option.label }}\r\n                            </mat-checkbox>\r\n                        </div>\r\n                    </ng-container>\r\n                </mat-expansion-panel>\r\n            </mat-accordion>\r\n\r\n            <!-- Select Section -->\r\n            <div *ngIf=\"section.type === 'select'\" class=\"cc-filter-section\">\r\n                <label *ngIf=\"section.title\" class=\"cc-filter-label\">{{ section.title }}</label>\r\n                <mat-form-field appearance=\"outline\" class=\"cc-filter-full-width\">\r\n                    <mat-select [placeholder]=\"section.placeholder || 'Select'\" [(value)]=\"filters[section.key]\"\r\n                        [multiple]=\"section.multi\"\r\n                        (selectionChange)=\"onFilterChange(section.key, $event.value, section.multi)\">\r\n                        <mat-option *ngFor=\"let option of section.options\" [value]=\"option.value\">\r\n                            {{ option.label }}\r\n                        </mat-option>\r\n                    </mat-select>\r\n                </mat-form-field>\r\n            </div>\r\n\r\n            <!-- Radio Group Section -->\r\n            <div *ngIf=\"section.type === 'radio-group'\" class=\"cc-filter-section\">\r\n                <label *ngIf=\"section.title\" class=\"cc-filter-label\">{{ section.title }}</label>\r\n                <mat-radio-group [(ngModel)]=\"filters[section.key]\" (change)=\"onFilterChange(section.key, $event.value)\"\r\n                    class=\"cc-filter-radio-group\">\r\n                    <mat-radio-button *ngFor=\"let option of section.options\" [value]=\"option.value\">\r\n                        {{ option.label }}\r\n                    </mat-radio-button>\r\n                </mat-radio-group>\r\n            </div>\r\n\r\n            <!-- Checkbox Group Section (Standalone) -->\r\n            <div *ngIf=\"section.type === 'checkbox-group'\" class=\"cc-filter-section\">\r\n                <label *ngIf=\"section.title\" class=\"cc-filter-label\">{{ section.title }}</label>\r\n                <div class=\"cc-filter-group\">\r\n                    <mat-checkbox *ngFor=\"let option of section.options\"\r\n                        [checked]=\"filters[section.key]?.includes(option.value)\"\r\n                        (change)=\"onFilterChange(section.key, option.value, true)\">\r\n                        {{ option.label }}\r\n                    </mat-checkbox>\r\n                </div>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n    </div>\r\n\r\n    <!-- Actions Footer -->\r\n    <div class=\"cc-filter-actions\" *ngIf=\"config.actions\">\r\n        <button mat-button class=\"cc-btn-text text-danger\" *ngIf=\"config.actions?.clear?.visible !== false\"\r\n            (click)=\"clearFilters()\">\r\n            {{ config.actions?.clear?.label || 'Clear Filter' }}\r\n        </button>\r\n        <button mat-flat-button color=\"warn\" class=\"cc-btn-primary\" *ngIf=\"config.actions?.apply?.visible !== false\"\r\n            [disabled]=\"config.actions?.apply?.disabled\" (click)=\"applyFilters()\">\r\n            {{ config.actions?.apply?.label || 'Apply Filter' }}\r\n        </button>\r\n    </div>\r\n</div>", styles: [".cc-filter-sidebar{display:flex;flex-direction:column;height:100%;background-color:var(--cc-filter-bg, #ffffff);border-right:1px solid var(--cc-filter-border-color, #E5E7EB);width:var(--cc-filter-width, 320px);box-shadow:2px 0 12px #0000000a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.cc-filter-header{display:flex;justify-content:flex-end;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #f0f0f0;background-color:var(--cc-filter-header-bg, #fafafa)}.cc-filter-header .cc-code-snippet-btn{color:var(--cc-primary-color, #EF4444);transition:all .2s ease}.cc-filter-header .cc-code-snippet-btn:hover{background-color:#ef444414;transform:scale(1.05)}.cc-filter-header .cc-code-snippet-btn i{font-size:1.1rem}.cc-filter-tabs{display:flex;flex-direction:column;padding:1rem 1.25rem;gap:.625rem;border-bottom:1px solid #E5E7EB;background-color:var(--cc-filter-header-bg, #ffffff)}.cc-filter-tabs .cc-filter-tab{padding:.875rem 1.125rem;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:.75rem;color:var(--cc-filter-tab-color, #6B7280);font-weight:500;font-size:.9375rem;transition:all .25s cubic-bezier(.4,0,.2,1);border:1.5px solid transparent;position:relative}.cc-filter-tabs .cc-filter-tab:hover{background-color:var(--cc-filter-tab-hover-bg, #F9FAFB);color:var(--cc-filter-tab-hover-color, #374151);transform:translate(2px)}.cc-filter-tabs .cc-filter-tab.active{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:var(--cc-filter-tab-active-color, #DC2626);border-color:var(--cc-filter-tab-active-border, #FECACA);box-shadow:0 2px 8px #ef44441f;font-weight:600}.cc-filter-tabs .cc-filter-tab.active:before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background-color:#ef4444;border-radius:0 2px 2px 0}.cc-filter-tabs .cc-filter-tab i{font-size:1.125rem;opacity:.9}.cc-filter-tabs .cc-filter-tab .cc-filter-tab-icon{width:1.125rem;height:1.125rem;object-fit:contain}.cc-filter-content{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.cc-filter-section{display:flex;flex-direction:column;gap:.625rem}.cc-filter-group{display:flex;flex-direction:column;gap:.75rem}::ng-deep .cc-filter-group .mat-mdc-checkbox,::ng-deep .cc-filter-group .mat-mdc-radio-button,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button{margin-bottom:.5rem}::ng-deep .cc-filter-group .mat-mdc-checkbox .mdc-checkbox,::ng-deep .cc-filter-group .mat-mdc-checkbox .mdc-radio,::ng-deep .cc-filter-group .mat-mdc-radio-button .mdc-checkbox,::ng-deep .cc-filter-group .mat-mdc-radio-button .mdc-radio,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox .mdc-checkbox,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox .mdc-radio,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button .mdc-checkbox,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button .mdc-radio{padding:8px}::ng-deep .cc-filter-group .mat-mdc-checkbox .mdc-label,::ng-deep .cc-filter-group .mat-mdc-radio-button .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button .mdc-label{font-size:.9375rem;color:#374151;padding-left:8px}::ng-deep .cc-filter-group .mat-mdc-checkbox:hover .mdc-label,::ng-deep .cc-filter-group .mat-mdc-radio-button:hover .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox:hover .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-radio-button:hover .mdc-label{color:#111827}::ng-deep .cc-filter-group .mat-mdc-checkbox-checked .mdc-label,::ng-deep .cc-filter-group .mat-mdc-radio-checked .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-checkbox-checked .mdc-label,::ng-deep .cc-filter-radio-group .mat-mdc-radio-checked .mdc-label{font-weight:500;color:#dc2626}.cc-filter-label{font-size:.875rem;font-weight:500;color:var(--cc-filter-section-title-color, #374151);margin-bottom:.25rem}.cc-filter-full-width{width:100%}::ng-deep .cc-filter-accordion .mat-expansion-panel{box-shadow:none!important;background:transparent;border-radius:8px;margin-bottom:.5rem}::ng-deep .cc-filter-accordion .mat-expansion-panel:hover{background-color:#00000003}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header{padding:12px 0;height:auto;min-height:48px;border-radius:8px;transition:all .2s ease}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header.mat-expanded{height:auto;background-color:#ef444405}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header:hover{background-color:#ef44440a!important}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header .mat-content{font-weight:600;color:var(--cc-filter-accordion-title-color, #374151);text-transform:uppercase;font-size:.8125rem;letter-spacing:.05em}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-header .mat-expansion-indicator:after{color:#ef4444}::ng-deep .cc-filter-accordion .mat-expansion-panel .mat-expansion-panel-body{padding:.75rem 0 .5rem}.cc-filter-content::-webkit-scrollbar{width:6px}.cc-filter-content::-webkit-scrollbar-track{background:transparent}.cc-filter-content::-webkit-scrollbar-thumb{background-color:#0000001a;border-radius:3px}.cc-filter-content:hover::-webkit-scrollbar-thumb{background-color:#0003}::ng-deep .cc-filter-full-width.mat-mdc-form-field{width:100%}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff!important;border-radius:8px;padding:0}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mdc-notched-outline__leading,::ng-deep .cc-filter-full-width.mat-mdc-form-field .mdc-notched-outline__notch,::ng-deep .cc-filter-full-width.mat-mdc-form-field .mdc-notched-outline__trailing{border-color:#e2e8f0;border-width:1px;transition:border-color .2s ease}::ng-deep .cc-filter-full-width.mat-mdc-form-field:hover .mdc-notched-outline__leading,::ng-deep .cc-filter-full-width.mat-mdc-form-field:hover .mdc-notched-outline__notch,::ng-deep .cc-filter-full-width.mat-mdc-form-field:hover .mdc-notched-outline__trailing{border-color:#94a3b8}::ng-deep .cc-filter-full-width.mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,::ng-deep .cc-filter-full-width.mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,::ng-deep .cc-filter-full-width.mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--cc-primary-color, #EF4444);border-width:2px}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-form-field-flex{padding:0 12px;align-items:center;height:48px}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-form-field-infix{padding:8px 0!important;min-height:unset!important;display:flex;align-items:center}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-select-value{color:#1e293b;font-weight:500;font-size:.9375rem}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-select-placeholder{color:#94a3b8}::ng-deep .cc-filter-full-width.mat-mdc-form-field .mat-mdc-select-arrow{color:#64748b}::ng-deep .mat-mdc-select-panel{background-color:#fff!important;border-radius:8px!important;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d!important;padding:6px 0!important;border:1px solid #E2E8F0;min-width:100%!important;margin-top:4px}::ng-deep .mat-mdc-select-panel .mat-mdc-option{padding:0 16px;height:40px;font-size:.9375rem;color:#334155;transition:background-color .15s ease}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover{background-color:#f8fafc!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-select-panel .mat-mdc-option.mdc-list-item--selected{background-color:#fef2f2!important;color:#ef4444!important;font-weight:500}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{color:inherit}.cc-filter-actions{padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--cc-filter-footer-border-color, #E5E7EB);background:linear-gradient(to bottom,#fafafa,#fff);box-shadow:0 -2px 8px #00000008}.cc-filter-actions button{font-weight:500;border-radius:8px;padding:10px 20px;transition:all .25s ease;text-transform:none;font-size:.9375rem}.cc-filter-actions button.cc-btn-primary{background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;box-shadow:0 2px 8px #ef444440}.cc-filter-actions button.cc-btn-primary:hover{box-shadow:0 4px 12px #ef444459;transform:translateY(-1px)}.cc-filter-actions button.cc-btn-primary:active{transform:translateY(0)}.cc-filter-actions button.cc-btn-text{color:#ef4444!important;font-weight:600}.cc-filter-actions button.cc-btn-text:hover{background-color:#ef444414!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { config: [{
+                type: Input
+            }], initialFilters: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }], filterApply: [{
+                type: Output
+            }], filterClear: [{
+                type: Output
+            }], tabChange: [{
+                type: Output
+            }], showCodeSnippet: [{
+                type: Output
+            }] } });
+
+class FilterSidebarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: FilterSidebarModule, declarations: [FilterSidebarComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MaterialModule], exports: [FilterSidebarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterSidebarModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MaterialModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterSidebarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FilterSidebarComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MaterialModule
+                    ],
+                    exports: [
+                        FilterSidebarComponent
+                    ]
+                }]
+        }] });
+
+class SummaryCardComponent {
+    config;
+    theme = 'theme-1';
+    cardClick = new EventEmitter();
+    get hostClasses() {
+        return `${this.theme} ${this.config?.isDisabled ? 'disabled' : ''} ${this.config?.isClickable !== false && !this.config?.isDisabled ? 'clickable' : ''}`;
+    }
+    constructor() { }
+    onCardClick() {
+        if (this.config?.isDisabled || this.config?.isClickable === false) {
+            return;
+        }
+        this.cardClick.emit();
+    }
+    get cardClasses() {
+        return {
+            'disabled': !!this.config?.isDisabled,
+            'clickable': this.config?.isClickable !== false && !this.config?.isDisabled
+        };
+    }
+    get iconStyles() {
+        const styles = {};
+        if (this.config.iconBackgroundColor) {
+            styles['backgroundColor'] = this.config.iconBackgroundColor;
+        }
+        if (this.config.iconColor) {
+            styles['color'] = this.config.iconColor;
+        }
+        return styles;
+    }
+    get headerStyles() {
+        const styles = {};
+        if (this.config.headerColor) {
+            styles['color'] = this.config.headerColor;
+        }
+        return styles;
+    }
+    get valueStyles() {
+        const styles = {};
+        if (this.config.valueColor) {
+            styles['color'] = this.config.valueColor;
+        }
+        return styles;
+    }
+    get descriptionStyles() {
+        const styles = {};
+        if (this.config.descriptionColor) {
+            styles['color'] = this.config.descriptionColor;
+        }
+        return styles;
+    }
+    get isDescriptionInline() {
+        return this.config.descriptionPosition === 'inline';
+    }
+    getMetaStyles(meta) {
+        const styles = {};
+        if (meta.color) {
+            styles['color'] = meta.color;
+        }
+        if (meta.backgroundColor && meta.type === 'pill') {
+            styles['backgroundColor'] = meta.backgroundColor;
+        }
+        return styles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SummaryCardComponent, isStandalone: false, selector: "lib-summary-card", inputs: { config: "config", theme: "theme" }, outputs: { cardClick: "cardClick" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"cc-summary-card\" (click)=\"onCardClick()\">\r\n    <!-- Icon Section (Left Side) -->\r\n    <div class=\"icon-section\" *ngIf=\"config.icon || config.iconImage\" [ngClass]=\"config.iconClass\"\r\n        [ngStyle]=\"iconStyles\">\r\n        <mat-icon *ngIf=\"config.icon\">{{ config.icon }}</mat-icon>\r\n        <img *ngIf=\"!config.icon && config.iconImage\" [src]=\"config.iconImage\" alt=\"icon\">\r\n    </div>\r\n\r\n    <!-- Right Section (Header + Value/Meta) -->\r\n    <div class=\"right-section\">\r\n        <!-- Header (Full Width on Right) -->\r\n        <div class=\"header\" [ngClass]=\"config.headerClass\" [ngStyle]=\"headerStyles\">\r\n            {{ config.header }}\r\n        </div>\r\n\r\n        <!-- Value and Meta Row -->\r\n        <div class=\"value-meta-row\">\r\n            <!-- Content Section -->\r\n            <div class=\"content-section\">\r\n                <!-- Value Row (with optional inline description) -->\r\n                <div class=\"value-row\" [class.inline-layout]=\"isDescriptionInline\">\r\n                    <div class=\"value-container\">\r\n                        <div class=\"value\" [ngClass]=\"config.valueClass\" [ngStyle]=\"valueStyles\">\r\n                            {{ config.value }}\r\n                            <span *ngIf=\"config.valueSubtext\" class=\"value-subtext\">{{ config.valueSubtext }}</span>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Description (inline or bottom based on config) -->\r\n                    <div class=\"description\" *ngIf=\"config.description\" [ngClass]=\"config.descriptionClass\"\r\n                        [ngStyle]=\"descriptionStyles\">\r\n                        {{ config.description }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Meta/Status Section (Aligned with Value) -->\r\n            <div class=\"meta-section\" *ngIf=\"config.metaData && config.metaData.length > 0\">\r\n                <div *ngFor=\"let meta of config.metaData\" class=\"meta-item\"\r\n                    [ngClass]=\"[meta.type === 'pill' ? 'meta-pill' : 'meta-text', meta.cssClass || '']\"\r\n                    [ngStyle]=\"getMetaStyles(meta)\">\r\n                    {{ meta.text }}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block;width:100%}.cc-summary-card{display:flex;flex-direction:row;align-items:stretch;box-sizing:border-box;font-family:var(--cc-sc-font-family, \"Inter\", sans-serif);background-color:var(--cc-sc-bg-color, #ffffff);border-radius:var(--cc-sc-border-radius, 8px);border:var(--cc-sc-border, 1px solid #e0e0e0);padding:var(--cc-sc-padding, 16px);box-shadow:var(--cc-sc-shadow, 0 2px 4px rgba(0, 0, 0, .05));transition:all var(--cc-sc-transition-duration, .2s) ease;height:100%;width:100%;overflow:hidden;gap:var(--cc-sc-icon-margin, 1rem)}.cc-summary-card.clickable{cursor:pointer}.cc-summary-card.clickable:hover{transform:var(--cc-sc-hover-transform);box-shadow:var(--cc-sc-hover-shadow)}.cc-summary-card.disabled{opacity:var(--cc-sc-disabled-opacity);cursor:not-allowed;pointer-events:none}.cc-summary-card .icon-section{width:var(--cc-sc-icon-box-size);height:var(--cc-sc-icon-box-size);min-width:var(--cc-sc-icon-box-size);display:flex;align-items:center;justify-content:center;border-radius:var(--cc-sc-icon-radius);background-color:var(--cc-sc-icon-bg);color:var(--cc-sc-icon-color);flex-shrink:0;align-self:center}.cc-summary-card .icon-section mat-icon{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);font-size:var(--cc-sc-icon-size);line-height:var(--cc-sc-icon-size)}.cc-summary-card .icon-section img{width:var(--cc-sc-icon-size);height:var(--cc-sc-icon-size);object-fit:contain}.cc-summary-card .right-section{display:flex;flex-direction:column;flex:1;min-width:0;gap:var(--cc-sc-content-gap, .5rem)}.cc-summary-card .right-section .header{font-size:var(--cc-sc-header-size);font-weight:var(--cc-sc-header-weight);text-transform:var(--cc-sc-header-transform);color:var(--cc-sc-header-color);letter-spacing:var(--cc-sc-header-letter-spacing);line-height:var(--cc-sc-header-line-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.cc-summary-card .right-section .value-meta-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;flex:1}.cc-summary-card .right-section .value-meta-row .content-section{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-width:0}.cc-summary-card .right-section .value-meta-row .content-section .value-row{display:flex;flex-direction:column;gap:var(--cc-sc-value-desc-gap)}.cc-summary-card .right-section .value-meta-row .content-section .value-row.inline-layout{flex-direction:row;align-items:baseline;flex-wrap:wrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value{font-size:var(--cc-sc-value-size);font-weight:var(--cc-sc-value-weight);color:var(--cc-sc-value-color);line-height:var(--cc-sc-value-line-height);white-space:nowrap}.cc-summary-card .right-section .value-meta-row .content-section .value-row .value .value-subtext{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);margin-left:4px}.cc-summary-card .right-section .value-meta-row .content-section .value-row .description{font-size:var(--cc-sc-desc-size);font-weight:var(--cc-sc-desc-weight);color:var(--cc-sc-desc-color);line-height:var(--cc-sc-desc-line-height)}.cc-summary-card .right-section .value-meta-row .meta-section{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-shrink:0;gap:6px}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item{font-size:.8125rem;line-height:1.4;white-space:nowrap;text-align:right;flex-shrink:0}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-text{color:var(--cc-sc-desc-color, #64748b);font-weight:500}.cc-summary-card .right-section .value-meta-row .meta-section .meta-item.meta-pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--cc-sc-meta-pill-padding, 4px 12px);border-radius:var(--cc-sc-meta-pill-radius, 20px);font-size:var(--cc-sc-meta-pill-font-size, .75rem);font-weight:var(--cc-sc-meta-pill-font-weight, 600);line-height:1.2;background-color:var(--cc-sc-meta-pill-bg, #f1f5f9);color:var(--cc-sc-meta-pill-color, #475569)}@media(max-width:600px){.cc-summary-card .icon-section{margin-right:var(--cc-sc-icon-margin-mobile, .75rem)}.cc-summary-card .content-section .header{font-size:var(--cc-sc-header-size-mobile, .7rem)}.cc-summary-card .content-section .value-row .value{font-size:var(--cc-sc-value-size-mobile, 1.25rem)}.cc-summary-card .content-section .value-row .description{font-size:var(--cc-sc-desc-size-mobile, .7rem)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+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"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], cardClick: [{
+                type: Output
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class SummaryCardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardModule, declarations: [SummaryCardComponent], imports: [CommonModule,
+            MatIconModule], exports: [SummaryCardComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardModule, imports: [CommonModule,
+            MatIconModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SummaryCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SummaryCardComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatIconModule
+                    ],
+                    exports: [
+                        SummaryCardComponent
+                    ]
+                }]
+        }] });
+
+class ConfigurableFormComponent {
+    fb;
+    snackBar;
+    http;
+    config;
+    jsonConfig;
+    data = {};
+    baseApiUrl = '';
+    formSubmit = new EventEmitter();
+    formCancel = new EventEmitter();
+    optionsLoad = new EventEmitter();
+    form;
+    processedConfig;
+    fieldVisibilityMap = new Map();
+    constructor(fb, snackBar, http) {
+        this.fb = fb;
+        this.snackBar = snackBar;
+        this.http = http;
+    }
+    ngOnInit() {
+        this.initializeForm();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] || changes['jsonConfig']) {
+            this.initializeForm();
+        }
+        if (changes['data'] && this.form) {
+            this.form.patchValue(this.data);
+        }
+    }
+    initializeForm() {
+        // Transform JSON config if provided, otherwise use config directly
+        if (this.jsonConfig) {
+            this.processedConfig = this.transformJsonConfig(this.jsonConfig);
+        }
+        else if (this.config) {
+            this.processedConfig = JSON.parse(JSON.stringify(this.config));
+        }
+        else {
+            return;
+        }
+        this.normalizeFields();
+        this.initializeFieldVisibility();
+        this.buildForm();
+        this.setupDependencies();
+        // Patch initial data if provided
+        if (this.data && Object.keys(this.data).length > 0) {
+            this.form.patchValue(this.data);
+        }
+    }
+    // Transform JSON config format to internal FormConfig format
+    transformJsonConfig(jsonConfig) {
+        const fields = jsonConfig.jsonConfig
+            .sort((a, b) => a.sequence - b.sequence)
+            .map(field => this.transformJsonField(field));
+        return {
+            sections: [{
+                    sectionTitle: jsonConfig.label,
+                    fields: fields
+                }],
+            entityType: jsonConfig.entityType
+        };
+    }
+    // Transform individual JSON field to FormField
+    transformJsonField(jsonField) {
+        const fieldType = this.mapUISubTypeToFieldType(jsonField.uiConfig.subType);
+        return {
+            name: jsonField.jsonKey,
+            jsonKey: jsonField.jsonKey,
+            label: jsonField.label,
+            type: fieldType,
+            sequence: jsonField.sequence,
+            keyType: jsonField.keyType,
+            uiConfig: jsonField.uiConfig,
+            validationRules: jsonField.validationRules,
+            required: jsonField.validationRules?.isMandatory || jsonField.validationRules?.isRequired,
+            mandatory: jsonField.validationRules?.isMandatory,
+            dependsOn: undefined, // Will be set based on dependent array
+            dependent: jsonField.uiConfig.dependent,
+            optionConfigs: jsonField.uiConfig.optionConfigs,
+            class: 'col-12'
+        };
+    }
+    // Map UI subtype to field type
+    mapUISubTypeToFieldType(subType) {
+        switch (subType) {
+            case 'UI_SUBTYPE.SHORT_TEXT':
+                return 'text';
+            case 'UI_SUBTYPE.LONG_TEXT':
+                return 'textarea';
+            case 'UI_SUBTYPE.NUMBER':
+                return 'number';
+            case 'UI_SUBTYPE.EMAIL':
+                return 'email';
+            case 'UI_SUBTYPE.PHONE':
+                return 'tel';
+            case 'UI_SUBTYPE.URL':
+                return 'url';
+            default:
+                return 'text';
+        }
+    }
+    // Normalize fields to ensure all required properties exist
+    normalizeFields() {
+        this.processedConfig.sections.forEach(section => {
+            section.fields.forEach(field => {
+                // Set default type if not specified
+                if (!field.type) {
+                    field.type = 'text';
+                }
+                // Merge uiConfig with field-level properties
+                if (field.uiConfig) {
+                    if (field.uiConfig.type === 'UI_TYPE.DROP_DOWN') {
+                        field.type = 'dropdown';
+                    }
+                    if (field.uiConfig.optionConfigs) {
+                        field.optionConfigs = field.uiConfig.optionConfigs;
+                    }
+                    if (field.uiConfig.dependent) {
+                        field.dependent = field.uiConfig.dependent;
+                    }
+                }
+                // Initialize visibility
+                if (field.visible === undefined) {
+                    field.visible = true;
+                }
+                // Load options for dropdowns
+                if ((field.type === 'dropdown' || field.type === 'select') && field.optionConfigs) {
+                    this.loadFieldOptions(field);
+                }
+            });
+        });
+    }
+    // Initialize field visibility map
+    initializeFieldVisibility() {
+        this.processedConfig.sections.forEach(section => {
+            section.fields.forEach(field => {
+                this.fieldVisibilityMap.set(field.name, field.visible !== false);
+            });
+        });
+    }
+    buildForm() {
+        const formGroupConfig = {};
+        this.processedConfig.sections.forEach(section => {
+            if (section.isRepeater) {
+                // Create FormArray for repeater sections
+                const arrayName = section.formArrayName || 'items';
+                const minItems = section.minItems || 1;
+                const initialItems = [];
+                for (let i = 0; i < minItems; i++) {
+                    initialItems.push(this.createGroup(section.fields));
+                }
+                formGroupConfig[arrayName] = this.fb.array(initialItems);
+            }
+            else {
+                // Add regular fields to form group
+                section.fields.forEach(field => {
+                    if (field.subFields) {
+                        // Composite field - add all sub-fields
+                        field.subFields.forEach(subField => {
+                            if (field.required || field.mandatory) {
+                                subField.required = true;
+                            }
+                            formGroupConfig[subField.name] = this.createControl(subField);
+                        });
+                    }
+                    else {
+                        formGroupConfig[field.name] = this.createControl(field);
+                    }
+                });
+            }
+        });
+        this.form = this.fb.group(formGroupConfig);
+        // Apply composite validators to the root form group
+        this.processedConfig.sections.forEach(section => {
+            if (!section.isRepeater) {
+                section.fields.forEach(field => {
+                    if (field.type === 'composite' && field.compositeValidationRule && field.subFields) {
+                        this.form.addValidators(this.createCompositeValidator(field));
+                    }
+                });
+            }
+        });
+        this.form.updateValueAndValidity();
+    }
+    createCompositeValidator(field) {
+        return (control) => {
+            const group = control;
+            if (!field.subFields || field.subFields.length < 2)
+                return null;
+            if (field.compositeValidationRule === 'minMax') {
+                const minControl = group.get(field.subFields[0].name);
+                const maxControl = group.get(field.subFields[1].name);
+                if (minControl && maxControl && minControl.value !== null && maxControl.value !== null) {
+                    if (Number(minControl.value) > Number(maxControl.value)) {
+                        return { [`invalid_minMax_${field.name}`]: true };
+                    }
+                }
+            }
+            if (field.compositeValidationRule === 'percentageTotal') {
+                let total = 0;
+                let allPresent = true;
+                field.subFields.forEach(sub => {
+                    const ctrl = group.get(sub.name);
+                    if (ctrl && ctrl.value !== null && ctrl.value !== '') {
+                        total += Number(ctrl.value);
+                    }
+                    else {
+                        allPresent = false;
+                    }
+                });
+                if (allPresent && total !== 100) {
+                    return { [`invalid_percentageTotal_${field.name}`]: true };
+                }
+            }
+            return null;
+        };
+    }
+    createControl(field) {
+        const validators = [];
+        // Add validators based on field configuration
+        if (field.required || field.mandatory || field.validationRules?.isMandatory || field.validationRules?.isRequired) {
+            validators.push(Validators.required);
+        }
+        if (field.validationRules?.minLength) {
+            validators.push(Validators.minLength(field.validationRules.minLength));
+        }
+        if (field.validationRules?.maxLength) {
+            validators.push(Validators.maxLength(field.validationRules.maxLength));
+        }
+        if (field.validationRules?.pattern) {
+            validators.push(Validators.pattern(field.validationRules.pattern));
+        }
+        if (field.validationRules?.min !== undefined) {
+            validators.push(Validators.min(field.validationRules.min));
+        }
+        if (field.validationRules?.max !== undefined) {
+            validators.push(Validators.max(field.validationRules.max));
+        }
+        if (field.type === 'email') {
+            validators.push(Validators.email);
+        }
+        const initialValue = field.value !== undefined ? field.value : '';
+        return this.fb.control({ value: initialValue, disabled: field.disabled || false }, validators);
+    }
+    createGroup(fields) {
+        const groupConfig = {};
+        fields.forEach(field => {
+            if (field.subFields) {
+                field.subFields.forEach(subField => {
+                    groupConfig[subField.name] = this.createControl(subField);
+                });
+            }
+            else {
+                groupConfig[field.name] = this.createControl(field);
+            }
+        });
+        return this.fb.group(groupConfig);
+    }
+    getFormArray(name) {
+        return this.form.get(name);
+    }
+    addRepeaterItem(section) {
+        const arrayName = section.formArrayName || 'items';
+        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 });
+            return;
+        }
+        formArray.push(this.createGroup(section.fields));
+    }
+    removeRepeaterItem(sectionName, index) {
+        const formArray = this.getFormArray(sectionName);
+        formArray.removeAt(index);
+    }
+    onSubmit() {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
+            this.scrollToFirstInvalidControl();
+            this.snackBar.open('Please fill all required fields', 'Close', { duration: 3000 });
+            return;
+        }
+        this.formSubmit.emit(this.form.value);
+    }
+    scrollToFirstInvalidControl() {
+        const firstInvalidControl = document.querySelector('.is-invalid');
+        if (firstInvalidControl) {
+            firstInvalidControl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+    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);
+                    if (control) {
+                        control.valueChanges.subscribe(value => {
+                            this.onFieldValueChange(field, value);
+                        });
+                    }
+                }
+            });
+        });
+    }
+    onFieldValueChange(field, value) {
+        // Handle dependent fields
+        if (field.dependent && field.dependent.length > 0) {
+            field.dependent.forEach(dependentFieldName => {
+                const dependentField = this.findFieldByName(dependentFieldName);
+                if (dependentField) {
+                    // Clear the dependent field value
+                    const control = this.form.get(dependentFieldName);
+                    if (control) {
+                        control.setValue('');
+                        control.markAsUntouched();
+                    }
+                    // Load new options for the dependent field
+                    if (value) {
+                        this.loadFieldOptions(dependentField, { [field.name]: value });
+                    }
+                    else {
+                        // Clear options if parent value is cleared
+                        dependentField.loadedOptions = [];
+                    }
+                }
+            });
+        }
+    }
+    // Load options for a dropdown field
+    loadFieldOptions(field, parentValues) {
+        // Emit event for parent to notify about options load request
+        // Allow parent to mark as handled to skip internal API call
+        const event = { field, parentValue: parentValues, handled: false };
+        this.optionsLoad.emit(event);
+        if (event.handled) {
+            return;
+        }
+        if (!field.optionConfigs) {
+            return;
+        }
+        const config = field.optionConfigs;
+        // Handle static options
+        if (config.optionDTO === 'OPTION_DTO.STATIC' && config.staticOptions) {
+            field.loadedOptions = config.staticOptions;
+            return;
+        }
+        // Handle API-based options
+        if (config.optionDTO === 'OPTION_DTO.REF_DATA' && config.url) {
+            let url = config.url;
+            // Replace placeholders in URL with parent values
+            if (parentValues) {
+                Object.keys(parentValues).forEach(key => {
+                    url = url.replace(`{${key}}`, parentValues[key]);
+                });
+            }
+            // Prepend base API URL if provided
+            if (this.baseApiUrl && !url.startsWith('http')) {
+                url = `${this.baseApiUrl}/${url}`;
+            }
+            this.http.get(url).subscribe({
+                next: (response) => {
+                    // Extract data from response
+                    const data = response.data || response.content || response;
+                    field.loadedOptions = this.extractOptions(data, config);
+                },
+                error: (error) => {
+                    console.error('Error loading options:', error);
+                    field.loadedOptions = [];
+                }
+            });
+        }
+    }
+    // Extract options from API response
+    extractOptions(data, config) {
+        if (!Array.isArray(data)) {
+            return [];
+        }
+        return data.map(item => ({
+            label: item[config.labelKey || 'name'],
+            value: item[config.requestKey || 'code'] || item[config.valueKey || 'id'],
+            code: item.code,
+            name: item.name
+        }));
+    }
+    // Get options for a field (either static or loaded)
+    getFieldOptions(field) {
+        return field.loadedOptions || field.options || [];
+    }
+    // Check if field is visible
+    isFieldVisible(field) {
+        return this.fieldVisibilityMap.get(field.name) !== false;
+    }
+    // Toggle field visibility
+    toggleFieldVisibility(field, visible) {
+        this.fieldVisibilityMap.set(field.name, visible);
+        const control = this.form.get(field.name);
+        if (control) {
+            if (visible) {
+                // Re-enable and restore validators
+                control.enable();
+                this.updateControlValidators(control, field);
+            }
+            else {
+                // Disable and clear validators
+                control.disable();
+                control.clearValidators();
+                control.updateValueAndValidity();
+            }
+        }
+    }
+    // Update control validators based on field config
+    updateControlValidators(control, field) {
+        const validators = [];
+        if (field.required || field.mandatory || field.validationRules?.isMandatory) {
+            validators.push(Validators.required);
+        }
+        if (field.validationRules?.minLength) {
+            validators.push(Validators.minLength(field.validationRules.minLength));
+        }
+        if (field.validationRules?.maxLength) {
+            validators.push(Validators.maxLength(field.validationRules.maxLength));
+        }
+        if (field.validationRules?.pattern) {
+            validators.push(Validators.pattern(field.validationRules.pattern));
+        }
+        control.setValidators(validators);
+        control.updateValueAndValidity();
+    }
+    onFileChange(event, field) {
+        const files = event.target.files;
+        if (!files || files.length === 0) {
+            return;
+        }
+        // Initialize uploadedFiles if not present
+        // Initialize uploadedFiles if not present
+        if (!field.uploadedFiles) {
+            field.uploadedFiles = [];
+        }
+        const uploadedFiles = [];
+        // Handle files
+        for (let i = 0; i < files.length; i++) {
+            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 });
+                continue;
+            }
+            uploadedFiles.push({
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                file: file
+            });
+        }
+        if (field.multiple) {
+            field.uploadedFiles.push(...uploadedFiles);
+        }
+        else {
+            field.uploadedFiles = uploadedFiles;
+        }
+        // Update form control value for validation
+        this.updateFileControlValue(field);
+        // Clear the input
+        event.target.value = '';
+    }
+    // Remove uploaded file
+    removeFile(field, index) {
+        if (field.uploadedFiles) {
+            field.uploadedFiles.splice(index, 1);
+            this.updateFileControlValue(field);
+        }
+    }
+    // Update file control value for validation
+    updateFileControlValue(field) {
+        const control = this.form.get(field.name);
+        if (control) {
+            const hasFiles = field.uploadedFiles && field.uploadedFiles.length > 0;
+            control.setValue(hasFiles ? field.uploadedFiles : null);
+            control.markAsTouched();
+        }
+    }
+    // Get character count for text field
+    getCharacterCount(fieldName) {
+        const control = this.form.get(fieldName);
+        if (control && control.value) {
+            return control.value.toString().length;
+        }
+        return 0;
+    }
+    // Toggle section collapse
+    toggleSection(section) {
+        section.collapsed = !section.collapsed;
+    }
+    onCancel() {
+        this.formCancel.emit();
+    }
+    // Helper method to find field by name
+    findFieldByName(name) {
+        for (const section of this.processedConfig.sections) {
+            const field = section.fields.find(f => f.name === name);
+            if (field) {
+                return field;
+            }
+        }
+        return undefined;
+    }
+    // Get the processed config for template use
+    get sections() {
+        return this.processedConfig?.sections || [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormComponent, deps: [{ token: i1$2.FormBuilder }, { token: i2$1.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: { formSubmit: "formSubmit", formCancel: "formCancel", optionsLoad: "optionsLoad" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" 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    <div class=\"btn-row\">\r\n        <button mat-stroked-button type=\"button\" (click)=\"onCancel()\" *ngIf=\"processedConfig?.cancelLabel\">{{\r\n            processedConfig.cancelLabel\r\n            }}</button>\r\n        <button mat-stroked-button type=\"button\" *ngIf=\"processedConfig?.saveDraftLabel\">{{\r\n            processedConfig.saveDraftLabel }}</button>\r\n        <button mat-flat-button color=\"primary\" type=\"submit\">{{ processedConfig?.submitLabel || 'Submit' }}</button>\r\n    </div>\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 / Password / URL -->\r\n        <div *ngIf=\"['text', 'email', 'number', 'tel', 'password', 'url'].includes(field.type || '')\"\r\n            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\"\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        <!-- 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-no-card{margin-bottom:var(--cf-section-spacing, 1.5rem)}.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 .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}.configurable-form-container .btn-row{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:2px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .btn-row button{padding:.625rem 1.5rem;font-size:.875rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:none;font-family:inherit}.configurable-form-container .btn-row button[mat-stroked-button]{background-color:transparent;color:var(--cf-text-primary, #111827);border:1.5px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .btn-row button[mat-stroked-button]:hover{background-color:var(--cf-hover-background, #F9FAFB);border-color:#9ca3af}.configurable-form-container .btn-row button[mat-flat-button]{background-color:var(--cf-primary-color, #3B82F6);color:#fff;box-shadow:0 1px 3px #0000001a}.configurable-form-container .btn-row button[mat-flat-button]:hover{background-color:#2563eb;box-shadow:0 4px 6px -1px #0000001a}.configurable-form-container .btn-row button[mat-flat-button]:active{background-color:#1d4ed8}@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 .btn-row{flex-direction:column-reverse}.configurable-form-container .btn-row button{width:100%}.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$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8$1.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: i7.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: i7.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\" (ngSubmit)=\"onSubmit()\" 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    <div class=\"btn-row\">\r\n        <button mat-stroked-button type=\"button\" (click)=\"onCancel()\" *ngIf=\"processedConfig?.cancelLabel\">{{\r\n            processedConfig.cancelLabel\r\n            }}</button>\r\n        <button mat-stroked-button type=\"button\" *ngIf=\"processedConfig?.saveDraftLabel\">{{\r\n            processedConfig.saveDraftLabel }}</button>\r\n        <button mat-flat-button color=\"primary\" type=\"submit\">{{ processedConfig?.submitLabel || 'Submit' }}</button>\r\n    </div>\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 / Password / URL -->\r\n        <div *ngIf=\"['text', 'email', 'number', 'tel', 'password', 'url'].includes(field.type || '')\"\r\n            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\"\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        <!-- 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-no-card{margin-bottom:var(--cf-section-spacing, 1.5rem)}.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 .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}.configurable-form-container .btn-row{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:2px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .btn-row button{padding:.625rem 1.5rem;font-size:.875rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;border:none;font-family:inherit}.configurable-form-container .btn-row button[mat-stroked-button]{background-color:transparent;color:var(--cf-text-primary, #111827);border:1.5px solid var(--cf-border-color, #D1D5DB)}.configurable-form-container .btn-row button[mat-stroked-button]:hover{background-color:var(--cf-hover-background, #F9FAFB);border-color:#9ca3af}.configurable-form-container .btn-row button[mat-flat-button]{background-color:var(--cf-primary-color, #3B82F6);color:#fff;box-shadow:0 1px 3px #0000001a}.configurable-form-container .btn-row button[mat-flat-button]:hover{background-color:#2563eb;box-shadow:0 4px 6px -1px #0000001a}.configurable-form-container .btn-row button[mat-flat-button]:active{background-color:#1d4ed8}@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 .btn-row{flex-direction:column-reverse}.configurable-form-container .btn-row button{width:100%}.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$1.MatSnackBar }, { type: i3.HttpClient }], propDecorators: { config: [{
+                type: Input
+            }], jsonConfig: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], baseApiUrl: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }], formCancel: [{
+                type: Output
+            }], optionsLoad: [{
+                type: Output
+            }] } });
+
+class ConfigurableFormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            HttpClientModule,
+            MaterialModule,
+            ConfigurableFormComponent], exports: [ConfigurableFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            HttpClientModule,
+            MaterialModule,
+            ConfigurableFormComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigurableFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        HttpClientModule,
+                        MaterialModule,
+                        ConfigurableFormComponent
+                    ],
+                    exports: [
+                        ConfigurableFormComponent
+                    ]
+                }]
+        }] });
+
+class SharedUiModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
+            MaterialModule,
+            CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+            SummaryCardModule,
+            ConfigurableFormModule], exports: [MaterialModule,
+            CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+            SummaryCardModule,
+            ConfigurableFormModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
+            MaterialModule,
+            CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+            SummaryCardModule,
+            ConfigurableFormModule, MaterialModule,
+            CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+            SummaryCardModule,
+            ConfigurableFormModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+                        SummaryCardModule,
+                        ConfigurableFormModule,
+                    ],
+                    exports: [
+                        MaterialModule,
+                        CardsModule, AlertModule, ButtonModule, ConfirmationModalModule, FilterSidebarModule,
+                        SummaryCardModule,
+                        ConfigurableFormModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Utility functions for LocalStorage operations
+ */
+const getLocalStorageItem = (key) => {
+    return localStorage.getItem(key);
+};
+const setLocalStorageItem = (key, value) => {
+    localStorage.setItem(key, value);
+};
+const removeLocalStorageItem = (key) => {
+    localStorage.removeItem(key);
+};
+const clearLocalStorage = () => {
+    localStorage.clear();
+};
+/**
+ * Utility functions for SessionStorage operations
+ */
+const getSessionStorageItem = (key) => {
+    return sessionStorage.getItem(key);
+};
+const setSessionStorageItem = (key, value) => {
+    sessionStorage.setItem(key, value);
+};
+const removeSessionStorageItem = (key) => {
+    sessionStorage.removeItem(key);
+};
+const clearSessionStorage = () => {
+    sessionStorage.clear();
+};
+
+/**
+ * Example: Basic Form Configuration
+ * This is a generic example for testing and demonstration purposes.
+ */
+const EXAMPLE_FORM_CONFIG = {
+    sections: [
+        {
+            sectionTitle: 'User Information',
+            fields: [
+                {
+                    name: 'fullName',
+                    label: 'Full Name',
+                    type: 'text',
+                    placeholder: 'Enter full name',
+                    required: true,
+                    class: 'col-12'
+                },
+                {
+                    name: 'email',
+                    label: 'Email Address',
+                    type: 'email',
+                    placeholder: 'Enter email address',
+                    required: true,
+                    class: 'col-6'
+                },
+                {
+                    name: 'phone',
+                    label: 'Phone Number',
+                    type: 'tel',
+                    placeholder: '+91 9999999999',
+                    class: 'col-6'
+                },
+                {
+                    name: 'role',
+                    label: 'Role',
+                    type: 'dropdown',
+                    placeholder: 'Select Role',
+                    options: [
+                        { label: 'Admin', value: 'admin' },
+                        { label: 'User', value: 'user' },
+                        { label: 'Guest', value: 'guest' }
+                    ],
+                    class: 'col-12'
+                }
+            ]
+        },
+        {
+            sectionTitle: 'Preferences',
+            fields: [
+                {
+                    name: 'notifications',
+                    label: 'Receive Notifications',
+                    type: 'radio',
+                    options: [
+                        { label: 'Yes', value: 'yes' },
+                        { label: 'No', value: 'no' }
+                    ],
+                    value: 'yes',
+                    class: 'col-12'
+                }
+            ]
+        },
+        {
+            sectionTitle: 'Documents',
+            fields: [
+                {
+                    name: 'profilePicture',
+                    label: 'Profile Picture',
+                    type: 'file',
+                    accept: '.jpg,.png',
+                    multiple: false,
+                    helpText: 'Upload a single profile picture (Max 5MB)',
+                    class: 'col-12'
+                },
+                {
+                    name: 'certificates',
+                    label: 'Certificates',
+                    type: 'file',
+                    accept: '.pdf,.doc,.docx',
+                    multiple: true,
+                    helpText: 'Upload multiple certificates (Max 5MB each)',
+                    class: 'col-12'
+                }
+            ]
+        }
+    ],
+    submitLabel: 'Save',
+    cancelLabel: 'Cancel',
+    entityType: 'User'
+};
+/**
+ * Example: Target Group Configuration
+ * Demonstrates composite fields for Age Group and Gender Split
+ */
+const TARGET_GROUP_CONFIG = {
+    sections: [
+        {
+            sectionTitle: 'Target Group Settings',
+            fields: [
+                {
+                    name: 'targetAgeGroup',
+                    label: 'Target Age Group',
+                    type: 'composite',
+                    separator: '-',
+                    subFields: [
+                        {
+                            label: "Min Age",
+                            name: 'minAge',
+                            type: 'number',
+                            placeholder: 'Min Age',
+                            validationRules: { min: 0 }
+                        },
+                        {
+                            label: "Max Age",
+                            name: 'maxAge',
+                            type: 'number',
+                            placeholder: 'Max Age',
+                            validationRules: { min: 0 }
+                        }
+                    ],
+                    compositeValidationRule: 'minMax',
+                    class: 'col-12'
+                },
+                {
+                    name: 'genderSplit',
+                    label: 'Target Gender Split',
+                    type: 'composite',
+                    subFields: [
+                        {
+                            label: "Male",
+                            name: 'malePercentage',
+                            type: 'number',
+                            placeholder: 'Male',
+                            suffixText: '%',
+                            validationRules: { min: 0, max: 100 }
+                        },
+                        {
+                            label: "Female",
+                            name: 'femalePercentage',
+                            type: 'number',
+                            placeholder: 'Female',
+                            suffixText: '%',
+                            validationRules: { min: 0, max: 100 }
+                        }
+                    ],
+                    compositeValidationRule: 'percentageTotal',
+                    class: 'col-12'
+                }
+            ]
+        }
+    ],
+    submitLabel: 'Save Configuration',
+    cancelLabel: 'Cancel'
+};
+
+var configurableForm_examples = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    EXAMPLE_FORM_CONFIG: EXAMPLE_FORM_CONFIG,
+    TARGET_GROUP_CONFIG: TARGET_GROUP_CONFIG
+});
+
+const DEFAULT_ITEMS_PER_PAGE = 10;
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
+const PAGINATION_THEME_DEFAULT = 'theme-1';
+const PAGINATION_THEME_DARK = 'theme-2';
+// Nav
+const NAV_VARIANT_DEFAULT = 'filled';
+const NAV_ORIENTATION_DEFAULT = 'horizontal';
+
+class PaginationComponent {
+    totalItems = 0;
+    itemsPerPage = DEFAULT_ITEMS_PER_PAGE;
+    currentPage = 1;
+    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS;
+    theme = PAGINATION_THEME_DEFAULT;
+    labels = {
+        items: 'items',
+        of: 'of',
+        perPage: 'Per Page'
+    };
+    pageChange = new EventEmitter();
+    itemsPerPageChange = new EventEmitter();
+    totalPages = 0;
+    pages = [];
+    startItem = 0;
+    endItem = 0;
+    constructor() { }
+    ngOnInit() {
+        this.calculatePagination();
+    }
+    ngOnChanges(changes) {
+        if (changes['totalItems'] || changes['itemsPerPage'] || changes['currentPage']) {
+            this.calculatePagination();
+        }
+    }
+    calculatePagination() {
+        this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+        // Ensure current page is valid
+        if (this.currentPage < 1) {
+            this.currentPage = 1;
+        }
+        else if (this.currentPage > this.totalPages && this.totalPages > 0) {
+            this.currentPage = this.totalPages;
+        }
+        this.startItem = (this.currentPage - 1) * this.itemsPerPage + 1;
+        this.endItem = Math.min(this.currentPage * this.itemsPerPage, this.totalItems);
+        if (this.totalItems === 0) {
+            this.startItem = 0;
+            this.endItem = 0;
+        }
+        this.pages = this.getVisiblePages(this.currentPage, this.totalPages);
+    }
+    getVisiblePages(current, total) {
+        if (total <= 7) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        if (current <= 4) {
+            return [1, 2, 3, 4, 5, '...', total];
+        }
+        if (current >= total - 3) {
+            return [1, '...', total - 4, total - 3, total - 2, total - 1, total];
+        }
+        return [1, '...', current - 1, current, current + 1, '...', total];
+    }
+    onPageChange(page) {
+        if (typeof page === 'string')
+            return;
+        if (page < 1 || page > this.totalPages || page === this.currentPage)
+            return;
+        this.pageChange.emit(page);
+    }
+    onItemsPerPageChange(event) {
+        const target = event.target;
+        const newSize = Number(target.value);
+        this.itemsPerPageChange.emit(newSize);
+    }
+    nextPage() {
+        if (this.currentPage < this.totalPages) {
+            this.onPageChange(this.currentPage + 1);
+        }
+    }
+    prevPage() {
+        if (this.currentPage > 1) {
+            this.onPageChange(this.currentPage - 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: PaginationComponent, isStandalone: false, selector: "lib-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", theme: "theme", labels: "labels" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-pagination\" [ngClass]=\"theme\">\n  <!-- Left Side: Items Info & Per Page -->\n  <div class=\"pagination-left\" *ngIf=\"pageSizeOptions.length > 1 || totalItems > 0\">\n    <span class=\"items-info\">\n      {{ startItem }}-{{ endItem }} {{ labels.of }} {{ totalItems }} {{ labels.items }}\n    </span>\n\n    <div class=\"per-page-selector\" *ngIf=\"pageSizeOptions.length > 1\">\n      <div class=\"select-wrapper\">\n        <select [value]=\"itemsPerPage\" (change)=\"onItemsPerPageChange($event)\">\n          <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n            {{ option }}\n          </option>\n        </select>\n        <span class=\"select-arrow\"></span>\n      </div>\n      <span class=\"per-page-label\">{{ labels.perPage }}</span>\n    </div>\n  </div>\n\n  <!-- Right Side: Page Controls -->\n  <div class=\"pagination-right\">\n    <button \n      class=\"page-btn prev-btn\" \n      [disabled]=\"currentPage === 1\" \n      (click)=\"prevPage()\"\n      aria-label=\"Previous Page\">\n      <span class=\"icon\">&lsaquo;</span>\n    </button>\n\n    <div class=\"page-numbers\">\n      <ng-container *ngFor=\"let page of pages\">\n        <button \n          *ngIf=\"page !== '...'\"\n          class=\"page-btn number-btn\" \n          [class.active]=\"page === currentPage\"\n          (click)=\"onPageChange(page)\">\n          {{ page }}\n        </button>\n        <span *ngIf=\"page === '...'\" class=\"ellipsis\">...</span>\n      </ng-container>\n    </div>\n\n    <button \n      class=\"page-btn next-btn\" \n      [disabled]=\"currentPage === totalPages || totalPages === 0\" \n      (click)=\"nextPage()\"\n      aria-label=\"Next Page\">\n      <span class=\"icon\">&rsaquo;</span>\n    </button>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.cc-pagination{display:flex;justify-content:space-between;align-items:center;padding:1rem;font-family:var(--cc-pagination-font-family);color:var(--cc-pagination-text-color);font-size:var(--cc-pagination-font-size);flex-wrap:wrap;gap:1rem;width:100%;box-sizing:border-box}.cc-pagination .pagination-left{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.cc-pagination .pagination-left .items-info{white-space:nowrap}.cc-pagination .pagination-left .per-page-selector{display:flex;align-items:center;gap:.5rem}.cc-pagination .pagination-left .per-page-selector .select-wrapper{position:relative;display:inline-block}.cc-pagination .pagination-left .per-page-selector .select-wrapper select{appearance:none;background-color:var(--cc-pagination-select-bg);border:var(--cc-pagination-select-border);border-radius:var(--cc-pagination-select-radius);padding:var(--cc-pagination-select-padding);padding-right:2rem;color:var(--cc-pagination-select-text-color);font-family:inherit;font-size:inherit;cursor:pointer;min-width:60px}.cc-pagination .pagination-left .per-page-selector .select-wrapper select:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.cc-pagination .pagination-left .per-page-selector .select-wrapper:after{content:\"\\25bc\";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.7em;color:var(--cc-pagination-select-arrow-color);pointer-events:none}.cc-pagination .pagination-left .per-page-selector .per-page-label{white-space:nowrap}.cc-pagination .pagination-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.cc-pagination .pagination-right .page-btn{display:flex;align-items:center;justify-content:center;min-width:var(--cc-pagination-btn-size);height:var(--cc-pagination-btn-size);background-color:var(--cc-pagination-btn-bg);border:var(--cc-pagination-btn-border);border-radius:var(--cc-pagination-btn-radius);color:var(--cc-pagination-btn-text-color);font-family:inherit;cursor:pointer;transition:all .2s ease;padding:0 .5rem;-webkit-user-select:none;user-select:none}.cc-pagination .pagination-right .page-btn:hover:not(:disabled){background-color:var(--cc-pagination-btn-hover-bg)}.cc-pagination .pagination-right .page-btn:disabled{opacity:var(--cc-pagination-disabled-opacity);background-color:var(--cc-pagination-disabled-bg);cursor:not-allowed}.cc-pagination .pagination-right .page-btn.active{background-color:var(--cc-pagination-btn-active-bg);border:var(--cc-pagination-btn-active-border);color:var(--cc-pagination-btn-active-text);font-weight:700}.cc-pagination .pagination-right .page-btn .icon{font-size:1.2em;line-height:1}.cc-pagination .pagination-right .page-numbers{display:flex;gap:.5rem;flex-wrap:wrap}.cc-pagination .pagination-right .ellipsis{display:flex;align-items:center;justify-content:center;color:var(--cc-pagination-text-color);width:20px}@media(max-width:600px){.cc-pagination{flex-direction:column;align-items:center;gap:1.5rem}.cc-pagination .pagination-left{width:100%;justify-content:space-between;order:2}.cc-pagination .pagination-right{width:100%;justify-content:center;order:1}.cc-pagination .pagination-right .page-numbers{justify-content:center}}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-pagination', standalone: false, template: "<div class=\"cc-pagination\" [ngClass]=\"theme\">\n  <!-- Left Side: Items Info & Per Page -->\n  <div class=\"pagination-left\" *ngIf=\"pageSizeOptions.length > 1 || totalItems > 0\">\n    <span class=\"items-info\">\n      {{ startItem }}-{{ endItem }} {{ labels.of }} {{ totalItems }} {{ labels.items }}\n    </span>\n\n    <div class=\"per-page-selector\" *ngIf=\"pageSizeOptions.length > 1\">\n      <div class=\"select-wrapper\">\n        <select [value]=\"itemsPerPage\" (change)=\"onItemsPerPageChange($event)\">\n          <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n            {{ option }}\n          </option>\n        </select>\n        <span class=\"select-arrow\"></span>\n      </div>\n      <span class=\"per-page-label\">{{ labels.perPage }}</span>\n    </div>\n  </div>\n\n  <!-- Right Side: Page Controls -->\n  <div class=\"pagination-right\">\n    <button \n      class=\"page-btn prev-btn\" \n      [disabled]=\"currentPage === 1\" \n      (click)=\"prevPage()\"\n      aria-label=\"Previous Page\">\n      <span class=\"icon\">&lsaquo;</span>\n    </button>\n\n    <div class=\"page-numbers\">\n      <ng-container *ngFor=\"let page of pages\">\n        <button \n          *ngIf=\"page !== '...'\"\n          class=\"page-btn number-btn\" \n          [class.active]=\"page === currentPage\"\n          (click)=\"onPageChange(page)\">\n          {{ page }}\n        </button>\n        <span *ngIf=\"page === '...'\" class=\"ellipsis\">...</span>\n      </ng-container>\n    </div>\n\n    <button \n      class=\"page-btn next-btn\" \n      [disabled]=\"currentPage === totalPages || totalPages === 0\" \n      (click)=\"nextPage()\"\n      aria-label=\"Next Page\">\n      <span class=\"icon\">&rsaquo;</span>\n    </button>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.cc-pagination{display:flex;justify-content:space-between;align-items:center;padding:1rem;font-family:var(--cc-pagination-font-family);color:var(--cc-pagination-text-color);font-size:var(--cc-pagination-font-size);flex-wrap:wrap;gap:1rem;width:100%;box-sizing:border-box}.cc-pagination .pagination-left{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.cc-pagination .pagination-left .items-info{white-space:nowrap}.cc-pagination .pagination-left .per-page-selector{display:flex;align-items:center;gap:.5rem}.cc-pagination .pagination-left .per-page-selector .select-wrapper{position:relative;display:inline-block}.cc-pagination .pagination-left .per-page-selector .select-wrapper select{appearance:none;background-color:var(--cc-pagination-select-bg);border:var(--cc-pagination-select-border);border-radius:var(--cc-pagination-select-radius);padding:var(--cc-pagination-select-padding);padding-right:2rem;color:var(--cc-pagination-select-text-color);font-family:inherit;font-size:inherit;cursor:pointer;min-width:60px}.cc-pagination .pagination-left .per-page-selector .select-wrapper select:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.cc-pagination .pagination-left .per-page-selector .select-wrapper:after{content:\"\\25bc\";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.7em;color:var(--cc-pagination-select-arrow-color);pointer-events:none}.cc-pagination .pagination-left .per-page-selector .per-page-label{white-space:nowrap}.cc-pagination .pagination-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.cc-pagination .pagination-right .page-btn{display:flex;align-items:center;justify-content:center;min-width:var(--cc-pagination-btn-size);height:var(--cc-pagination-btn-size);background-color:var(--cc-pagination-btn-bg);border:var(--cc-pagination-btn-border);border-radius:var(--cc-pagination-btn-radius);color:var(--cc-pagination-btn-text-color);font-family:inherit;cursor:pointer;transition:all .2s ease;padding:0 .5rem;-webkit-user-select:none;user-select:none}.cc-pagination .pagination-right .page-btn:hover:not(:disabled){background-color:var(--cc-pagination-btn-hover-bg)}.cc-pagination .pagination-right .page-btn:disabled{opacity:var(--cc-pagination-disabled-opacity);background-color:var(--cc-pagination-disabled-bg);cursor:not-allowed}.cc-pagination .pagination-right .page-btn.active{background-color:var(--cc-pagination-btn-active-bg);border:var(--cc-pagination-btn-active-border);color:var(--cc-pagination-btn-active-text);font-weight:700}.cc-pagination .pagination-right .page-btn .icon{font-size:1.2em;line-height:1}.cc-pagination .pagination-right .page-numbers{display:flex;gap:.5rem;flex-wrap:wrap}.cc-pagination .pagination-right .ellipsis{display:flex;align-items:center;justify-content:center;color:var(--cc-pagination-text-color);width:20px}@media(max-width:600px){.cc-pagination{flex-direction:column;align-items:center;gap:1.5rem}.cc-pagination .pagination-left{width:100%;justify-content:space-between;order:2}.cc-pagination .pagination-right{width:100%;justify-content:center;order:1}.cc-pagination .pagination-right .page-numbers{justify-content:center}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { totalItems: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], itemsPerPageChange: [{
+                type: Output
+            }] } });
+
+class PaginationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: PaginationModule, declarations: [PaginationComponent], imports: [CommonModule], exports: [PaginationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PaginationComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        PaginationComponent
+                    ]
+                }]
+        }] });
+
+class NavComponent {
+    items = [];
+    activeId = null;
+    variant = NAV_VARIANT_DEFAULT;
+    orientation = NAV_ORIENTATION_DEFAULT;
+    styleConfig = {};
+    selectionChange = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes['styleConfig']) {
+            console.log(' [NavComponent] styleConfig changed:', this.styleConfig);
+            console.log(' [NavComponent] computedStyles:', this.computedStyles);
+        }
+    }
+    get computedStyles() {
+        const c = this.styleConfig;
+        return {
+            // Container (direct CSS)
+            'width': c.width,
+            'box-shadow': c.boxShadow,
+            // Container (CSS Variables)
+            '--cc-nav-container-bg': c.backgroundColor,
+            '--cc-nav-container-radius': c.borderRadius,
+            '--cc-nav-container-border': c.border,
+            '--cc-nav-container-padding': c.padding,
+            '--cc-nav-container-gap': c.gap,
+            // Item (CSS Variables)
+            '--cc-nav-font-size': c.fontSize,
+            '--cc-nav-font-weight': c.fontWeight,
+            '--cc-nav-item-color': c.itemColor,
+            '--cc-nav-item-radius': c.itemRadius,
+            '--cc-nav-item-padding': c.itemPadding,
+            // Active Item (CSS Variables)
+            '--cc-nav-item-active-bg': c.activeItemBg,
+            '--cc-nav-item-active-color': c.activeItemColor,
+            '--cc-nav-item-active-font-weight': c.activeItemFontWeight,
+            '--cc-nav-item-active-border-color': c.activeItemBorderColor,
+            // Hover Item (CSS Variables)
+            '--cc-nav-item-hover-bg': c.hoverItemBg,
+            '--cc-nav-item-hover-color': c.hoverItemColor,
+            // Badge (CSS Variables)
+            '--cc-nav-badge-bg': c.badgeBg,
+            '--cc-nav-badge-color': c.badgeColor,
+        };
+    }
+    onItemClick(item) {
+        if (item.disabled)
+            return;
+        if (item.id === this.activeId)
+            return;
+        this.selectionChange.emit(item);
+    }
+    trackById(index, item) {
+        return item.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: NavComponent, isStandalone: false, selector: "lib-nav", inputs: { items: "items", activeId: "activeId", variant: "variant", orientation: "orientation", styleConfig: "styleConfig" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<nav\r\n  class=\"cc-nav\"\r\n  [ngClass]=\"[variant, orientation]\"\r\n  [ngStyle]=\"computedStyles\"\r\n  role=\"tablist\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n\r\n  <button\r\n    *ngFor=\"let item of items; trackBy: trackById\"\r\n    class=\"cc-nav-item\"\r\n    [class.active]=\"item.id === activeId\"\r\n    [class.disabled]=\"item.disabled\"\r\n    [disabled]=\"item.disabled\"\r\n    role=\"tab\"\r\n    [attr.aria-selected]=\"item.id === activeId\"\r\n    [attr.aria-disabled]=\"item.disabled || null\"\r\n    (click)=\"onItemClick(item)\">\r\n\r\n    <!-- Icon (optional) -->\r\n    <span *ngIf=\"item.icon\" class=\"cc-nav-item-icon\">\r\n      <i [ngClass]=\"item.icon\"></i>\r\n    </span>\r\n\r\n    <!-- Label -->\r\n    <span class=\"cc-nav-item-label\">{{ item.label }}</span>\r\n\r\n    <!-- Badge (optional) -->\r\n    <span *ngIf=\"item.badge != null\" class=\"cc-nav-item-badge\">\r\n      {{ item.badge }}\r\n    </span>\r\n\r\n  </button>\r\n\r\n</nav>\r\n", styles: [".cc-nav{display:flex;align-items:center;background-color:var(--cc-nav-container-bg);padding:var(--cc-nav-container-padding);border-radius:var(--cc-nav-container-radius);border:var(--cc-nav-container-border);gap:var(--cc-nav-container-gap);font-family:var(--cc-nav-font-family);font-size:var(--cc-nav-font-size);box-sizing:border-box;width:100%}.cc-nav.horizontal{flex-direction:row;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.cc-nav.horizontal::-webkit-scrollbar{display:none}.cc-nav.vertical{flex-direction:column;align-items:stretch}.cc-nav .cc-nav-item{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-nav-item-padding);border-radius:var(--cc-nav-item-radius);border:var(--cc-nav-item-border);background-color:var(--cc-nav-item-bg);color:var(--cc-nav-item-color);font-family:inherit;font-size:inherit;font-weight:var(--cc-nav-font-weight);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .2s ease;position:relative;outline:none}.cc-nav .cc-nav-item:hover:not(:disabled):not(.active){background-color:var(--cc-nav-item-hover-bg);color:var(--cc-nav-item-hover-color)}.cc-nav .cc-nav-item.active{background-color:var(--cc-nav-item-active-bg);color:var(--cc-nav-item-active-color);font-weight:var(--cc-nav-item-active-font-weight);box-shadow:var(--cc-nav-item-active-shadow)}.cc-nav .cc-nav-item:disabled,.cc-nav .cc-nav-item.disabled{opacity:var(--cc-nav-disabled-opacity);cursor:not-allowed}.cc-nav .cc-nav-item .cc-nav-item-icon{display:inline-flex;align-items:center;font-size:1.1em;line-height:1}.cc-nav .cc-nav-item .cc-nav-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--cc-nav-badge-size);height:var(--cc-nav-badge-size);border-radius:50%;background-color:var(--cc-nav-badge-bg);color:var(--cc-nav-badge-color);font-size:var(--cc-nav-badge-font-size);font-weight:var(--cc-nav-badge-font-weight, 600);padding:0 4px;line-height:1}.cc-nav.filled .cc-nav-item.active{border-bottom:var(--cc-nav-item-active-border-width) solid var(--cc-nav-item-active-border-color)}.cc-nav.underline{background-color:transparent;border-radius:0;padding:0;border-bottom:1px solid #e0e0e0}.cc-nav.underline .cc-nav-item{background-color:transparent;border-radius:0;border:none;border-bottom:var(--cc-nav-item-active-border-width) solid transparent;box-shadow:none}.cc-nav.underline .cc-nav-item:hover:not(:disabled):not(.active){background-color:transparent;border-bottom-color:#ccc}.cc-nav.underline .cc-nav-item.active{background-color:transparent;border-bottom-color:var(--cc-nav-item-active-border-color);box-shadow:none}.cc-nav.pills{background-color:transparent;padding:0}.cc-nav.pills .cc-nav-item,.cc-nav.pills .cc-nav-item.active{border-radius:999px}@media(max-width:600px){.cc-nav.horizontal{gap:2px}.cc-nav.horizontal .cc-nav-item{padding:6px 12px;font-size:13px}}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-nav', standalone: false, template: "<nav\r\n  class=\"cc-nav\"\r\n  [ngClass]=\"[variant, orientation]\"\r\n  [ngStyle]=\"computedStyles\"\r\n  role=\"tablist\"\r\n  [attr.aria-orientation]=\"orientation\">\r\n\r\n  <button\r\n    *ngFor=\"let item of items; trackBy: trackById\"\r\n    class=\"cc-nav-item\"\r\n    [class.active]=\"item.id === activeId\"\r\n    [class.disabled]=\"item.disabled\"\r\n    [disabled]=\"item.disabled\"\r\n    role=\"tab\"\r\n    [attr.aria-selected]=\"item.id === activeId\"\r\n    [attr.aria-disabled]=\"item.disabled || null\"\r\n    (click)=\"onItemClick(item)\">\r\n\r\n    <!-- Icon (optional) -->\r\n    <span *ngIf=\"item.icon\" class=\"cc-nav-item-icon\">\r\n      <i [ngClass]=\"item.icon\"></i>\r\n    </span>\r\n\r\n    <!-- Label -->\r\n    <span class=\"cc-nav-item-label\">{{ item.label }}</span>\r\n\r\n    <!-- Badge (optional) -->\r\n    <span *ngIf=\"item.badge != null\" class=\"cc-nav-item-badge\">\r\n      {{ item.badge }}\r\n    </span>\r\n\r\n  </button>\r\n\r\n</nav>\r\n", styles: [".cc-nav{display:flex;align-items:center;background-color:var(--cc-nav-container-bg);padding:var(--cc-nav-container-padding);border-radius:var(--cc-nav-container-radius);border:var(--cc-nav-container-border);gap:var(--cc-nav-container-gap);font-family:var(--cc-nav-font-family);font-size:var(--cc-nav-font-size);box-sizing:border-box;width:100%}.cc-nav.horizontal{flex-direction:row;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.cc-nav.horizontal::-webkit-scrollbar{display:none}.cc-nav.vertical{flex-direction:column;align-items:stretch}.cc-nav .cc-nav-item{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-nav-item-padding);border-radius:var(--cc-nav-item-radius);border:var(--cc-nav-item-border);background-color:var(--cc-nav-item-bg);color:var(--cc-nav-item-color);font-family:inherit;font-size:inherit;font-weight:var(--cc-nav-font-weight);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:all .2s ease;position:relative;outline:none}.cc-nav .cc-nav-item:hover:not(:disabled):not(.active){background-color:var(--cc-nav-item-hover-bg);color:var(--cc-nav-item-hover-color)}.cc-nav .cc-nav-item.active{background-color:var(--cc-nav-item-active-bg);color:var(--cc-nav-item-active-color);font-weight:var(--cc-nav-item-active-font-weight);box-shadow:var(--cc-nav-item-active-shadow)}.cc-nav .cc-nav-item:disabled,.cc-nav .cc-nav-item.disabled{opacity:var(--cc-nav-disabled-opacity);cursor:not-allowed}.cc-nav .cc-nav-item .cc-nav-item-icon{display:inline-flex;align-items:center;font-size:1.1em;line-height:1}.cc-nav .cc-nav-item .cc-nav-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--cc-nav-badge-size);height:var(--cc-nav-badge-size);border-radius:50%;background-color:var(--cc-nav-badge-bg);color:var(--cc-nav-badge-color);font-size:var(--cc-nav-badge-font-size);font-weight:var(--cc-nav-badge-font-weight, 600);padding:0 4px;line-height:1}.cc-nav.filled .cc-nav-item.active{border-bottom:var(--cc-nav-item-active-border-width) solid var(--cc-nav-item-active-border-color)}.cc-nav.underline{background-color:transparent;border-radius:0;padding:0;border-bottom:1px solid #e0e0e0}.cc-nav.underline .cc-nav-item{background-color:transparent;border-radius:0;border:none;border-bottom:var(--cc-nav-item-active-border-width) solid transparent;box-shadow:none}.cc-nav.underline .cc-nav-item:hover:not(:disabled):not(.active){background-color:transparent;border-bottom-color:#ccc}.cc-nav.underline .cc-nav-item.active{background-color:transparent;border-bottom-color:var(--cc-nav-item-active-border-color);box-shadow:none}.cc-nav.pills{background-color:transparent;padding:0}.cc-nav.pills .cc-nav-item,.cc-nav.pills .cc-nav-item.active{border-radius:999px}@media(max-width:600px){.cc-nav.horizontal{gap:2px}.cc-nav.horizontal .cc-nav-item{padding:6px 12px;font-size:13px}}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], activeId: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], styleConfig: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+class NavModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: NavModule, declarations: [NavComponent], imports: [CommonModule], exports: [NavComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NavComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        NavComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of shared-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertComponent, AlertModule, ButtonComponent, ButtonModule, CardType1Component, CardType2Component, CardsModule, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, FilterSidebarComponent, FilterSidebarModule, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, SharedUiModule, SummaryCardComponent, SummaryCardModule, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem };
+//# sourceMappingURL=commons-shared-web-ui.mjs.map