commons-shared-web-ui 0.0.28 → 0.0.29

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

@@ -43,7 +43,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i3 from '@angular/common/http';
-import { HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpParams, HttpHeaders } from '@angular/common/http';
 import { Subject, BehaviorSubject, combineLatest, forkJoin, takeUntil as takeUntil$1, of } from 'rxjs';
 import * as i1$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -679,6 +679,8 @@ class FormFieldComponent {
     autocompleteInputCtrl = new FormControl('');
     /** Filtered option list shown in the mat-autocomplete panel */
     filteredOptions = [];
+    /** Cache of the latest dependency parameters for server-side autocomplete filtering */
+    _latestDependencyValues = {};
     // ── GROUP / allowMulti support ──────────────────────────────────────────
     /** For GROUP fields with allowMulti = true */
     groupFormArray;
@@ -1106,39 +1108,56 @@ class FormFieldComponent {
             });
             const allPresent = Object.values(dependencyValues).every(v => v !== null && v !== undefined && v !== '');
             if (allPresent) {
+                this._latestDependencyValues = dependencyValues;
                 this.loadDropdownOptions(dependencyValues);
             }
             else if (this.config.optionConfig) {
+                this._latestDependencyValues = {};
                 this.config.optionConfig.optionList = [];
             }
         });
     }
-    loadDropdownOptions(queryParams = {}) {
+    loadDropdownOptions(dynamicParams = {}) {
         const optionConfig = this.config.optionConfig;
+        const acConfig = this.config.autocompleteConfig;
         const urls = optionConfig?.apiUrls ||
             (optionConfig?.apiUrl ? [optionConfig.apiUrl] :
                 optionConfig?.optionUrl ? [optionConfig.optionUrl] : []);
         if (!urls || urls.length === 0)
             return;
+        // HTTP method/body/headers: read from autocompleteConfig first, fall back to optionConfig
+        const method = acConfig?.method || 'GET';
+        const staticBody = acConfig?.body ?? null;
+        const staticQueryParams = acConfig?.queryParams || {};
+        const customHeaders = acConfig?.headers;
         const observables = urls.map(url => {
-            let fullUrl = url;
-            const params = new URLSearchParams();
-            Object.entries(queryParams).forEach(([key, value]) => {
-                if (value !== null && value !== undefined)
-                    params.append(key, String(value));
+            const fullUrl = url;
+            // Merge static queryParams and dynamicParams
+            const allQueryParams = { ...staticQueryParams, ...dynamicParams };
+            let httpParams = new HttpParams();
+            Object.entries(allQueryParams).forEach(([key, value]) => {
+                if (value !== null && value !== undefined) {
+                    httpParams = httpParams.append(key, String(value));
+                }
             });
-            const queryString = params.toString();
-            if (queryString)
-                fullUrl += (fullUrl.includes('?') ? '&' : '?') + queryString;
-            return this.http.get(fullUrl, { headers: this.getHeaders() });
+            const options = {
+                headers: this.getHeaders(customHeaders),
+                params: httpParams
+            };
+            switch (method) {
+                case 'POST': return this.http.post(fullUrl, staticBody, options);
+                case 'PUT': return this.http.put(fullUrl, staticBody, options);
+                case 'PATCH': return this.http.patch(fullUrl, staticBody, options);
+                default: return this.http.get(fullUrl, options);
+            }
         });
         forkJoin(observables).pipe(takeUntil(this.destroy$)).subscribe({
-            next: responses => {
+            next: (responses) => {
                 let mergedData = [];
-                responses.forEach(response => {
+                responses.forEach((response) => {
                     let data = optionConfig?.dataPath
                         ? this.getValueByPath(response, optionConfig.dataPath)
-                        : (Array.isArray(response) ? response : response.data || response.items || response || []);
+                        : (Array.isArray(response) ? response : response.elements || response.data || response.items || response || []);
                     // Handle Dictionary Objects by converting them to Arrays
                     if (data !== null && typeof data === 'object' && !Array.isArray(data)) {
                         data = Object.values(data);
@@ -1159,14 +1178,44 @@ class FormFieldComponent {
                         return 0;
                     });
                 }
+                // labelTemplate: read from autocompleteConfig first
+                const labelTemplate = acConfig?.labelTemplate;
                 this.config.optionConfig.optionList = mergedData.map((item) => {
-                    const label = optionConfig?.labelPath
-                        ? this.getValueByPath(item, optionConfig.labelPath)
-                        : (item.label || item.name);
+                    // Support labelTemplate: '{firstName} {lastName} ({login})'
+                    let label;
+                    if (labelTemplate) {
+                        label = labelTemplate.replace(/\{(\w+)\}/g, (_, key) => {
+                            const val = this.getValueByPath(item, key);
+                            return val !== undefined && val !== null ? String(val) : '';
+                        });
+                    }
+                    else if (optionConfig?.labelPath) {
+                        label = String(this.getValueByPath(item, optionConfig.labelPath) ?? '');
+                    }
+                    else {
+                        label = item.label || item.displayName || item.name || '';
+                    }
                     const code = optionConfig?.valuePath
                         ? this.getValueByPath(item, optionConfig.valuePath)
-                        : (item.code || item.id || item.value);
-                    return { label: String(label), code, value: item };
+                        : (item.code ?? item.id ?? item.value);
+                    // Resolve displayFields from autocompleteConfig
+                    // Supports string (single path, backward-compat) or AutocompleteDisplayField[]
+                    const displayFields = acConfig?.displayFields;
+                    let displayMeta;
+                    if (displayFields) {
+                        const fields = typeof displayFields === 'string'
+                            ? [{ path: displayFields, type: 'text' }]
+                            : displayFields;
+                        displayMeta = fields.map(f => ({
+                            path: f.path,
+                            type: f.type || 'text',
+                            icon: f.icon,
+                            className: f.className,
+                            label: f.label,
+                            value: String(this.getValueByPath(item, f.path) ?? '')
+                        })).filter(f => f.value !== '');
+                    }
+                    return { label, code, value: item, displayMeta };
                 });
                 // Refresh autocomplete filter list after options arrive from API
                 if (this.isAutocomplete) {
@@ -1187,13 +1236,21 @@ class FormFieldComponent {
             return acc?.[part];
         }, obj);
     }
-    /** Builds HttpHeaders using the token stored in the SmartFormController (sourced from configJSON). */
-    getHeaders() {
+    /** Builds HttpHeaders using the token stored in the SmartFormController (sourced from configJSON)
+     *  merged with any custom headers declared in optionConfig.headers.
+     */
+    getHeaders(customHeaders) {
         let headers = new HttpHeaders();
         if (this.controller.token) {
             const headerName = this.controller.tokenHeader || 'Authorization';
             headers = headers.set(headerName, this.controller.token);
         }
+        // Merge custom headers from optionConfig (allows MFE to pass e.g. X-SESSIONID)
+        if (customHeaders) {
+            Object.entries(customHeaders).forEach(([key, val]) => {
+                headers = headers.set(key, val);
+            });
+        }
         return headers;
     }
     updateValue(newValue) {
@@ -1296,11 +1353,32 @@ class FormFieldComponent {
     initAutocomplete() {
         // Sync display input whenever the real control value changes externally
         this._syncAutocompleteDisplayValue();
+        // Read search settings from autocompleteConfig (preferred) — no fallback to optionConfig needed
+        const acConfig = this.config.autocompleteConfig;
+        const searchParam = acConfig?.searchParam || acConfig?.searchKey;
+        const minLength = acConfig?.searchMinLength ?? 1;
+        const debounceMs = acConfig?.searchDebounce ?? (searchParam ? 300 : 150);
         // Filter the option list as the user types
         this.autocompleteInputCtrl.valueChanges
-            .pipe(debounceTime(150), distinctUntilChanged(), takeUntil(this.destroy$))
+            .pipe(debounceTime(debounceMs), distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe(search => {
-            this.filteredOptions = this._filterOptions(typeof search === 'string' ? search : '');
+            const query = typeof search === 'string' ? search : '';
+            if (searchParam) {
+                if (query.length >= minLength) {
+                    // Trigger server-side search merged with active dependencies
+                    const params = { ...this._latestDependencyValues, [searchParam]: query };
+                    this.loadDropdownOptions(params);
+                }
+                else {
+                    // If query is below min length, revert to existing full list if empty query
+                    this.filteredOptions = query.length === 0
+                        ? [...(this.config.optionConfig?.optionList || [])] : [];
+                }
+            }
+            else {
+                // Local filter
+                this.filteredOptions = this._filterOptions(query);
+            }
         });
         // Initialise filtered list with all available options
         this.filteredOptions = [...(this.config.optionConfig?.optionList || [])];
@@ -2224,11 +2302,11 @@ class FormFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldComponent, deps: [{ token: i1$3.FormBuilder }, { token: ExpressionService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormFieldComponent, isStandalone: false, selector: "lib-form-field", inputs: { config: "config", controller: "controller", formGroup: "formGroup", allowMulti: "allowMulti" }, viewQueries: [{ propertyName: "mediaDeviceInput", first: true, predicate: ["mediaDeviceInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-field mb-16px\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\" *ngIf=\"child.isEnabled !== false\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\"\r\n    class=\"group-section-wrapper mb-20px\"\r\n    [class.multi-save-active]=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n\r\n    <!-- Multi-Save: header row with label + top-right Add button -->\r\n    <div class=\"multi-save-header d-flex justify-content-between align-items-center mb-24\"\r\n      *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n      <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n        class=\"btn-add-multi\">\r\n        {{ addMultiLabel }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- Standard heading (non-multiSave) -->\r\n    <h3 class=\"group-label\"\r\n      *ngIf=\"config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active\">{{\r\n      config.sectionConfig!.label }}</h3>\r\n\r\n    <!-- \u2500\u2500 Standard (non-multiSave) repeater: accordion instances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active\">\r\n      <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\"\r\n        class=\"group-accordion-instance\"\r\n        [class.is-expanded]=\"isGroupExpanded(i)\">\r\n\r\n        <!-- Accordion header -->\r\n        <div class=\"group-accordion-header\" (click)=\"toggleGroupAccordion(i)\"\r\n          role=\"button\" [attr.aria-expanded]=\"isGroupExpanded(i)\">\r\n          <div class=\"accordion-header-left d-flex align-items-center gap-10\">\r\n            <span class=\"instance-badge\">{{ i + 1 }}</span>\r\n            <span class=\"instance-title\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n          </div>\r\n          <div class=\"accordion-header-right d-flex align-items-center gap-6\">\r\n            <button type=\"button\" class=\"accordion-remove-btn\"\r\n              *ngIf=\"instanceList.length > 1\"\r\n              (click)=\"$event.stopPropagation(); removeGroupInstance(i)\"\r\n              aria-label=\"Remove\">\r\n              <mat-icon>delete_outline</mat-icon>\r\n            </button>\r\n            <mat-icon class=\"accordion-chevron\">\r\n              {{ isGroupExpanded(i) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n            </mat-icon>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Accordion body -->\r\n        <div class=\"group-accordion-body\" *ngIf=\"isGroupExpanded(i)\">\r\n          <div class=\"group-fields sf-grid\">\r\n            <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n              <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\"\r\n                *ngIf=\"field.isEnabled !== false\">\r\n                <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\"\r\n                  [allowMulti]=\"true\">\r\n                </lib-form-field>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Full-width dashed Add button -->\r\n      <button type=\"button\" class=\"btn-add-group\" (click)=\"addGroupInstance()\">\r\n        <mat-icon>add</mat-icon> {{ addLabel }} {{ config.sectionConfig!.label }}\r\n      </button>\r\n    </ng-container>\r\n\r\n    <!-- \u2500\u2500 MultiSave: card instances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\"\r\n        class=\"group-instance position-relative mb-16 overflow-hidden\"\r\n        [class.is-editing]=\"instance.isEditing\"\r\n        [class.is-card]=\"!instance.isEditing\">\r\n\r\n        <!-- Edit / new form view -->\r\n        <div [hidden]=\"!instance.isEditing\">\r\n          <div class=\"group-fields sf-grid p-24\">\r\n            <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n              <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\"\r\n                *ngIf=\"field.isEnabled !== false\">\r\n                <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\"\r\n                  [allowMulti]=\"true\">\r\n                </lib-form-field>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n\r\n          <!-- Save / Cancel -->\r\n          <div\r\n            class=\"group-footer d-flex justify-content-between align-items-center gap-16 mt-24 pt-20 bt-1px-solid-E5E7EB p-0-24\"\r\n            *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n            <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"multiSaveError\">{{ multiSaveError }}</span>\r\n            <div class=\"footer-actions d-flex gap-12\">\r\n              <lib-button [variant]=\"'outline'\" (click)=\"cancelGroupInstance(i)\">Cancel</lib-button>\r\n              <lib-button [variant]=\"'primary'\" (click)=\"saveGroupInstance(i)\">Save</lib-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Card view (saved state) -->\r\n        <ng-container *ngIf=\"!instance.isEditing\">\r\n          <div class=\"card-view d-flex justify-content-between align-items-center p-18px-24px\"\r\n            [class.is-expanded]=\"instance.isExpanded\">\r\n            <div class=\"card-content flex-1 d-flex flex-column gap-4 overflow-hidden\">\r\n              <span class=\"card-title font-weight-600 overflow-hidden fs-1rem c-111827\">{{\r\n                instance.fg.get(config.sectionConfig!.multiSaveConfig!.summaryField || '')?.value\r\n                || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"card-actions d-flex align-items-center gap-16 ml-20\">\r\n              <mat-icon class=\"icon-delete\" (click)=\"removeGroupInstance(i, true)\">delete_outline</mat-icon>\r\n              <mat-icon class=\"icon-edit\" (click)=\"editGroupInstance(i)\">edit_outline</mat-icon>\r\n              <mat-icon class=\"icon-expand\" (click)=\"toggleExpandGroupInstance(i)\">\r\n                {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n              </mat-icon>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\"\r\n    class=\"group-section-wrapper mb-20px\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper position-relative d-flex align-items-center\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\"\r\n        class=\"password-toggle position-absolute cursor-pointer d-flex align-items-center justify-content-center b-none border-none c-6B7280 p-0-25rem\"\r\n        (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix br-none\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix d-flex align-items-center font-weight-500\" *ngIf=\"config.suffix\">{{ config.suffix\r\n        }}</span>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint font-poppins font-weight-400 text-14 text-right mt-4 c-6B7280\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix br-none\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min ?? null\" [max]=\"config.numberConfig?.max ?? null\"\r\n        [step]=\"config.numberConfig?.step || 1\" [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix d-flex align-items-center font-weight-500\" *ngIf=\"config.suffix\">{{ config.suffix\r\n        }}</span>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <input matInput [matDatepicker]=\"datePicker\" class=\"field-input date-input has-icon-right\"\r\n        [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\" [max]=\"config.dateConfig?.maxDate\"\r\n        [class.is-invalid]=\"errorMessage\" [placeholder]=\"config.placeholder || ''\" [readonly]=\"config.readonly\"\r\n        (click)=\"!config.readonly && datePicker.open()\">\r\n      <div class=\"date-icon-wrapper position-absolute d-flex align-items-center justify-content-center\"\r\n        *ngIf=\"!config.readonly\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n      </div>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Time Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTimeField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <input type=\"time\" class=\"field-input time-input\" [formControlName]=\"config.name!\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"!!config.readonly\">\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Autocomplete \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isAutocomplete\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Hidden real control (stores the code value) -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <div class=\"autocomplete-wrapper position-relative d-flex align-items-center w-100\"\r\n      [class.is-invalid]=\"errorMessage\" [class.readonly]=\"config.readonly\">\r\n      <!-- Search icon -->\r\n      <mat-icon class=\"ac-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">search</mat-icon>\r\n\r\n      <input class=\"field-input ac-input\" [formControl]=\"autocompleteInputCtrl\" [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"config.placeholder || 'Search\u2026'\" [readonly]=\"!!config.readonly\" [class.is-invalid]=\"errorMessage\"\r\n        (blur)=\"onAutocompleteClear()\" autocomplete=\"off\">\r\n\r\n      <!-- Clear button -->\r\n      <button type=\"button\"\r\n        class=\"ac-clear-btn position-absolute d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none c-9CA3AF p-0-2rem\"\r\n        *ngIf=\"autocompleteInputCtrl.value && !config.readonly\"\r\n        (click)=\"autocompleteInputCtrl.setValue(''); updateValue(null)\" tabindex=\"-1\" aria-label=\"Clear\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [panelWidth]=\"'auto'\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.label\"\r\n          (onSelectionChange)=\"onAutocompleteSelected(option)\">\r\n          {{ option.label }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"filteredOptions.length === 0\" disabled class=\"ac-no-results fs-0-8125rem c-6B7280\">\r\n          No results found\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\"\r\n        [class.card-item]=\"config.subType === 'CARD'\"\r\n        [class.selected]=\"formGroup.get(config.name!)?.value === option.code\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <div class=\"option-content d-flex flex-column gap-4 flex-1 text-left\">\r\n          <span class=\"label-text text-16 c-1F2937\">{{ option.label }}</span>\r\n          <span class=\"option-hint text-13 color-gray\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\"\r\n      class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST' || config.subType === 'CARD'\" class=\"checkbox-group d-flex flex-column gap-8\"\r\n      [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\"\r\n        class=\"checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827\"\r\n        [class.card-item]=\"config.subType === 'CARD'\" [class.selected]=\"isChecked(option.code)\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <div class=\"option-content d-flex flex-column gap-4 flex-1 text-left\">\r\n          <span class=\"label-text text-16 c-1F2937\">{{ option.label }}</span>\r\n          <span class=\"option-hint text-13 color-gray\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group d-flex flex-wrap gap-8\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\"\r\n        class=\"chip-label cursor-pointer p-6px-14px b-ffffff c-374151 b-1px-solid-D1D5DB br-20px fs-0-875rem\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" hidden>\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container d-flex justify-content-between align-items-center cursor-pointer\">\r\n      <span class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">{{ config.label }}</span>\r\n      <div class=\"switch position-relative\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider position-absolute cursor-pointer\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rich Text \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRichText\" class=\"field-wrapper component-rich-text d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rich-text-container\" [class.is-invalid]=\"errorMessage\">\r\n      <quill-editor [formControlName]=\"config.name!\" class=\"rich-text-editor d-block w-100\"\r\n        [placeholder]=\"config.richTextConfig?.placeholder || config.placeholder || ''\"\r\n        [styles]=\"{height: config.richTextConfig?.height || '200px'}\">\r\n      </quill-editor>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint font-poppins font-weight-400 text-14 text-right mt-4 c-6B7280\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group d-flex gap-4\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star d-inline-flex align-items-center cursor-pointer\"\r\n        [class.filled]=\"isStarFilled(star)\" [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper d-flex flex-column gap-6\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">{{ config.label\r\n      }}</label>\r\n    <div class=\"generated-value fs-0-875rem p-0-625rem-0-875rem b-F3F4F6 b-1px-solid-E5E7EB br-8px c-6B7280\">{{ value ||\r\n      '-' }}</div>\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div\r\n      class=\"upload-drop-zone d-flex flex-column align-items-center justify-content-center gap-8 cursor-pointer text-center p-32px-24px us-none\"\r\n      [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\" [class.is-invalid]=\"errorMessage\"\r\n      (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onFileDrop($event)\"\r\n      (click)=\"fileInput.click()\">\r\n\r\n      <!-- Icon with accent-colour pill background -->\r\n      <div class=\"upload-icon-wrap mb-4\">\r\n        <div class=\"dropzone-icon-pill d-flex align-items-center justify-content-center\">\r\n          <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text font-weight-600 m-0 fs-0-9rem\">Drag &amp; drop files here</p>\r\n      <p class=\"upload-sub-text m-0 fs-0-8rem c-64748B\">or <span class=\"upload-link\">Browse files</span></p>\r\n      <p class=\"upload-hint-text m-0 fs-0-78rem c-64748B\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported: <span class=\"upload-formats font-weight-500\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text m-0 fs-0-78rem c-64748B\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n      <span class=\"upload-size-badge fs-0-72rem\" *ngIf=\"config.attachmentConfig?.maxSizeMB\">\r\n        Max {{ config.attachmentConfig!.maxSizeMB }}MB\r\n      </span>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" hidden [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list d-flex flex-column gap-8 mt-10\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\"\r\n        class=\"uploaded-item d-flex align-items-center gap-10 p-10px-14px br-8px\"\r\n        [class.uploading]=\"f.isUploading\">\r\n\r\n        <!-- Uploading spinner -->\r\n        <ng-container *ngIf=\"f.isUploading; else fileReady\">\r\n          <div class=\"upload-spinner rounded-50 b-2px-solid-E2E8F0\"></div>\r\n          <div class=\"file-info flex-1 d-flex flex-column\">\r\n            <span class=\"file-name font-weight-500 overflow-hidden fs-0-85rem\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size uploading-label fs-0-72rem\">Uploading...</span>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- Normal state once upload is done -->\r\n        <ng-template #fileReady>\r\n          <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n          <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb rounded-4\"\r\n            alt=\"preview\">\r\n          <div class=\"file-info flex-1 d-flex flex-column\">\r\n            <span class=\"file-name font-weight-500 overflow-hidden fs-0-85rem\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size fs-0-72rem\">{{ formatFileSize(f.size) }}</span>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Compact icon-only remove button -->\r\n        <button type=\"button\" class=\"file-remove-btn d-flex align-items-center justify-content-center rounded-50\"\r\n          [disabled]=\"f.isUploading\" (click)=\"!f.isUploading && removeUploadedFile(i)\"\r\n          aria-label=\"Remove file\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Media Upload (Type 2) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isMediaUpload\" class=\"field-wrapper media-upload-wrapper d-flex flex-column gap-6 p-0 border-none b-none\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <!-- Hidden file input lives outside *ngIf \u2014 triggered via ViewChild -->\r\n    <input #mediaDeviceInput type=\"file\" hidden multiple accept=\"image/*\" (change)=\"onMediaFileSelected($event)\">\r\n\r\n    <!-- Two-column layout -->\r\n    <div class=\"mu-layout d-grid align-items-start\">\r\n\r\n      <!-- \u2500\u2500 LEFT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-left d-flex flex-column gap-20\">\r\n\r\n        <!-- Header: title + max-items badge -->\r\n        <div class=\"mu-header d-flex align-items-start flex-wrap gap-10\">\r\n          <h3 class=\"mu-title m-0 c-111827 fs-1-35rem\">\r\n            {{ config.label }}\r\n            <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n          </h3>\r\n          <span\r\n            class=\"mu-badge d-inline-flex align-items-center rounded-20 color-white font-weight-600 fs-0-72rem p-4px-12px b-111827\"\r\n            *ngIf=\"config.attachmentConfig?.maxFiles\">\r\n            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}\r\n            {{ config.attachmentConfig?.maxFiles }}\r\n            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Description -->\r\n        <p class=\"mu-description m-0 fs-0-875rem c-6B7280\" *ngIf=\"config.attachmentConfig?.description\">\r\n          {{ config.attachmentConfig?.description }}\r\n        </p>\r\n        <p class=\"mu-description m-0 fs-0-875rem c-6B7280\"\r\n          *ngIf=\"!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']\">\r\n          {{ controller.labels['LBL_MEDIA_DESC'] }}\r\n        </p>\r\n\r\n        <!-- Feature bullet list -->\r\n        <ul class=\"mu-features m-0 p-0 d-flex flex-column gap-8 ls-none\"\r\n          *ngIf=\"config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']\">\r\n          <ng-container *ngIf=\"config.attachmentConfig?.features?.length\">\r\n            <li *ngFor=\"let f of config.attachmentConfig?.features\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ f }}\r\n            </li>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!config.attachmentConfig?.features?.length\">\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_1']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_2']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_3']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n\r\n        <!-- Backdrop to close dropdown on outside click -->\r\n        <div class=\"media-menu-backdrop\" *ngIf=\"showMediaMenu\"\r\n          (click)=\"$event.stopPropagation(); showMediaMenu = false\"></div>\r\n\r\n        <!-- Add Media button + dropdown -->\r\n        <div class=\"media-add-container position-relative\" (click)=\"showMediaMenu = !showMediaMenu\">\r\n          <lib-button id=\"btn-add-media-{{ config.name }}\" [variant]=\"'warning'\"\r\n            [icon]=\"{type: 'material', value: 'add_photo_alternate'}\">\r\n            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}\r\n            <mat-icon class=\"menu-chevron fs-18px\">add</mat-icon>\r\n          </lib-button>\r\n\r\n          <div class=\"media-dropdown position-absolute rounded-12 overflow-hidden b-ffffff b-1px-solid-E5E7EB\"\r\n            *ngIf=\"showMediaMenu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n            <!-- Video -->\r\n            <button id=\"btn-media-video-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuVideo(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--video d-flex align-items-center justify-content-center rounded-8\"><mat-icon>videocam</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add\r\n                  YouTube URL'\r\n                  }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Device -->\r\n            <button id=\"btn-media-device-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuDevice(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--device d-flex align-items-center justify-content-center rounded-8\"><mat-icon>upload</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] ||\r\n                  'Select images from your\r\n                  computer' }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Library -->\r\n            <button id=\"btn-media-library-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuLibrary(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--library d-flex align-items-center justify-content-center rounded-8\"><mat-icon>photo_library</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] ||\r\n                  'Choose from default\r\n                  images' }}</span>\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- YouTube URL Input (inline below button) -->\r\n        <div class=\"youtube-input-panel d-flex flex-column gap-8 p-16 rounded-10 b-FFFAF1 b-1px-solid-E5E7EB\"\r\n          *ngIf=\"showYoutubeInput\">\r\n          <label class=\"youtube-panel-label d-flex align-items-center gap-6 font-weight-600 fs-0-875rem c-111827\">\r\n            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}\r\n          </label>\r\n          <div class=\"youtube-input-row d-flex gap-8\">\r\n            <input id=\"input-youtube-url-{{ config.name }}\" type=\"url\" class=\"field-input youtube-url-input\"\r\n              [(ngModel)]=\"youtubeUrlInput\" [ngModelOptions]=\"{standalone: true}\"\r\n              [placeholder]=\"controller.labels['PH_YOUTUBE_URL'] || 'Video URL'\" (keyup.enter)=\"addYoutubeMedia()\">\r\n            <lib-button id=\"btn-add-youtube-{{ config.name }}\" [variant]=\"'secondary'\" (click)=\"addYoutubeMedia()\">\r\n              {{ controller.labels['LBL_ADD'] || 'Add' }}\r\n            </lib-button>\r\n          </div>\r\n          <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"youtubeUrlError\">{{ youtubeUrlError }}</span>\r\n        </div>\r\n\r\n        <div\r\n          class=\"media-upload-status d-flex align-items-center gap-8 mt-4 color-error rounded-8 font-weight-500 p-10px-14px b-FEF2F2 fs-0-85rem\"\r\n          *ngIf=\"mediaUploadError\">\r\n          <mat-icon class=\"status-icon fs-18px\">error_outline</mat-icon>\r\n          <span>{{ mediaUploadError }}</span>\r\n        </div>\r\n\r\n        <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n        <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n      </div>\r\n      <!-- end left panel -->\r\n\r\n      <!-- \u2500\u2500 RIGHT PANEL (carousel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-right d-flex flex-column gap-12\">\r\n\r\n        <!-- Carousel (when items exist) -->\r\n        <div class=\"media-carousel-section d-flex flex-column gap-12\" *ngIf=\"mediaItems.length\">\r\n          <div\r\n            class=\"media-carousel-main position-relative w-100 overflow-hidden d-flex align-items-center justify-content-center br-12px b-0F172A\">\r\n            <button id=\"btn-carousel-prev-{{ config.name }}\" type=\"button\"\r\n              class=\"carousel-nav carousel-nav--prev position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85\"\r\n              (click)=\"mediaCarouselPrev()\" [disabled]=\"mediaCarouselIndex === 0\" aria-label=\"Previous\">\r\n              <mat-icon>chevron_left</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-viewer position-absolute d-flex align-items-center justify-content-center\"\r\n              *ngFor=\"let item of mediaItems; let i = index\" [hidden]=\"i !== mediaCarouselIndex\">\r\n              <div *ngIf=\"item.isUploading\"\r\n                class=\"carousel-uploading d-flex flex-column align-items-center gap-12 c-94A3B8 fs-0-85rem\">\r\n                <div class=\"carousel-spinner rounded-50 b-3px-solid-rgba-255-255-255-0-15\"></div>\r\n                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading\u2026' }}</span>\r\n              </div>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'youtube'\">\r\n                <iframe class=\"carousel-iframe w-100 h-100 br-12px\" [src]=\"item.url | trustedUrl\" frameborder=\"0\"\r\n                  allowfullscreen\r\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\">\r\n                </iframe>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'image'\">\r\n                <img class=\"carousel-image w-100 h-100 br-12px\" [src]=\"item.url\" alt=\"Media\">\r\n              </ng-container>\r\n              <button id=\"btn-remove-media-{{ config.name }}-{{ i }}\" type=\"button\"\r\n                class=\"carousel-remove-btn position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-0-0-0-0-55\"\r\n                [disabled]=\"item.isUploading\" (click)=\"removeMediaItem(i)\" aria-label=\"Remove\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <button id=\"btn-carousel-next-{{ config.name }}\" type=\"button\"\r\n              class=\"carousel-nav carousel-nav--next position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85\"\r\n              (click)=\"mediaCarouselNext()\" [disabled]=\"mediaCarouselIndex === mediaItems.length - 1\" aria-label=\"Next\">\r\n              <mat-icon>chevron_right</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-dots position-absolute d-flex gap-6\">\r\n              <span *ngFor=\"let item of mediaItems; let i = index\"\r\n                class=\"carousel-dot rounded-50 cursor-pointer b-rgba-255-255-255-0-45\"\r\n                [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\"></span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Thumbnail strip -->\r\n          <div class=\"media-thumbnail-strip d-flex flex-wrap gap-8 pb-4px\">\r\n            <div *ngFor=\"let item of mediaThumbnails; let i = index\"\r\n              class=\"media-thumb rounded-8 overflow-hidden cursor-pointer d-flex align-items-center justify-content-center b-2px-solid-transparent b-E2E8F0\"\r\n              [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\">\r\n              <div *ngIf=\"item.isUploading\"\r\n                class=\"thumb-uploading d-flex align-items-center justify-content-center w-100 h-100\">\r\n                <div class=\"thumb-spinner rounded-50 b-2px-solid-E2E8F0\"></div>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl\"\r\n                [src]=\"item.thumbnailUrl\" class=\"thumb-img w-100 h-100\" alt=\"Video thumbnail\">\r\n              <div *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl\"\r\n                class=\"thumb-yt-placeholder d-flex align-items-center justify-content-center w-100 h-100 b-1E293B c-EF4444\">\r\n                <mat-icon>play_circle</mat-icon>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'image' && item.url\" [src]=\"item.url\"\r\n                class=\"thumb-img w-100 h-100\" alt=\"Image thumbnail\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Empty right-side placeholder -->\r\n        <div\r\n          class=\"mu-right-empty d-flex flex-column align-items-center justify-content-center gap-10 h-100 text-center p-24 br-12px b-FFFAF1 c-94A3B8 b-2px-dashed-CBD5E1\"\r\n          *ngIf=\"!mediaItems.length\" (click)=\"onMediaMenuDevice()\">\r\n          <mat-icon class=\"mu-right-empty-icon fs-52px\">perm_media</mat-icon>\r\n          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- end right panel -->\r\n\r\n    </div><!-- end mu-layout -->\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Library Image Picker Modal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div class=\"media-library-overlay b-rgba-0-0-0-0-5\" *ngIf=\"showLibraryModal\" (click)=\"closeLibraryModal()\"></div>\r\n  <div class=\"media-library-modal d-flex flex-column overflow-hidden b-ffffff br-16px\" *ngIf=\"showLibraryModal\"\r\n    role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"library-modal-header d-flex align-items-start justify-content-between p-24px-28px bb-1px-solid-E5E7EB\">\r\n      <div class=\"header-left d-flex flex-column gap-8\">\r\n        <h3 class=\"library-modal-title m-0 color-dark fs-1-25rem\">\r\n          {{ controller.labels['LBL_ADD_IMAGES'] || 'Add Images' }}\r\n        </h3>\r\n        <p class=\"library-modal-subtitle m-0 color-gray fs-0-85rem\">\r\n          {{ controller.labels['LBL_LIBRARY_MODAL_DESC'] || 'Upload media to make your opportunity stand out. Plus, take\r\n          full control of your sequence - drag images to reorder as you desire.' }}\r\n        </p>\r\n      </div>\r\n      <button id=\"btn-close-library-{{ config.name }}\" type=\"button\"\r\n        class=\"library-close-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 border-none b-none c-9CA3AF\"\r\n        (click)=\"closeLibraryModal()\" aria-label=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Loading -->\r\n    <div class=\"library-loading\" *ngIf=\"libraryLoading\">\r\n      <div class=\"lib-spinner rounded-50 b-3px-solid-E2E8F0\"></div>\r\n      <span>{{ controller.labels['LBL_LOADING'] || 'Loading\u2026' }}</span>\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div class=\"library-error d-flex align-items-center gap-8 color-error b-FEF2F2 fs-0-875rem p-16px-24px\"\r\n      *ngIf=\"libraryError && !libraryLoading\">\r\n      <mat-icon>error_outline</mat-icon>\r\n      {{ libraryError }}\r\n    </div>\r\n\r\n    <!-- Image grid -->\r\n    <div class=\"library-grid d-grid gap-16 flex-1 p-28px b-F9FAFB\" *ngIf=\"!libraryLoading && libraryImages.length\">\r\n      <div *ngFor=\"let img of libraryImages; let li = index\" id=\"lib-img-{{ config.name }}-{{ li }}\"\r\n        class=\"library-grid-item position-relative rounded-12 overflow-hidden cursor-pointer bg-white b-3px-solid-transparent\"\r\n        [class.selected]=\"isLibraryItemSelected(img)\" (click)=\"toggleLibraryItem(img)\">\r\n        <img [src]=\"getLibraryItemUrl(img)\" class=\"library-grid-img w-100 h-100 d-block\" alt=\"Library image\">\r\n        <div\r\n          class=\"library-check position-absolute bg-white rounded-50 d-flex align-items-center justify-content-center c-3B82F6\"\r\n          *ngIf=\"isLibraryItemSelected(img)\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        <div class=\"library-overlay-hover position-absolute b-rgba-59-130-246-0-12\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Empty library -->\r\n    <div\r\n      class=\"library-empty d-flex flex-column align-items-center justify-content-center gap-12 flex-1 c-9CA3AF fs-0-875rem p-48px-24px\"\r\n      *ngIf=\"!libraryLoading && !libraryError && libraryImages.length === 0\">\r\n      <mat-icon>image_not_supported</mat-icon>\r\n      <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"library-modal-footer d-flex align-items-center justify-content-end bg-white p-20px-28px bt-1px-solid-E5E7EB\">\r\n      <div class=\"library-footer-actions d-flex gap-12 gap-10\">\r\n        <lib-button id=\"btn-library-cancel-{{ config.name }}\" [variant]=\"'outline'\" (click)=\"closeLibraryModal()\">\r\n          {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}\r\n        </lib-button>\r\n        <lib-button id=\"btn-library-confirm-{{ config.name }}\" [variant]=\"'primary'\"\r\n          [disabled]=\"librarySelectedIds.size === 0\" (click)=\"confirmLibrarySelection()\">\r\n          {{ controller.labels['LBL_CONTINUE'] || 'Continue' }}\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Location Field \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isLocation\" class=\"field-wrapper location-field-wrapper d-flex flex-column gap-6 gap-12\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <!-- Field label -->\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n    <p class=\"location-subtitle m-0 c-6B7280 fs-0-8125rem\" *ngIf=\"config.hint\">{{ config.hint }}</p>\r\n\r\n    <!-- Three-tab bar -->\r\n    <div class=\"location-tabs d-flex gap-12 mb-24\">\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'VENUE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('VENUE')\">\r\n        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'ONLINE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('ONLINE')\">\r\n        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'TBA' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('TBA')\">\r\n        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- VENUE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'VENUE'\" class=\"loc-panel loc-venue-panel d-flex flex-column gap-12\">\r\n\r\n      <p class=\"loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem\">\r\n        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}\r\n      </p>\r\n\r\n      <!-- Added venue rows -->\r\n      <div class=\"loc-venue-list d-flex flex-column gap-8\" *ngIf=\"locationVenues.length > 0\">\r\n        <div *ngFor=\"let venue of locationVenues; let i = index\"\r\n          class=\"loc-venue-item d-flex align-items-center gap-10 p-10px-14px br-7px b-ffffff b-1px-solid-D1D5DB\">\r\n          <mat-icon class=\"loc-venue-search-icon fs-18px c-9CA3AF\">search</mat-icon>\r\n          <span class=\"loc-venue-text flex-1 overflow-hidden fs-0-875rem c-111827\">{{ venue.address || venue.name ||\r\n            venue.description }}</span>\r\n          <button type=\"button\"\r\n            class=\"loc-action-btn loc-delete-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none p-4px\"\r\n            (click)=\"removeLocationVenue(i)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Location count badge -->\r\n      <p class=\"loc-count-text m-0 font-weight-600 fs-0-8125rem c-3B82F6\"\r\n        *ngIf=\"locationVenues.length > 0 && config.locationConfig?.allowMulti\">\r\n        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}\r\n      </p>\r\n\r\n      <!-- Search input (hide when max reached) -->\r\n      <div class=\"loc-search-container position-relative\" *ngIf=\"!locationMaxReached\">\r\n        <div class=\"loc-search-wrapper position-relative d-flex align-items-center mt-4\">\r\n          <mat-icon class=\"loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">search</mat-icon>\r\n          <input\r\n            class=\"field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem\"\r\n            [placeholder]=\"config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')\"\r\n            [value]=\"locationSearchText\" (input)=\"handleLocationSearchInput($event)\" (blur)=\"hideLocationSuggestions()\"\r\n            autocomplete=\"off\" [class.is-invalid]=\"errorMessage\">\r\n        </div>\r\n        <!-- Suggestions dropdown -->\r\n        <div class=\"loc-suggestions-panel position-absolute overflow-hidden br-8px b-ffffff b-1px-solid-D1D5DB\"\r\n          *ngIf=\"locationShowSuggestions && locationSuggestions.length\">\r\n          <div *ngFor=\"let sug of locationSuggestions\"\r\n            class=\"loc-suggestion-item d-flex align-items-center gap-10 cursor-pointer p-10px-14px\"\r\n            (mousedown)=\"onLocationSuggestionSelect(sug)\">\r\n            <mat-icon class=\"loc-suggestion-icon fs-18px c-E53E3E\">place</mat-icon>\r\n            <span class=\"loc-suggestion-text overflow-hidden fs-0-875rem c-374151\">{{ sug.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Add another button -->\r\n      <button type=\"button\"\r\n        class=\"loc-add-btn d-inline-flex align-items-center gap-6 cursor-pointer font-weight-600 p-0 b-none border-none fs-0-875rem c-1A56DB\"\r\n        *ngIf=\"locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti\">\r\n        <mat-icon>add_circle_outline</mat-icon>\r\n        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>\r\n      </button>\r\n\r\n      <!-- Map -->\r\n      <div class=\"loc-map-container overflow-hidden br-10px b-1px-solid-E5E7EB\"\r\n        *ngIf=\"config.locationConfig?.showMap !== false\">\r\n        <ng-container *ngIf=\"config.locationConfig?.googleMapsApiKey; else simpleEmbed\">\r\n          <div [id]=\"'loc-map-' + config.name\" class=\"loc-map-frame w-100 d-block border-none\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\"></div>\r\n        </ng-container>\r\n        <ng-template #simpleEmbed>\r\n          <iframe class=\"loc-map-frame w-100 d-block border-none\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\" [src]=\"getLocationMapEmbedUrl() | trustedUrl\"\r\n            frameborder=\"0\" allowfullscreen loading=\"lazy\">\r\n          </iframe>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- Map hint -->\r\n      <p class=\"loc-map-hint m-0 text-center fs-0-78rem c-6B7280\">\r\n        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}\r\n      </p>\r\n    </div>\r\n\r\n    <!-- ONLINE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'ONLINE'\" class=\"loc-panel loc-online-panel d-flex flex-column gap-12\">\r\n      <p class=\"loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem\">\r\n        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}\r\n      </p>\r\n      <div class=\"loc-search-wrapper position-relative d-flex align-items-center mt-4\">\r\n        <mat-icon class=\"loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">link</mat-icon>\r\n        <input\r\n          class=\"field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem\"\r\n          type=\"url\"\r\n          [placeholder]=\"config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')\"\r\n          [value]=\"locationOnlineUrl\" (input)=\"onLocationUrlChange($any($event.target).value)\"\r\n          [class.is-invalid]=\"errorMessage\">\r\n      </div>\r\n    </div>\r\n\r\n    <!-- TBA TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'TBA'\"\r\n      class=\"loc-panel loc-tba-panel d-flex flex-column gap-12 justify-content-center\">\r\n      <div\r\n        class=\"loc-tba-content d-flex flex-column align-items-center justify-content-center text-center gap-12 p-32px-24px b-F9FAFB b-1px-dashed-D1D5DB br-10px\">\r\n        <mat-icon class=\"loc-tba-icon fs-40px c-9CA3AF\">schedule</mat-icon>\r\n        <p class=\"loc-tba-text m-0 c-6B7280 fs-0-9rem\">\r\n          {{ controller.labels['LBL_LOC_TBA_DESC'] || \"This event's location is yet to be announced. Check back later\r\n          for updates.\" }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Hidden real form control -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n</div>", styles: [".d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-block{display:block}.d-none{display:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.grid-cols-12{grid-template-columns:repeat(12,1fr)}.w-100{width:100%}.h-100{height:100%}.position-relative{position:relative}.position-absolute{position:absolute}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-poppins{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)}.font-weight-400{font-weight:400}.font-weight-500{font-weight:500}.font-weight-600{font-weight:600}.text-13{font-size:13px}.text-14{font-size:14px}.text-16{font-size:16px}.color-white{color:#fff}.color-dark{color:#111827}.color-gray{color:#6b7280}.color-error{color:var(--cc-sf-error-text-color, #DC2626)}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.m-0{margin:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.ml-16{margin-left:16px}.ml-20{margin-left:20px}.p-0{padding:0}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.pt-20{padding-top:20px}.pb-10{padding-bottom:10px}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.rounded-4{border-radius:4px}.rounded-6{border-radius:6px}.rounded-8{border-radius:8px}.rounded-10{border-radius:10px}.rounded-12{border-radius:12px}.rounded-20{border-radius:20px}.rounded-24{border-radius:24px}.rounded-50{border-radius:50%}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.resize-vertical{resize:vertical}.box-sizing-border{box-sizing:border-box}.border-none{border:none!important}.mb-16px{margin-bottom:var(--cc-sf-grid-gap, 16px)!important}.c-DC2626{color:var(--cc-sf-label-required-color, #DC2626)!important}.ml-0-125rem{margin-left:.125rem!important}.fs-0-875rem{font-size:.875rem!important}.c-111827{color:var(--cc-sf-label-color, #111827)!important}.br-7px{border-radius:var(--cc-sf-input-radius, 7px)!important}.c-6B7280{color:var(--cc-sf-hint-color, #6B7280)!important}.fs-0-75rem{font-size:var(--cc-sf-error-text-size, .75rem)!important}.b-none{background:none!important}.p-32px-24px{padding:32px 24px!important}.us-none{-webkit-user-select:none!important;user-select:none!important}.c-1E293B{color:var(--cc-sf-label-color, #1E293B)!important}.c-3B82F6{color:var(--cc-sf-chip-selected-bg, #3B82F6)!important}.fs-0-78rem{font-size:.78rem!important}.p-10px-14px{padding:10px 14px!important}.fs-0-85rem{font-size:.85rem!important}.fs-0-72rem{font-size:.72rem!important}.c-94A3B8{color:#94a3b8!important}.p-4px{padding:4px!important}.br-8px{border-radius:var(--cc-sf-input-radius, 8px)!important}.bc-F3F4F6{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}.br-none{border-right:none!important}.bl-none{border-left:none!important}.pe-none{pointer-events:none!important}.fs-1-1rem{font-size:1.1rem!important}.c-9CA3AF{color:var(--cc-sf-hint-color, #9CA3AF)!important}.pl-2-4rem{padding-left:2.4rem!important}.fs-0-8125rem{font-size:.8125rem!important}.ls-none{list-style:none!important}.br-12px{border-radius:var(--mu-carousel-radius, 12px)!important}.b-FFFAF1{background:var(--cc-sf-dropzone-bg, #FFFAF1)!important}.fs-18px{font-size:18px!important}.b-FEF2F2{background:var(--cc-sf-error-bg, #FEF2F2)!important}.bc-DC2626{border-color:var(--cc-sf-error-border, #DC2626)!important}.c-202124{color:var(--cc-sf-label-color, #202124)!important}.fs-18px{font-size:var(--cc-sf-label-size, 18px)!important}.mb-0-5rem{margin-bottom:.5rem!important}.pt-0-625rem{padding-top:var(--cc-sf-input-padding-y, .625rem)!important}.pb-0-625rem{padding-bottom:var(--cc-sf-input-padding-y, .625rem)!important}.pl-16px{padding-left:var(--cc-sf-input-padding-x, 16px)!important}.pr-16px{padding-right:var(--cc-sf-input-padding-x, 16px)!important}.bc-ffffff{background-color:var(--cc-sf-section-bg, #ffffff)!important}.b-1px-solid-D1D5DB{border:1px solid var(--cc-sf-input-border, #D1D5DB)!important}.fs-0-75rem{font-size:.75rem!important}.c-1F2937{color:var(--cc-sf-section-label-color, #1F2937)!important}.p-6px-14px{padding:var(--cc-sf-chip-padding, 6px 14px)!important}.b-ffffff{background:var(--loc-suggestion-bg, #ffffff)!important}.c-374151{color:var(--cc-sf-label-color, #374151)!important}.br-20px{border-radius:var(--cc-sf-chip-radius, 20px)!important}.fs-0-875rem{font-size:var(--cc-sf-btn-font-size, .875rem)!important}.bc-D1D5DB{background-color:var(--cc-sf-switch-track-off, #D1D5DB)!important}.pr-2-75rem{padding-right:2.75rem!important}.p-0-25rem{padding:.25rem!important}.p-0-625rem-0-875rem{padding:var(--cc-sf-generated-padding, .625rem .875rem)!important}.b-F3F4F6{background:var(--cc-sf-generated-bg, #F3F4F6)!important}.b-1px-solid-E5E7EB{border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important}.br-8px{border-radius:var(--cc-sf-uploaded-item-radius, 8px)!important}.c-6B7280{color:var(--ms-desc-color, #6B7280)!important}.mb-20px{margin-bottom:var(--cc-sf-section-gap, 20px)!important}.br-10px{border-radius:var(--cc-sf-input-radius, 10px)!important}.p-20px{padding:var(--cc-sf-section-padding, 20px)!important}.fs-1rem{font-size:1rem!important}.m-0-0-16px-0{margin:0 0 16px!important}.bb-2px-solid-E5E7EB{border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)!important}.p-16px{padding:var(--cc-sf-instance-padding, 16px)!important}.b-F9FAFB{background:var(--loc-tba-bg, #F9FAFB)!important}.bb-1px-dashed-D1D5DB{border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)!important}.c-4B5563{color:var(--cc-sf-instance-num-color, #4B5563)!important}.fs-0-8125rem{font-size:var(--cc-sf-hint-size, .8125rem)!important}.pb-0{padding-bottom:0!important}.p-18px-24px{padding:18px 24px!important}.c-111827{color:var(--ms-title-color, #111827)!important}.bt-1px-solid-E5E7EB{border-top:1px solid #E5E7EB!important}.p-4px-10px{padding:4px 10px!important}.b-FFF5F5{background:var(--cc-sf-btn-remove-bg, #FFF5F5)!important}.c-E53E3E{color:var(--loc-delete-color, #E53E3E)!important}.b-1px-solid-FED7D7{border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7)!important}.br-4px{border-radius:var(--cc-sf-btn-remove-radius, 4px)!important}.p-8px-16px{padding:8px 16px!important}.b-transparent{background:var(--cc-sf-btn-add-bg, transparent)!important}.c-3B82F6{color:var(--cc-sf-input-focus-border, #3B82F6)!important}.b-1px-dashed-CBD5E1{border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1)!important}.br-6px{border-radius:var(--cc-sf-btn-add-radius, 6px)!important}.b-1-5px-dashed-CBD5E1{border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1)!important}.br-12px{border-radius:var(--cc-sf-dropzone-radius, 12px)!important}.bc-FFFAF1{background-color:var(--cc-sf-dropzone-bg, #FFFAF1)!important}.c-94A3B8{color:var(--cc-sf-uploaded-remove-color, #94A3B8)!important}.fs-0-9rem{font-size:var(--cc-sf-input-font-size, .9rem)!important}.c-64748B{color:var(--cc-sf-dropzone-hint-color, #64748B)!important}.b-1px-solid-E2E8F0{border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0)!important}.b-2px-solid-E2E8F0{border:2px solid #E2E8F0!important}.pr-3-5rem{padding-right:3.5rem!important}.p-0-0-875rem{padding:0 .875rem!important}.bc-FFFFFF{background-color:var(--cc-sf-input-bg, #FFFFFF)!important}.b-1-5px-solid-D1D5DB{border:var(--cc-sf-input-border, 1.5px solid #D1D5DB)!important}.mb-0-75rem{margin-bottom:.75rem!important}.mt-6px{margin-top:6px!important}.pr-2-4rem{padding-right:2.4rem!important}.p-0-2rem{padding:.2rem!important}.fs-1-35rem{font-size:1.35rem!important}.p-4px-12px{padding:4px 12px!important}.b-111827{background:var(--cc-sf-label-color, #111827)!important}.b-2px-dashed-CBD5E1{border:2px dashed var(--cc-sf-dropzone-border, #CBD5E1)!important}.fs-52px{font-size:52px!important}.p-12px-16px{padding:12px 16px!important}.bb-1px-solid-F3F4F6{border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)!important}.b-0F172A{background:var(--mu-carousel-bg, #0F172A)!important}.b-3px-solid-rgba-255-255-255-0-15{border:3px solid rgba(255,255,255,.15)!important}.b-rgba-255-255-255-0-85{background:#ffffffd9!important}.b-rgba-0-0-0-0-55{background:#0000008c!important}.b-rgba-255-255-255-0-45{background:#ffffff73!important}.pb-4px{padding-bottom:4px!important}.b-2px-solid-transparent{border:2px solid transparent!important}.b-E2E8F0{background:var(--mu-thumb-bg, #E2E8F0)!important}.b-1E293B{background:#1e293b!important}.c-EF4444{color:#ef4444!important}.b-rgba-0-0-0-0-5{background:#00000080!important}.br-16px{border-radius:var(--mu-modal-radius, 16px)!important}.p-24px-28px{padding:24px 28px!important}.bb-1px-solid-E5E7EB{border-bottom:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important}.fs-1-25rem{font-size:1.25rem!important}.p-48px-24px{padding:48px 24px!important}.b-3px-solid-E2E8F0{border:3px solid #E2E8F0!important}.p-16px-24px{padding:16px 24px!important}.p-28px{padding:28px!important}.b-3px-solid-transparent{border:3px solid transparent!important}.b-rgba-59-130-246-0-12{background:#3b82f61f!important}.p-20px-28px{padding:20px 28px!important}.c-1A56DB{color:var(--loc-add-color, #1A56DB)!important}.b-1px-dashed-D1D5DB{border:1px dashed var(--cc-sf-input-disabled-border, #D1D5DB)!important}.fs-40px{font-size:40px!important}.c-9CA3AF{color:var(--loc-tba-icon-color, #9CA3AF)!important}.form-field{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)!important}:host{--cc-sf-input-border: #D1D5DB;--cc-sf-input-bg: #ffffff;--cc-sf-input-radius: 9px;--cc-sf-input-height: 44px;--cc-sf-label-color: #111827;--cc-sf-hint-color: #9CA3AF;--cc-sf-error-border: #EF4444;--cc-sf-error-bg: #FFF5F5;--cc-sf-accent-color: #6366F1;--cc-sf-input-focus-border: #6366F1;--cc-sf-input-hover-border: #A5B4FC;--cc-sf-input-placeholder: #C4C9D4;--cc-sf-input-disabled-bg: #F8F9FB;--cc-sf-input-disabled-border: #E5E7EB;--cc-sf-switch-track-on: #6366F1;--cc-sf-switch-track-off: #D1D5DB;--cc-sf-switch-thumb: #ffffff;--cc-sf-selected-color: #6366F1}.form-row{gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{display:flex;flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-label{font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#6b7280}.field-input,input.matInput,.mat-mdc-input-element{display:block;width:100%;height:var(--cc-sf-input-height)!important;padding:0 14px!important;font-family:inherit;font-size:.9rem;color:var(--cc-sf-label-color);background-color:var(--cc-sf-input-bg)!important;border:1.5px solid var(--cc-sf-input-border)!important;border-radius:var(--cc-sf-input-radius)!important;box-sizing:border-box;box-shadow:0 1px 2px #0000000a!important;transition:all .2s cubic-bezier(.4,0,.2,1)}.field-input::placeholder,input.matInput::placeholder,.mat-mdc-input-element::placeholder{font-weight:400;font-size:14px;color:var(--cc-sf-input-placeholder)}.field-input{opacity:var(--cc-sf-input-opacity, 1);line-height:var(--cc-sf-input-line-height, 1.5);transition:var(--cc-sf-input-transition, all .2s ease)}.field-input::placeholder{font-weight:var(--cc-sf-placeholder-weight, 400);font-size:var(--cc-sf-placeholder-size, 14px);line-height:var(--cc-sf-placeholder-line-height, 100%);color:var(--cc-sf-input-placeholder)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border)!important;box-shadow:0 1px 4px #6366f114!important}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border)!important;box-shadow:0 0 0 3px #6366f124,0 1px 4px #6366f11a!important;background-color:#fefeff!important}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg)!important;color:#9ca3af!important;cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border)!important;box-shadow:none!important}.field-input.is-invalid{border-color:var(--cc-sf-error-border)!important;background-color:var(--cc-sf-error-bg)!important}.field-input.is-invalid:focus{box-shadow:0 0 0 3px #ef44441f,0 1px 4px #ef44441a!important}.field-input.textarea{resize:vertical;min-height:100px;height:auto;padding:12px 16px!important}input[type=time].time-input{cursor:pointer}input[type=time].time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;filter:invert(30%)}input[type=time].time-input::-webkit-calendar-picker-indicator:hover{opacity:1}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.char-count-hint{font-style:normal;line-height:100%;letter-spacing:.02em}.radio-group.layout-column,.checkbox-group.layout-column{display:grid!important;grid-template-columns:repeat(12,1fr);gap:16px;width:100%}.radio-group.layout-row,.checkbox-group.layout-row{flex-direction:column!important;gap:12px;width:100%}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #F05A28)}.radio-label.card-item,.checkbox-label.card-item{display:flex!important;flex-direction:row-reverse!important;justify-content:space-between!important;align-items:center!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);border-radius:12px;padding:16px 20px;box-sizing:border-box;transition:all .2s ease;background:var(--cc-sf-input-bg, #ffffff);margin-bottom:0}.radio-label.card-item input,.checkbox-label.card-item input{margin-left:16px}.radio-label.card-item.selected,.checkbox-label.card-item.selected{border-color:var(--cc-sf-selected-color);background-color:#f05a280d}.radio-label.card-item .option-content .label-text,.checkbox-label.card-item .option-content .label-text,.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-label{transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-selected-color);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-selected-color)}.switch{width:50px;height:24px;display:inline-block}.switch input{opacity:0;width:0;height:0;position:absolute}.switch input:checked+.slider{background-color:var(--cc-sf-switch-track-on)!important}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{inset:0;transition:.4s;background-color:var(--cc-sf-switch-track-off);border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb);transition:.4s;border-radius:50%}.rating-group .star{transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper .password-toggle{right:.625rem;top:50%;transform:translateY(-50%);line-height:1;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-left:12px;padding-top:2px;padding-bottom:2px;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);line-height:1.4}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-accordion-instance{border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-border-radius-inner, 8px);margin-bottom:8px;overflow:hidden;transition:border-color .2s ease}.group-section-wrapper .group-accordion-instance:last-of-type{margin-bottom:0}.group-section-wrapper .group-accordion-instance .group-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--cc-sf-repeater-accordion-header-bg, #F9FAFB);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}.group-section-wrapper .group-accordion-instance .group-accordion-header:hover{background:var(--cc-sf-repeater-accordion-active-bg, #EFF6FF)}.group-section-wrapper .group-accordion-instance .group-accordion-header .instance-badge{width:22px;height:22px;border-radius:50%;background:var(--cc-sf-repeater-badge-bg, #E5E7EB);color:var(--cc-sf-repeater-badge-color, #374151);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.group-section-wrapper .group-accordion-instance .group-accordion-header .instance-title{font-size:var(--cc-sf-instance-num-size, .8125rem);font-weight:600;color:var(--cc-sf-repeater-accordion-header-color, #1F2937)}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn{background:none;border:none;cursor:pointer;color:var(--cc-sf-btn-remove-color, #E53E3E);padding:4px;border-radius:4px;line-height:1;display:flex;align-items:center;transition:background .15s ease}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-chevron{font-size:1.25rem;width:1.25rem;height:1.25rem;line-height:1.25rem;color:var(--cc-sf-instance-num-color, #4B5563)}.group-section-wrapper .group-accordion-instance .group-accordion-body{padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border-top:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .btn-add-group{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 20px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-family:inherit;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.group-section-wrapper .btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.group-section-wrapper .btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper.multi-save-active{border:none;box-shadow:none;padding:0;background:transparent}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button{color:var(--ms-btn-add-color, #3B82F6);font-weight:600;font-size:.875rem;padding:8px 12px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button:hover{color:var(--ms-btn-add-hover, #2563EB);background-color:var(--cc-sf-btn-add-hover-bg, #EFF6FF)}.group-section-wrapper.multi-save-active .group-instance{box-shadow:var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper.multi-save-active .group-instance.is-editing{padding:24px}.group-section-wrapper.multi-save-active .group-instance.is-card{cursor:pointer;transition:all .2s ease-in-out}.group-section-wrapper.multi-save-active .group-instance.is-card:hover{box-shadow:var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, .08));border-color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-title{white-space:nowrap;text-overflow:ellipsis}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-desc{line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view.is-expanded .card-content .card-desc{-webkit-line-clamp:unset;line-clamp:unset}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon{font-size:22px;width:22px;height:22px;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .2s}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-delete:hover{color:var(--cc-sf-error-border, #DC2626)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-edit:hover{color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-expand{color:var(--cc-sf-input-disabled-border, #E5E7EB)}.btn-remove{transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{background-color:var(--cc-sf-dropzone-bg, #F8FAFC);border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);transition:background-color .2s ease,border-color .2s ease}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap .dropzone-icon-pill{width:52px;height:52px;border-radius:50%;background:var(--cc-sf-dropzone-icon-bg, rgba(59, 130, 246, .1))}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:28px;width:28px;height:28px;line-height:28px;color:var(--cc-sf-accent-color, #3B82F6)}.upload-main-text{color:var(--cc-sf-label-color, #1E293B)}.upload-sub-text{color:var(--cc-sf-hint-color, #64748B)}.upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-size-badge{display:inline-block;padding:2px 8px;border-radius:20px;background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-hint-color, #6B7280);font-weight:500}.uploaded-item{background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;flex-shrink:0}.uploaded-item .file-info{min-width:0;gap:2px}.uploaded-item .file-info .file-name{white-space:nowrap;text-overflow:ellipsis}.uploaded-item .file-remove-btn{flex-shrink:0;width:32px;height:32px;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:0;display:flex;align-items:center;justify-content:center;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover:not(:disabled){color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.uploaded-item .file-remove-btn:disabled{opacity:.4;cursor:not-allowed}.uploaded-item.uploading{background:var(--cc-sf-uploaded-uploading-bg, #F8FAFC);border-color:var(--cc-sf-uploaded-uploading-border, #CBD5E1);opacity:.85}.upload-spinner{width:20px;height:20px;flex-shrink:0;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}@keyframes cc-spin{to{transform:rotate(360deg)}}.uploading-label{font-style:italic}.input-group{align-items:stretch}.input-group .field-input{flex:1;width:auto}.input-prefix+.input-group .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .field-input:has(+.input-suffix){border-top-right-radius:0;border-bottom-right-radius:0}.input-group .field-input.has-icon-right{padding-right:3rem}.input-group.readonly .field-input{cursor:default}.input-prefix,.input-suffix{display:flex!important;align-items:center;white-space:nowrap;padding:0 14px;background-color:var(--cc-sf-input-disabled-bg);border:1px solid var(--cc-sf-input-border);font-size:.875rem;color:var(--cc-sf-hint-color);-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px)}.readonly-icons{right:.875rem;top:50%;transform:translateY(-50%)}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.date-icon-wrapper{right:.5rem;top:50%;transform:translateY(-50%);pointer-events:auto}.date-icon-wrapper .mat-icon-button{width:32px;height:32px;line-height:32px}.subfields-group-wrapper .subfields-row{transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{font-weight:700}.autocomplete-wrapper .ac-input{padding-left:40px!important}.autocomplete-wrapper .ac-search-icon{left:.75rem;width:1.1rem;height:1.1rem;line-height:1.1rem;z-index:1;transition:color var(--cc-sf-input-transition, .2s ease)}.autocomplete-wrapper .ac-clear-btn{right:.6rem;transition:color .15s ease,background .15s ease}.autocomplete-wrapper .ac-clear-btn mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.autocomplete-wrapper .ac-clear-btn:hover{color:var(--cc-sf-label-color, #374151);background:var(--cc-sf-input-disabled-bg, #F3F4F6)}.autocomplete-wrapper .ac-clear-btn:focus{outline:none}.autocomplete-wrapper:focus-within .ac-search-icon{color:var(--cc-sf-accent-color, #3B82F6)}.autocomplete-wrapper.is-invalid .ac-input{border-color:var(--cc-sf-error-border)!important;background-color:var(--cc-sf-error-bg)}.autocomplete-wrapper.readonly .ac-input{background-color:var(--cc-sf-input-disabled-bg);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border)!important}.ac-no-results{font-style:italic}.mu-layout{grid-template-columns:1fr 1fr;gap:32px}@media(max-width:768px){.mu-layout{grid-template-columns:1fr}}.mu-title{font-weight:700;line-height:1.3}.mu-badge{white-space:nowrap;flex-shrink:0}.mu-description{line-height:1.6}.mu-feature-item .mu-check{width:16px;height:16px;line-height:16px;flex-shrink:0}.mu-right{min-height:260px}.mu-right-empty{min-height:250px;max-width:400px;box-shadow:0 2px 10px #0000000d;transition:box-shadow .2s ease}.mu-right-empty:hover{cursor:pointer;box-shadow:0 4px 16px #0000001a}.mu-right-empty .mu-right-empty-icon{width:52px;height:52px;line-height:52px;opacity:.3}.mu-right-empty p{margin:0;font-size:.85rem}.media-add-container{display:inline-block}.media-add-container ::ng-deep button{display:flex;align-items:center;gap:6px}.media-add-container ::ng-deep button .menu-chevron{width:18px;height:18px;line-height:18px;transition:transform .2s ease}.media-dropdown{top:calc(100% + 6px);left:0;z-index:200;min-width:240px;box-shadow:var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, .12));animation:mu-fade-in .15s ease}@keyframes mu-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.media-dropdown-item{transition:background .15s ease}.media-dropdown-item:last-child{border-bottom:none}.media-dropdown-item:hover{background:var(--cc-sf-dropzone-hover-bg, #F0F9FF)}.media-drop-icon{width:36px;height:36px;flex-shrink:0}.media-drop-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.media-drop-icon--video{background:var(--mu-icon-video-bg, #FFF0F0);color:var(--mu-icon-video-color, #EF4444)}.media-drop-icon--device{background:var(--mu-icon-device-bg, #EFF6FF);color:var(--mu-icon-device-color, #3B82F6)}.media-drop-icon--library{background:var(--mu-icon-library-bg, #F0FDF4);color:var(--mu-icon-library-color, #22C55E)}.media-drop-text{gap:2px}.youtube-input-panel{animation:mu-fade-in .18s ease}.youtube-panel-label mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--mu-icon-video-color, #EF4444)}.youtube-input-row{align-items:stretch}.media-menu-backdrop{position:fixed;inset:0;z-index:100}.media-upload-status{animation:mu-fade-in .2s ease}.media-upload-status .status-icon{width:18px;height:18px;line-height:18px}.media-carousel-main{max-width:400px;height:var(--mu-carousel-height, 250px)}.carousel-viewer{inset:0}.carousel-viewer .carousel-image{object-fit:cover}.carousel-viewer .carousel-spinner{width:36px;height:36px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.carousel-nav{top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;box-shadow:0 2px 8px #0003;transition:background .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carousel-nav mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:#1e293b}.carousel-nav:hover:not(:disabled){background:#fff}.carousel-nav:disabled{opacity:.3;cursor:not-allowed}.carousel-nav--prev{left:12px}.carousel-nav--next{right:12px}.carousel-remove-btn{top:10px;right:10px;z-index:10;width:32px;height:32px;transition:background .2s ease}.carousel-remove-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.carousel-remove-btn:hover:not(:disabled){background:#dc2626d9}.carousel-remove-btn:disabled{opacity:.4;cursor:not-allowed}.carousel-dots{bottom:10px;left:50%;transform:translate(-50%);z-index:10}.carousel-dot{width:8px;height:8px;transition:background .2s ease,transform .2s ease}.carousel-dot.active{background:#fff;transform:scale(1.3)}.media-thumbnail-strip{max-width:400px;overflow-x:auto}.media-thumbnail-strip::-webkit-scrollbar{height:4px}.media-thumbnail-strip::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:2px}.media-thumb{flex-shrink:0;width:72px;height:52px;transition:border-color .2s ease,transform .15s ease}.media-thumb.active{border-color:var(--mu-thumb-active-border, var(--cc-sf-accent-color, #3B82F6));transform:scale(1.04)}.media-thumb:hover:not(.active){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.media-thumb .thumb-img{object-fit:cover}.media-thumb .thumb-yt-placeholder mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}.media-thumb .thumb-uploading .thumb-spinner{width:20px;height:20px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.media-library-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mu-fade-in .2s ease}.media-library-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:min(90vw,780px);max-height:85vh;box-shadow:var(--mu-modal-shadow, 0 20px 60px rgba(0, 0, 0, .2));animation:mu-modal-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes mu-modal-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.library-modal-header{flex-shrink:0}.library-modal-title{font-weight:700}.library-modal-subtitle{line-height:1.5;max-width:600px}.library-close-btn{width:32px;height:32px;transition:background .15s ease,color .15s ease}.library-close-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-close-btn:hover{background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-label-color, #374151)}.library-loading mat-icon,.library-empty mat-icon{font-size:40px;width:40px;height:40px;line-height:40px;opacity:.5}.lib-spinner{width:36px;height:36px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.library-error{flex-shrink:0}.library-error mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-grid{grid-template-columns:repeat(5,1fr);overflow-y:auto}.library-grid::-webkit-scrollbar{width:8px}.library-grid::-webkit-scrollbar-track{background:#f1f1f1}.library-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px;border:2px solid #F1F1F1}.library-grid-item{aspect-ratio:1/1;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.library-grid-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.library-grid-item.selected{border-color:var(--cc-sf-accent-color, #3B82F6)}.library-grid-item.selected .library-grid-img{opacity:.7}.library-grid-item:hover .library-overlay-hover{opacity:1}.library-grid-img{object-fit:cover}.library-overlay-hover{inset:0;opacity:0;transition:opacity .15s ease}.library-check{top:6px;right:6px;width:22px;height:22px;box-shadow:0 1px 4px #00000026}.library-check mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.library-modal-footer{flex-shrink:0}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary{background-color:var(--cc-sf-accent-color, #3B82F6)!important;border-color:var(--cc-sf-accent-color, #3B82F6)!important;color:#fff!important;font-weight:600;padding-left:32px;padding-right:32px}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:hover{background-color:var(--cc-sf-btn-primary-hover-bg, #2563EB)!important}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:disabled{background-color:#93c5fd!important;cursor:not-allowed}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline{font-weight:600;padding-left:24px;padding-right:24px;border-color:#d1d5db;color:#374151}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline:hover{background-color:#f9fafb}.location-subtitle{line-height:1.5}.loc-tab-btn ::ng-deep button{width:100%}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning){background-color:var(--cc-sf-input-bg, #ffffff)!important;color:var(--cc-sf-label-color, #000000)!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning):hover{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}.loc-venue-item{transition:box-shadow .15s ease,border-color .15s ease}.loc-venue-item:hover{box-shadow:0 2px 8px #0000000f;border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.loc-venue-search-icon{width:18px;height:18px;line-height:18px;flex-shrink:0}.loc-venue-text{white-space:nowrap;text-overflow:ellipsis}.loc-action-btn{transition:background .15s ease,color .15s ease;flex-shrink:0}.loc-action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.loc-action-btn.loc-delete-btn{color:var(--loc-delete-color, #E53E3E)}.loc-action-btn.loc-delete-btn:hover{background:var(--cc-sf-error-bg, #FEF2F2)}.loc-action-btn.loc-edit-btn{color:var(--cc-sf-hint-color, #9CA3AF)}.loc-action-btn.loc-edit-btn:hover{color:var(--cc-sf-input-focus-border, #3B82F6);background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)}.loc-search-icon{left:.75rem;width:1.1rem;height:1.1rem;line-height:1.1rem;z-index:1}.loc-suggestions-panel{top:calc(100% + 4px);left:0;right:0;z-index:300;box-shadow:0 8px 24px #0000001a;animation:mu-fade-in .15s ease;max-height:260px;overflow-y:auto}.loc-suggestion-item{transition:background .12s ease}.loc-suggestion-item:hover,.loc-suggestion-item:focus{background:var(--loc-suggestion-hover-bg, #F0F9FF)}.loc-suggestion-item:not(:last-child){border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)}.loc-suggestion-icon{width:18px;height:18px;line-height:18px;flex-shrink:0}.loc-suggestion-text{white-space:nowrap;text-overflow:ellipsis}.loc-add-btn{transition:opacity .15s ease}.loc-add-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.loc-add-btn:hover{opacity:.8}.loc-map-container{box-shadow:0 2px 10px #0000000f}.loc-tba-panel{min-height:120px}.loc-tba-icon{width:40px;height:40px;line-height:40px;opacity:.6}.loc-tba-text{line-height:1.6;max-width:360px}\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$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7.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: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }, { kind: "pipe", type: TrustedUrlPipe, name: "trustedUrl" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormFieldComponent, isStandalone: false, selector: "lib-form-field", inputs: { config: "config", controller: "controller", formGroup: "formGroup", allowMulti: "allowMulti" }, viewQueries: [{ propertyName: "mediaDeviceInput", first: true, predicate: ["mediaDeviceInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-field mb-16px\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\" *ngIf=\"child.isEnabled !== false\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\"\r\n    class=\"group-section-wrapper mb-20px\"\r\n    [class.multi-save-active]=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n\r\n    <!-- Multi-Save: header row with label + top-right Add button -->\r\n    <div class=\"multi-save-header d-flex justify-content-between align-items-center mb-24\"\r\n      *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n      <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n        class=\"btn-add-multi\">\r\n        {{ addMultiLabel }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- Standard heading (non-multiSave) -->\r\n    <h3 class=\"group-label\"\r\n      *ngIf=\"config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active\">{{\r\n      config.sectionConfig!.label }}</h3>\r\n\r\n    <!-- \u2500\u2500 Standard (non-multiSave) repeater: accordion instances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active\">\r\n      <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\"\r\n        class=\"group-accordion-instance\"\r\n        [class.is-expanded]=\"isGroupExpanded(i)\">\r\n\r\n        <!-- Accordion header -->\r\n        <div class=\"group-accordion-header\" (click)=\"toggleGroupAccordion(i)\"\r\n          role=\"button\" [attr.aria-expanded]=\"isGroupExpanded(i)\">\r\n          <div class=\"accordion-header-left d-flex align-items-center gap-10\">\r\n            <span class=\"instance-badge\">{{ i + 1 }}</span>\r\n            <span class=\"instance-title\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n          </div>\r\n          <div class=\"accordion-header-right d-flex align-items-center gap-6\">\r\n            <button type=\"button\" class=\"accordion-remove-btn\"\r\n              *ngIf=\"instanceList.length > 1\"\r\n              (click)=\"$event.stopPropagation(); removeGroupInstance(i)\"\r\n              aria-label=\"Remove\">\r\n              <mat-icon>delete_outline</mat-icon>\r\n            </button>\r\n            <mat-icon class=\"accordion-chevron\">\r\n              {{ isGroupExpanded(i) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n            </mat-icon>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Accordion body -->\r\n        <div class=\"group-accordion-body\" *ngIf=\"isGroupExpanded(i)\">\r\n          <div class=\"group-fields sf-grid\">\r\n            <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n              <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\"\r\n                *ngIf=\"field.isEnabled !== false\">\r\n                <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\"\r\n                  [allowMulti]=\"true\">\r\n                </lib-form-field>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Full-width dashed Add button -->\r\n      <button type=\"button\" class=\"btn-add-group\" (click)=\"addGroupInstance()\">\r\n        <mat-icon>add</mat-icon> {{ addLabel }} {{ config.sectionConfig!.label }}\r\n      </button>\r\n    </ng-container>\r\n\r\n    <!-- \u2500\u2500 MultiSave: card instances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\"\r\n        class=\"group-instance position-relative mb-16 overflow-hidden\"\r\n        [class.is-editing]=\"instance.isEditing\"\r\n        [class.is-card]=\"!instance.isEditing\">\r\n\r\n        <!-- Edit / new form view -->\r\n        <div [hidden]=\"!instance.isEditing\">\r\n          <div class=\"group-fields sf-grid p-24\">\r\n            <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n              <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\"\r\n                *ngIf=\"field.isEnabled !== false\">\r\n                <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\"\r\n                  [allowMulti]=\"true\">\r\n                </lib-form-field>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n\r\n          <!-- Save / Cancel -->\r\n          <div\r\n            class=\"group-footer d-flex justify-content-between align-items-center gap-16 mt-24 pt-20 bt-1px-solid-E5E7EB p-0-24\"\r\n            *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n            <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"multiSaveError\">{{ multiSaveError }}</span>\r\n            <div class=\"footer-actions d-flex gap-12\">\r\n              <lib-button [variant]=\"'outline'\" (click)=\"cancelGroupInstance(i)\">Cancel</lib-button>\r\n              <lib-button [variant]=\"'primary'\" (click)=\"saveGroupInstance(i)\">Save</lib-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Card view (saved state) -->\r\n        <ng-container *ngIf=\"!instance.isEditing\">\r\n          <div class=\"card-view d-flex justify-content-between align-items-center p-18px-24px\"\r\n            [class.is-expanded]=\"instance.isExpanded\">\r\n            <div class=\"card-content flex-1 d-flex flex-column gap-4 overflow-hidden\">\r\n              <span class=\"card-title font-weight-600 overflow-hidden fs-1rem c-111827\">{{\r\n                instance.fg.get(config.sectionConfig!.multiSaveConfig!.summaryField || '')?.value\r\n                || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"card-actions d-flex align-items-center gap-16 ml-20\">\r\n              <mat-icon class=\"icon-delete\" (click)=\"removeGroupInstance(i, true)\">delete_outline</mat-icon>\r\n              <mat-icon class=\"icon-edit\" (click)=\"editGroupInstance(i)\">edit_outline</mat-icon>\r\n              <mat-icon class=\"icon-expand\" (click)=\"toggleExpandGroupInstance(i)\">\r\n                {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n              </mat-icon>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\"\r\n    class=\"group-section-wrapper mb-20px\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper position-relative d-flex align-items-center\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\"\r\n        class=\"password-toggle position-absolute cursor-pointer d-flex align-items-center justify-content-center b-none border-none c-6B7280 p-0-25rem\"\r\n        (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix br-none\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix d-flex align-items-center font-weight-500\" *ngIf=\"config.suffix\">{{ config.suffix\r\n        }}</span>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint font-poppins font-weight-400 text-14 text-right c-6B7280\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix br-none\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min ?? null\" [max]=\"config.numberConfig?.max ?? null\"\r\n        [step]=\"config.numberConfig?.step || 1\" [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix d-flex align-items-center font-weight-500\" *ngIf=\"config.suffix\">{{ config.suffix\r\n        }}</span>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <input matInput [matDatepicker]=\"datePicker\" class=\"field-input date-input has-icon-right\"\r\n        [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\" [max]=\"config.dateConfig?.maxDate\"\r\n        [class.is-invalid]=\"errorMessage\" [placeholder]=\"config.placeholder || ''\" [readonly]=\"config.readonly\"\r\n        (click)=\"!config.readonly && datePicker.open()\">\r\n      <div class=\"date-icon-wrapper position-absolute d-flex align-items-center justify-content-center\"\r\n        *ngIf=\"!config.readonly\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n      </div>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Time Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTimeField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <input type=\"time\" class=\"field-input time-input\" [formControlName]=\"config.name!\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"!!config.readonly\">\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Autocomplete \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isAutocomplete\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Hidden real control (stores the code value) -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <div class=\"autocomplete-wrapper position-relative d-flex align-items-center w-100\"\r\n      [class.is-invalid]=\"errorMessage\" [class.readonly]=\"config.readonly\">\r\n      <!-- Search icon -->\r\n      <mat-icon class=\"ac-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">search</mat-icon>\r\n\r\n      <input class=\"field-input ac-input\" [formControl]=\"autocompleteInputCtrl\" [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"config.placeholder || 'Search\u2026'\" [readonly]=\"!!config.readonly\" [class.is-invalid]=\"errorMessage\"\r\n        (blur)=\"onAutocompleteClear()\" autocomplete=\"off\">\r\n\r\n      <!-- Clear button -->\r\n      <button type=\"button\"\r\n        class=\"ac-clear-btn position-absolute d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none c-9CA3AF p-0-2rem\"\r\n        *ngIf=\"autocompleteInputCtrl.value && !config.readonly\"\r\n        (click)=\"autocompleteInputCtrl.setValue(''); updateValue(null)\" tabindex=\"-1\" aria-label=\"Clear\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [panelWidth]=\"'auto'\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.label\"\r\n          (onSelectionChange)=\"onAutocompleteSelected(option)\">\r\n          <span class=\"ac-option-label\">{{ option.label }}</span>\r\n\r\n          <!-- Dynamic display fields (image / email / phone / text) -->\r\n          <div class=\"ac-display-fields d-flex flex-wrap gap-6 mt-2\" *ngIf=\"option['displayMeta']?.length\">\r\n            <ng-container *ngFor=\"let field of option['displayMeta']\">\r\n\r\n              <!-- Image avatar -->\r\n              <span *ngIf=\"field.type === 'image' && field.value\" class=\"ac-df-item ac-df-image\">\r\n                <img [src]=\"field.value\" [alt]=\"field.label || 'image'\" class=\"ac-df-avatar\">\r\n              </span>\r\n\r\n              <!-- Email -->\r\n              <span *ngIf=\"field.type === 'email' && field.value\" class=\"ac-df-item ac-df-chip\">\r\n                <mat-icon class=\"ac-df-icon\">mail_outline</mat-icon>\r\n                <span *ngIf=\"field.label\" class=\"ac-df-label\">{{ field.label }}</span>\r\n                {{ field.value }}\r\n              </span>\r\n\r\n              <!-- Phone -->\r\n              <span *ngIf=\"field.type === 'phone' && field.value\" class=\"ac-df-item ac-df-chip\" [class]=\"field.className\">\r\n                <mat-icon class=\"ac-df-icon\">phone</mat-icon>\r\n                <span *ngIf=\"field.label\" class=\"ac-df-label\">{{ field.label }}</span>\r\n                {{ field.value }}\r\n              </span>\r\n\r\n              <!-- Custom / Icon-based / Generic Text -->\r\n              <span *ngIf=\"field.type !== 'image' && field.type !== 'email' && field.type !== 'phone' && field.value\" \r\n                class=\"ac-df-item\" [class.ac-df-chip]=\"!!field.icon\" [class]=\"field.className\">\r\n                <mat-icon class=\"ac-df-icon\" *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                <span *ngIf=\"field.label\" class=\"ac-df-label\">{{ field.label }}</span>\r\n                {{ field.value }}\r\n              </span>\r\n\r\n            </ng-container>\r\n          </div>\r\n        </mat-option>\r\n        <mat-option *ngIf=\"filteredOptions.length === 0\" disabled class=\"ac-no-results fs-0-8125rem c-6B7280\">\r\n          No results found\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\"\r\n        [class.card-item]=\"config.subType === 'CARD'\"\r\n        [class.selected]=\"formGroup.get(config.name!)?.value === option.code\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <div class=\"option-content d-flex flex-column gap-4 flex-1 text-left\">\r\n          <span class=\"label-text text-16 c-1F2937\">{{ option.label }}</span>\r\n          <span class=\"option-hint text-13 color-gray\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\"\r\n      class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST' || config.subType === 'CARD'\" class=\"checkbox-group d-flex flex-column gap-8\"\r\n      [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\"\r\n        class=\"checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827\"\r\n        [class.card-item]=\"config.subType === 'CARD'\" [class.selected]=\"isChecked(option.code)\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <div class=\"option-content d-flex flex-column gap-4 flex-1 text-left\">\r\n          <span class=\"label-text text-16 c-1F2937\">{{ option.label }}</span>\r\n          <span class=\"option-hint text-13 color-gray\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group d-flex flex-wrap gap-8\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\"\r\n        class=\"chip-label cursor-pointer p-6px-14px b-ffffff c-374151 b-1px-solid-D1D5DB br-20px fs-0-875rem\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" hidden>\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container d-flex justify-content-between align-items-center cursor-pointer\">\r\n      <span class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">{{ config.label }}</span>\r\n      <div class=\"switch position-relative\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider position-absolute cursor-pointer\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rich Text \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRichText\" class=\"field-wrapper component-rich-text d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rich-text-container\" [class.is-invalid]=\"errorMessage\">\r\n      <quill-editor [formControlName]=\"config.name!\" class=\"rich-text-editor d-block w-100\"\r\n        [placeholder]=\"config.richTextConfig?.placeholder || config.placeholder || ''\"\r\n        [styles]=\"{height: config.richTextConfig?.height || '200px'}\">\r\n      </quill-editor>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint font-poppins font-weight-400 text-14 text-right c-6B7280\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group d-flex gap-4\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star d-inline-flex align-items-center cursor-pointer\"\r\n        [class.filled]=\"isStarFilled(star)\" [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper d-flex flex-column gap-6\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">{{ config.label\r\n      }}</label>\r\n    <div class=\"generated-value fs-0-875rem p-0-625rem-0-875rem b-F3F4F6 b-1px-solid-E5E7EB br-8px c-6B7280\">{{ value ||\r\n      '-' }}</div>\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div\r\n      class=\"upload-drop-zone d-flex flex-column align-items-center justify-content-center gap-8 cursor-pointer text-center p-32px-24px us-none\"\r\n      [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\" [class.is-invalid]=\"errorMessage\"\r\n      (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onFileDrop($event)\"\r\n      (click)=\"fileInput.click()\">\r\n\r\n      <!-- Icon with accent-colour pill background -->\r\n      <div class=\"upload-icon-wrap mb-4\">\r\n        <div class=\"dropzone-icon-pill d-flex align-items-center justify-content-center\">\r\n          <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text font-weight-600 m-0 fs-0-9rem\">Drag &amp; drop files here</p>\r\n      <p class=\"upload-sub-text m-0 fs-0-8rem c-64748B\">or <span class=\"upload-link\">Browse files</span></p>\r\n      <p class=\"upload-hint-text m-0 fs-0-78rem c-64748B\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported: <span class=\"upload-formats font-weight-500\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text m-0 fs-0-78rem c-64748B\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n      <span class=\"upload-size-badge fs-0-72rem\" *ngIf=\"config.attachmentConfig?.maxSizeMB\">\r\n        Max {{ config.attachmentConfig!.maxSizeMB }}MB\r\n      </span>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" hidden [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list d-flex flex-column gap-8 mt-10\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\"\r\n        class=\"uploaded-item d-flex align-items-center gap-10 p-10px-14px br-8px\"\r\n        [class.uploading]=\"f.isUploading\">\r\n\r\n        <!-- Uploading spinner -->\r\n        <ng-container *ngIf=\"f.isUploading; else fileReady\">\r\n          <div class=\"upload-spinner rounded-50 b-2px-solid-E2E8F0\"></div>\r\n          <div class=\"file-info flex-1 d-flex flex-column\">\r\n            <span class=\"file-name font-weight-500 overflow-hidden fs-0-85rem\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size uploading-label fs-0-72rem\">Uploading...</span>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- Normal state once upload is done -->\r\n        <ng-template #fileReady>\r\n          <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n          <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb rounded-4\"\r\n            alt=\"preview\">\r\n          <div class=\"file-info flex-1 d-flex flex-column\">\r\n            <span class=\"file-name font-weight-500 overflow-hidden fs-0-85rem\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size fs-0-72rem\">{{ formatFileSize(f.size) }}</span>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Compact icon-only remove button -->\r\n        <button type=\"button\" class=\"file-remove-btn d-flex align-items-center justify-content-center rounded-50\"\r\n          [disabled]=\"f.isUploading\" (click)=\"!f.isUploading && removeUploadedFile(i)\"\r\n          aria-label=\"Remove file\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Media Upload (Type 2) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isMediaUpload\" class=\"field-wrapper media-upload-wrapper d-flex flex-column gap-6 p-0 border-none b-none\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <!-- Hidden file input lives outside *ngIf \u2014 triggered via ViewChild -->\r\n    <input #mediaDeviceInput type=\"file\" hidden multiple accept=\"image/*\" (change)=\"onMediaFileSelected($event)\">\r\n\r\n    <!-- Two-column layout -->\r\n    <div class=\"mu-layout d-grid align-items-start\">\r\n\r\n      <!-- \u2500\u2500 LEFT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-left d-flex flex-column gap-20\">\r\n\r\n        <!-- Header: title + max-items badge -->\r\n        <div class=\"mu-header d-flex align-items-start flex-wrap gap-10\">\r\n          <h3 class=\"mu-title m-0 c-111827 fs-1-35rem\">\r\n            {{ config.label }}\r\n            <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n          </h3>\r\n          <span\r\n            class=\"mu-badge d-inline-flex align-items-center rounded-20 color-white font-weight-600 fs-0-72rem p-4px-12px b-111827\"\r\n            *ngIf=\"config.attachmentConfig?.maxFiles\">\r\n            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}\r\n            {{ config.attachmentConfig?.maxFiles }}\r\n            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Description -->\r\n        <p class=\"mu-description m-0 fs-0-875rem c-6B7280\" *ngIf=\"config.attachmentConfig?.description\">\r\n          {{ config.attachmentConfig?.description }}\r\n        </p>\r\n        <p class=\"mu-description m-0 fs-0-875rem c-6B7280\"\r\n          *ngIf=\"!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']\">\r\n          {{ controller.labels['LBL_MEDIA_DESC'] }}\r\n        </p>\r\n\r\n        <!-- Feature bullet list -->\r\n        <ul class=\"mu-features m-0 p-0 d-flex flex-column gap-8 ls-none\"\r\n          *ngIf=\"config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']\">\r\n          <ng-container *ngIf=\"config.attachmentConfig?.features?.length\">\r\n            <li *ngFor=\"let f of config.attachmentConfig?.features\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ f }}\r\n            </li>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!config.attachmentConfig?.features?.length\">\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_1']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_2']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_3']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n\r\n        <!-- Backdrop to close dropdown on outside click -->\r\n        <div class=\"media-menu-backdrop\" *ngIf=\"showMediaMenu\"\r\n          (click)=\"$event.stopPropagation(); showMediaMenu = false\"></div>\r\n\r\n        <!-- Add Media button + dropdown -->\r\n        <div class=\"media-add-container position-relative\" (click)=\"showMediaMenu = !showMediaMenu\">\r\n          <lib-button id=\"btn-add-media-{{ config.name }}\" [variant]=\"'warning'\"\r\n            [icon]=\"{type: 'material', value: 'add_photo_alternate'}\">\r\n            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}\r\n            <mat-icon class=\"menu-chevron fs-18px\">add</mat-icon>\r\n          </lib-button>\r\n\r\n          <div class=\"media-dropdown position-absolute rounded-12 overflow-hidden b-ffffff b-1px-solid-E5E7EB\"\r\n            *ngIf=\"showMediaMenu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n            <!-- Video -->\r\n            <button id=\"btn-media-video-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuVideo(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--video d-flex align-items-center justify-content-center rounded-8\"><mat-icon>videocam</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add\r\n                  YouTube URL'\r\n                  }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Device -->\r\n            <button id=\"btn-media-device-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuDevice(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--device d-flex align-items-center justify-content-center rounded-8\"><mat-icon>upload</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] ||\r\n                  'Select images from your\r\n                  computer' }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Library -->\r\n            <button id=\"btn-media-library-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuLibrary(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--library d-flex align-items-center justify-content-center rounded-8\"><mat-icon>photo_library</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] ||\r\n                  'Choose from default\r\n                  images' }}</span>\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- YouTube URL Input (inline below button) -->\r\n        <div class=\"youtube-input-panel d-flex flex-column gap-8 p-16 rounded-10 b-FFFAF1 b-1px-solid-E5E7EB\"\r\n          *ngIf=\"showYoutubeInput\">\r\n          <label class=\"youtube-panel-label d-flex align-items-center gap-6 font-weight-600 fs-0-875rem c-111827\">\r\n            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}\r\n          </label>\r\n          <div class=\"youtube-input-row d-flex gap-8\">\r\n            <input id=\"input-youtube-url-{{ config.name }}\" type=\"url\" class=\"field-input youtube-url-input\"\r\n              [(ngModel)]=\"youtubeUrlInput\" [ngModelOptions]=\"{standalone: true}\"\r\n              [placeholder]=\"controller.labels['PH_YOUTUBE_URL'] || 'Video URL'\" (keyup.enter)=\"addYoutubeMedia()\">\r\n            <lib-button id=\"btn-add-youtube-{{ config.name }}\" [variant]=\"'secondary'\" (click)=\"addYoutubeMedia()\">\r\n              {{ controller.labels['LBL_ADD'] || 'Add' }}\r\n            </lib-button>\r\n          </div>\r\n          <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"youtubeUrlError\">{{ youtubeUrlError }}</span>\r\n        </div>\r\n\r\n        <div\r\n          class=\"media-upload-status d-flex align-items-center gap-8 mt-4 color-error rounded-8 font-weight-500 p-10px-14px b-FEF2F2 fs-0-85rem\"\r\n          *ngIf=\"mediaUploadError\">\r\n          <mat-icon class=\"status-icon fs-18px\">error_outline</mat-icon>\r\n          <span>{{ mediaUploadError }}</span>\r\n        </div>\r\n\r\n        <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n        <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n      </div>\r\n      <!-- end left panel -->\r\n\r\n      <!-- \u2500\u2500 RIGHT PANEL (carousel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-right d-flex flex-column gap-12\">\r\n\r\n        <!-- Carousel (when items exist) -->\r\n        <div class=\"media-carousel-section d-flex flex-column gap-12\" *ngIf=\"mediaItems.length\">\r\n          <div\r\n            class=\"media-carousel-main position-relative w-100 overflow-hidden d-flex align-items-center justify-content-center br-12px b-0F172A\">\r\n            <button id=\"btn-carousel-prev-{{ config.name }}\" type=\"button\"\r\n              class=\"carousel-nav carousel-nav--prev position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85\"\r\n              (click)=\"mediaCarouselPrev()\" [disabled]=\"mediaCarouselIndex === 0\" aria-label=\"Previous\">\r\n              <mat-icon>chevron_left</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-viewer position-absolute d-flex align-items-center justify-content-center\"\r\n              *ngFor=\"let item of mediaItems; let i = index\" [hidden]=\"i !== mediaCarouselIndex\">\r\n              <div *ngIf=\"item.isUploading\"\r\n                class=\"carousel-uploading d-flex flex-column align-items-center gap-12 c-94A3B8 fs-0-85rem\">\r\n                <div class=\"carousel-spinner rounded-50 b-3px-solid-rgba-255-255-255-0-15\"></div>\r\n                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading\u2026' }}</span>\r\n              </div>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'youtube'\">\r\n                <iframe class=\"carousel-iframe w-100 h-100 br-12px\" [src]=\"item.url | trustedUrl\" frameborder=\"0\"\r\n                  allowfullscreen\r\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\">\r\n                </iframe>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'image'\">\r\n                <img class=\"carousel-image w-100 h-100 br-12px\" [src]=\"item.url\" alt=\"Media\">\r\n              </ng-container>\r\n              <button id=\"btn-remove-media-{{ config.name }}-{{ i }}\" type=\"button\"\r\n                class=\"carousel-remove-btn position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-0-0-0-0-55\"\r\n                [disabled]=\"item.isUploading\" (click)=\"removeMediaItem(i)\" aria-label=\"Remove\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <button id=\"btn-carousel-next-{{ config.name }}\" type=\"button\"\r\n              class=\"carousel-nav carousel-nav--next position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85\"\r\n              (click)=\"mediaCarouselNext()\" [disabled]=\"mediaCarouselIndex === mediaItems.length - 1\" aria-label=\"Next\">\r\n              <mat-icon>chevron_right</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-dots position-absolute d-flex gap-6\">\r\n              <span *ngFor=\"let item of mediaItems; let i = index\"\r\n                class=\"carousel-dot rounded-50 cursor-pointer b-rgba-255-255-255-0-45\"\r\n                [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\"></span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Thumbnail strip -->\r\n          <div class=\"media-thumbnail-strip d-flex flex-wrap gap-8 pb-4px\">\r\n            <div *ngFor=\"let item of mediaThumbnails; let i = index\"\r\n              class=\"media-thumb rounded-8 overflow-hidden cursor-pointer d-flex align-items-center justify-content-center b-2px-solid-transparent b-E2E8F0\"\r\n              [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\">\r\n              <div *ngIf=\"item.isUploading\"\r\n                class=\"thumb-uploading d-flex align-items-center justify-content-center w-100 h-100\">\r\n                <div class=\"thumb-spinner rounded-50 b-2px-solid-E2E8F0\"></div>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl\"\r\n                [src]=\"item.thumbnailUrl\" class=\"thumb-img w-100 h-100\" alt=\"Video thumbnail\">\r\n              <div *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl\"\r\n                class=\"thumb-yt-placeholder d-flex align-items-center justify-content-center w-100 h-100 b-1E293B c-EF4444\">\r\n                <mat-icon>play_circle</mat-icon>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'image' && item.url\" [src]=\"item.url\"\r\n                class=\"thumb-img w-100 h-100\" alt=\"Image thumbnail\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Empty right-side placeholder -->\r\n        <div\r\n          class=\"mu-right-empty d-flex flex-column align-items-center justify-content-center gap-10 h-100 text-center p-24 br-12px b-FFFAF1 c-94A3B8 b-2px-dashed-CBD5E1\"\r\n          *ngIf=\"!mediaItems.length\" (click)=\"onMediaMenuDevice()\">\r\n          <mat-icon class=\"mu-right-empty-icon fs-52px\">perm_media</mat-icon>\r\n          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- end right panel -->\r\n\r\n    </div><!-- end mu-layout -->\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Library Image Picker Modal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div class=\"media-library-overlay b-rgba-0-0-0-0-5\" *ngIf=\"showLibraryModal\" (click)=\"closeLibraryModal()\"></div>\r\n  <div class=\"media-library-modal d-flex flex-column overflow-hidden b-ffffff br-16px\" *ngIf=\"showLibraryModal\"\r\n    role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"library-modal-header d-flex align-items-start justify-content-between p-24px-28px bb-1px-solid-E5E7EB\">\r\n      <div class=\"header-left d-flex flex-column gap-8\">\r\n        <h3 class=\"library-modal-title m-0 color-dark fs-1-25rem\">\r\n          {{ controller.labels['LBL_ADD_IMAGES'] || 'Add Images' }}\r\n        </h3>\r\n        <p class=\"library-modal-subtitle m-0 color-gray fs-0-85rem\">\r\n          {{ controller.labels['LBL_LIBRARY_MODAL_DESC'] || 'Upload media to make your opportunity stand out. Plus, take\r\n          full control of your sequence - drag images to reorder as you desire.' }}\r\n        </p>\r\n      </div>\r\n      <button id=\"btn-close-library-{{ config.name }}\" type=\"button\"\r\n        class=\"library-close-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 border-none b-none c-9CA3AF\"\r\n        (click)=\"closeLibraryModal()\" aria-label=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Loading -->\r\n    <div class=\"library-loading\" *ngIf=\"libraryLoading\">\r\n      <div class=\"lib-spinner rounded-50 b-3px-solid-E2E8F0\"></div>\r\n      <span>{{ controller.labels['LBL_LOADING'] || 'Loading\u2026' }}</span>\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div class=\"library-error d-flex align-items-center gap-8 color-error b-FEF2F2 fs-0-875rem p-16px-24px\"\r\n      *ngIf=\"libraryError && !libraryLoading\">\r\n      <mat-icon>error_outline</mat-icon>\r\n      {{ libraryError }}\r\n    </div>\r\n\r\n    <!-- Image grid -->\r\n    <div class=\"library-grid d-grid gap-16 flex-1 p-28px b-F9FAFB\" *ngIf=\"!libraryLoading && libraryImages.length\">\r\n      <div *ngFor=\"let img of libraryImages; let li = index\" id=\"lib-img-{{ config.name }}-{{ li }}\"\r\n        class=\"library-grid-item position-relative rounded-12 overflow-hidden cursor-pointer bg-white b-3px-solid-transparent\"\r\n        [class.selected]=\"isLibraryItemSelected(img)\" (click)=\"toggleLibraryItem(img)\">\r\n        <img [src]=\"getLibraryItemUrl(img)\" class=\"library-grid-img w-100 h-100 d-block\" alt=\"Library image\">\r\n        <div\r\n          class=\"library-check position-absolute bg-white rounded-50 d-flex align-items-center justify-content-center c-3B82F6\"\r\n          *ngIf=\"isLibraryItemSelected(img)\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        <div class=\"library-overlay-hover position-absolute b-rgba-59-130-246-0-12\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Empty library -->\r\n    <div\r\n      class=\"library-empty d-flex flex-column align-items-center justify-content-center gap-12 flex-1 c-9CA3AF fs-0-875rem p-48px-24px\"\r\n      *ngIf=\"!libraryLoading && !libraryError && libraryImages.length === 0\">\r\n      <mat-icon>image_not_supported</mat-icon>\r\n      <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"library-modal-footer d-flex align-items-center justify-content-end bg-white p-20px-28px bt-1px-solid-E5E7EB\">\r\n      <div class=\"library-footer-actions d-flex gap-12 gap-10\">\r\n        <lib-button id=\"btn-library-cancel-{{ config.name }}\" [variant]=\"'outline'\" (click)=\"closeLibraryModal()\">\r\n          {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}\r\n        </lib-button>\r\n        <lib-button id=\"btn-library-confirm-{{ config.name }}\" [variant]=\"'primary'\"\r\n          [disabled]=\"librarySelectedIds.size === 0\" (click)=\"confirmLibrarySelection()\">\r\n          {{ controller.labels['LBL_CONTINUE'] || 'Continue' }}\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Location Field \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isLocation\" class=\"field-wrapper location-field-wrapper d-flex flex-column gap-6 gap-12\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <!-- Field label -->\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n    <p class=\"location-subtitle m-0 c-6B7280 fs-0-8125rem\" *ngIf=\"config.hint\">{{ config.hint }}</p>\r\n\r\n    <!-- Three-tab bar -->\r\n    <div class=\"location-tabs d-flex gap-12 mb-24\">\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'VENUE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('VENUE')\">\r\n        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'ONLINE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('ONLINE')\">\r\n        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'TBA' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('TBA')\">\r\n        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- VENUE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'VENUE'\" class=\"loc-panel loc-venue-panel d-flex flex-column gap-12\">\r\n\r\n      <p class=\"loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem\">\r\n        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}\r\n      </p>\r\n\r\n      <!-- Added venue rows -->\r\n      <div class=\"loc-venue-list d-flex flex-column gap-8\" *ngIf=\"locationVenues.length > 0\">\r\n        <div *ngFor=\"let venue of locationVenues; let i = index\"\r\n          class=\"loc-venue-item d-flex align-items-center gap-10 p-10px-14px br-7px b-ffffff b-1px-solid-D1D5DB\">\r\n          <mat-icon class=\"loc-venue-search-icon fs-18px c-9CA3AF\">search</mat-icon>\r\n          <span class=\"loc-venue-text flex-1 overflow-hidden fs-0-875rem c-111827\">{{ venue.address || venue.name ||\r\n            venue.description }}</span>\r\n          <button type=\"button\"\r\n            class=\"loc-action-btn loc-delete-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none p-4px\"\r\n            (click)=\"removeLocationVenue(i)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Location count badge -->\r\n      <p class=\"loc-count-text m-0 font-weight-600 fs-0-8125rem c-3B82F6\"\r\n        *ngIf=\"locationVenues.length > 0 && config.locationConfig?.allowMulti\">\r\n        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}\r\n      </p>\r\n\r\n      <!-- Search input (hide when max reached) -->\r\n      <div class=\"loc-search-container position-relative\" *ngIf=\"!locationMaxReached\">\r\n        <div class=\"loc-search-wrapper position-relative d-flex align-items-center mt-4\">\r\n          <mat-icon class=\"loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">search</mat-icon>\r\n          <input\r\n            class=\"field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem\"\r\n            [placeholder]=\"config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')\"\r\n            [value]=\"locationSearchText\" (input)=\"handleLocationSearchInput($event)\" (blur)=\"hideLocationSuggestions()\"\r\n            autocomplete=\"off\" [class.is-invalid]=\"errorMessage\">\r\n        </div>\r\n        <!-- Suggestions dropdown -->\r\n        <div class=\"loc-suggestions-panel position-absolute overflow-hidden br-8px b-ffffff b-1px-solid-D1D5DB\"\r\n          *ngIf=\"locationShowSuggestions && locationSuggestions.length\">\r\n          <div *ngFor=\"let sug of locationSuggestions\"\r\n            class=\"loc-suggestion-item d-flex align-items-center gap-10 cursor-pointer p-10px-14px\"\r\n            (mousedown)=\"onLocationSuggestionSelect(sug)\">\r\n            <mat-icon class=\"loc-suggestion-icon fs-18px c-E53E3E\">place</mat-icon>\r\n            <span class=\"loc-suggestion-text overflow-hidden fs-0-875rem c-374151\">{{ sug.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Add another button -->\r\n      <button type=\"button\"\r\n        class=\"loc-add-btn d-inline-flex align-items-center gap-6 cursor-pointer font-weight-600 p-0 b-none border-none fs-0-875rem c-1A56DB\"\r\n        *ngIf=\"locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti\">\r\n        <mat-icon>add_circle_outline</mat-icon>\r\n        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>\r\n      </button>\r\n\r\n      <!-- Map -->\r\n      <div class=\"loc-map-container overflow-hidden br-10px b-1px-solid-E5E7EB\"\r\n        *ngIf=\"config.locationConfig?.showMap !== false\">\r\n        <ng-container *ngIf=\"config.locationConfig?.googleMapsApiKey; else simpleEmbed\">\r\n          <div [id]=\"'loc-map-' + config.name\" class=\"loc-map-frame w-100 d-block border-none\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\"></div>\r\n        </ng-container>\r\n        <ng-template #simpleEmbed>\r\n          <iframe class=\"loc-map-frame w-100 d-block border-none\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\" [src]=\"getLocationMapEmbedUrl() | trustedUrl\"\r\n            frameborder=\"0\" allowfullscreen loading=\"lazy\">\r\n          </iframe>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- Map hint -->\r\n      <p class=\"loc-map-hint m-0 text-center fs-0-78rem c-6B7280\">\r\n        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}\r\n      </p>\r\n    </div>\r\n\r\n    <!-- ONLINE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'ONLINE'\" class=\"loc-panel loc-online-panel d-flex flex-column gap-12\">\r\n      <p class=\"loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem\">\r\n        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}\r\n      </p>\r\n      <div class=\"loc-search-wrapper position-relative d-flex align-items-center mt-4\">\r\n        <mat-icon class=\"loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">link</mat-icon>\r\n        <input\r\n          class=\"field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem\"\r\n          type=\"url\"\r\n          [placeholder]=\"config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')\"\r\n          [value]=\"locationOnlineUrl\" (input)=\"onLocationUrlChange($any($event.target).value)\"\r\n          [class.is-invalid]=\"errorMessage\">\r\n      </div>\r\n    </div>\r\n\r\n    <!-- TBA TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'TBA'\"\r\n      class=\"loc-panel loc-tba-panel d-flex flex-column gap-12 justify-content-center\">\r\n      <div\r\n        class=\"loc-tba-content d-flex flex-column align-items-center justify-content-center text-center gap-12 p-32px-24px b-F9FAFB b-1px-dashed-D1D5DB br-10px\">\r\n        <mat-icon class=\"loc-tba-icon fs-40px c-9CA3AF\">schedule</mat-icon>\r\n        <p class=\"loc-tba-text m-0 c-6B7280 fs-0-9rem\">\r\n          {{ controller.labels['LBL_LOC_TBA_DESC'] || \"This event's location is yet to be announced. Check back later\r\n          for updates.\" }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Hidden real form control -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n</div>", styles: [".d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-block{display:block}.d-none{display:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.grid-cols-12{grid-template-columns:repeat(12,1fr)}.w-100{width:100%}.h-100{height:100%}.position-relative{position:relative}.position-absolute{position:absolute}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-poppins{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)}.font-weight-400{font-weight:400}.font-weight-500{font-weight:500}.font-weight-600{font-weight:600}.text-13{font-size:13px}.text-14{font-size:14px}.text-16{font-size:16px}.color-white{color:#fff}.color-dark{color:#111827}.color-gray{color:#6b7280}.color-error{color:var(--cc-sf-error-text-color, #DC2626)}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.m-0{margin:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.ml-16{margin-left:16px}.ml-20{margin-left:20px}.p-0{padding:0}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.pt-20{padding-top:20px}.pb-10{padding-bottom:10px}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.rounded-4{border-radius:4px}.rounded-6{border-radius:6px}.rounded-8{border-radius:8px}.rounded-10{border-radius:10px}.rounded-12{border-radius:12px}.rounded-20{border-radius:20px}.rounded-24{border-radius:24px}.rounded-50{border-radius:50%}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.resize-vertical{resize:vertical}.box-sizing-border{box-sizing:border-box}.border-none{border:none!important}.mb-16px{margin-bottom:var(--cc-sf-grid-gap, 16px)!important}.c-DC2626{color:var(--cc-sf-label-required-color, #DC2626)!important}.ml-0-125rem{margin-left:.125rem!important}.fs-0-875rem{font-size:.875rem!important}.c-111827{color:var(--cc-sf-label-color, #111827)!important}.br-7px{border-radius:var(--cc-sf-input-radius, 7px)!important}.c-6B7280{color:var(--cc-sf-hint-color, #6B7280)!important}.fs-0-75rem{font-size:var(--cc-sf-error-text-size, .75rem)!important}.b-none{background:none!important}.p-32px-24px{padding:32px 24px!important}.us-none{-webkit-user-select:none!important;user-select:none!important}.c-1E293B{color:var(--cc-sf-label-color, #1E293B)!important}.c-3B82F6{color:var(--cc-sf-chip-selected-bg, #3B82F6)!important}.fs-0-78rem{font-size:.78rem!important}.p-10px-14px{padding:10px 14px!important}.fs-0-85rem{font-size:.85rem!important}.fs-0-72rem{font-size:.72rem!important}.c-94A3B8{color:#94a3b8!important}.p-4px{padding:4px!important}.br-8px{border-radius:var(--cc-sf-input-radius, 8px)!important}.bc-F3F4F6{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}.br-none{border-right:none!important}.bl-none{border-left:none!important}.pe-none{pointer-events:none!important}.fs-1-1rem{font-size:1.1rem!important}.c-9CA3AF{color:var(--cc-sf-hint-color, #9CA3AF)!important}.pl-2-4rem{padding-left:2.4rem!important}.fs-0-8125rem{font-size:.8125rem!important}.ls-none{list-style:none!important}.br-12px{border-radius:var(--mu-carousel-radius, 12px)!important}.b-FFFAF1{background:var(--cc-sf-dropzone-bg, #FFFAF1)!important}.fs-18px{font-size:18px!important}.b-FEF2F2{background:var(--cc-sf-error-bg, #FEF2F2)!important}.bc-DC2626{border-color:var(--cc-sf-error-border, #DC2626)!important}.c-202124{color:var(--cc-sf-label-color, #202124)!important}.fs-18px{font-size:var(--cc-sf-label-size, 18px)!important}.mb-0-5rem{margin-bottom:.5rem!important}.pt-0-625rem{padding-top:var(--cc-sf-input-padding-y, .625rem)!important}.pb-0-625rem{padding-bottom:var(--cc-sf-input-padding-y, .625rem)!important}.pl-16px{padding-left:var(--cc-sf-input-padding-x, 16px)!important}.pr-16px{padding-right:var(--cc-sf-input-padding-x, 16px)!important}.bc-ffffff{background-color:var(--cc-sf-section-bg, #ffffff)!important}.b-1px-solid-D1D5DB{border:1px solid var(--cc-sf-input-border, #D1D5DB)!important}.fs-0-75rem{font-size:.75rem!important}.c-1F2937{color:var(--cc-sf-section-label-color, #1F2937)!important}.p-6px-14px{padding:var(--cc-sf-chip-padding, 6px 14px)!important}.b-ffffff{background:var(--loc-suggestion-bg, #ffffff)!important}.c-374151{color:var(--cc-sf-label-color, #374151)!important}.br-20px{border-radius:var(--cc-sf-chip-radius, 20px)!important}.fs-0-875rem{font-size:var(--cc-sf-btn-font-size, .875rem)!important}.bc-D1D5DB{background-color:var(--cc-sf-switch-track-off, #D1D5DB)!important}.pr-2-75rem{padding-right:2.75rem!important}.p-0-25rem{padding:.25rem!important}.p-0-625rem-0-875rem{padding:var(--cc-sf-generated-padding, .625rem .875rem)!important}.b-F3F4F6{background:var(--cc-sf-generated-bg, #F3F4F6)!important}.b-1px-solid-E5E7EB{border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important}.br-8px{border-radius:var(--cc-sf-uploaded-item-radius, 8px)!important}.c-6B7280{color:var(--ms-desc-color, #6B7280)!important}.mb-20px{margin-bottom:var(--cc-sf-section-gap, 20px)!important}.br-10px{border-radius:var(--cc-sf-input-radius, 10px)!important}.p-20px{padding:var(--cc-sf-section-padding, 20px)!important}.fs-1rem{font-size:1rem!important}.m-0-0-16px-0{margin:0 0 16px!important}.bb-2px-solid-E5E7EB{border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)!important}.p-16px{padding:var(--cc-sf-instance-padding, 16px)!important}.b-F9FAFB{background:var(--loc-tba-bg, #F9FAFB)!important}.bb-1px-dashed-D1D5DB{border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)!important}.c-4B5563{color:var(--cc-sf-instance-num-color, #4B5563)!important}.fs-0-8125rem{font-size:var(--cc-sf-hint-size, .8125rem)!important}.pb-0{padding-bottom:0!important}.p-18px-24px{padding:18px 24px!important}.c-111827{color:var(--ms-title-color, #111827)!important}.bt-1px-solid-E5E7EB{border-top:1px solid #E5E7EB!important}.p-4px-10px{padding:4px 10px!important}.b-FFF5F5{background:var(--cc-sf-btn-remove-bg, #FFF5F5)!important}.c-E53E3E{color:var(--loc-delete-color, #E53E3E)!important}.b-1px-solid-FED7D7{border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7)!important}.br-4px{border-radius:var(--cc-sf-btn-remove-radius, 4px)!important}.p-8px-16px{padding:8px 16px!important}.b-transparent{background:var(--cc-sf-btn-add-bg, transparent)!important}.c-3B82F6{color:var(--cc-sf-input-focus-border, #3B82F6)!important}.b-1px-dashed-CBD5E1{border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1)!important}.br-6px{border-radius:var(--cc-sf-btn-add-radius, 6px)!important}.b-1-5px-dashed-CBD5E1{border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1)!important}.br-12px{border-radius:var(--cc-sf-dropzone-radius, 12px)!important}.bc-FFFAF1{background-color:var(--cc-sf-dropzone-bg, #FFFAF1)!important}.c-94A3B8{color:var(--cc-sf-uploaded-remove-color, #94A3B8)!important}.fs-0-9rem{font-size:var(--cc-sf-input-font-size, .9rem)!important}.c-64748B{color:var(--cc-sf-dropzone-hint-color, #64748B)!important}.b-1px-solid-E2E8F0{border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0)!important}.b-2px-solid-E2E8F0{border:2px solid #E2E8F0!important}.pr-3-5rem{padding-right:3.5rem!important}.p-0-0-875rem{padding:0 .875rem!important}.bc-FFFFFF{background-color:var(--cc-sf-input-bg, #FFFFFF)!important}.b-1-5px-solid-D1D5DB{border:var(--cc-sf-input-border, 1.5px solid #D1D5DB)!important}.mb-0-75rem{margin-bottom:.75rem!important}.mt-6px{margin-top:6px!important}.pr-2-4rem{padding-right:2.4rem!important}.p-0-2rem{padding:.2rem!important}.fs-1-35rem{font-size:1.35rem!important}.p-4px-12px{padding:4px 12px!important}.b-111827{background:var(--cc-sf-label-color, #111827)!important}.b-2px-dashed-CBD5E1{border:2px dashed var(--cc-sf-dropzone-border, #CBD5E1)!important}.fs-52px{font-size:52px!important}.p-12px-16px{padding:12px 16px!important}.bb-1px-solid-F3F4F6{border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)!important}.b-0F172A{background:var(--mu-carousel-bg, #0F172A)!important}.b-3px-solid-rgba-255-255-255-0-15{border:3px solid rgba(255,255,255,.15)!important}.b-rgba-255-255-255-0-85{background:#ffffffd9!important}.b-rgba-0-0-0-0-55{background:#0000008c!important}.b-rgba-255-255-255-0-45{background:#ffffff73!important}.pb-4px{padding-bottom:4px!important}.b-2px-solid-transparent{border:2px solid transparent!important}.b-E2E8F0{background:var(--mu-thumb-bg, #E2E8F0)!important}.b-1E293B{background:#1e293b!important}.c-EF4444{color:#ef4444!important}.b-rgba-0-0-0-0-5{background:#00000080!important}.br-16px{border-radius:var(--mu-modal-radius, 16px)!important}.p-24px-28px{padding:24px 28px!important}.bb-1px-solid-E5E7EB{border-bottom:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important}.fs-1-25rem{font-size:1.25rem!important}.p-48px-24px{padding:48px 24px!important}.b-3px-solid-E2E8F0{border:3px solid #E2E8F0!important}.p-16px-24px{padding:16px 24px!important}.p-28px{padding:28px!important}.b-3px-solid-transparent{border:3px solid transparent!important}.b-rgba-59-130-246-0-12{background:#3b82f61f!important}.p-20px-28px{padding:20px 28px!important}.c-1A56DB{color:var(--loc-add-color, #1A56DB)!important}.b-1px-dashed-D1D5DB{border:1px dashed var(--cc-sf-input-disabled-border, #D1D5DB)!important}.fs-40px{font-size:40px!important}.c-9CA3AF{color:var(--loc-tba-icon-color, #9CA3AF)!important}.form-field{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)!important}:host{--cc-sf-input-border: #D1D5DB;--cc-sf-input-bg: #ffffff;--cc-sf-input-radius: 9px;--cc-sf-input-height: 44px;--cc-sf-label-color: #111827;--cc-sf-hint-color: #9CA3AF;--cc-sf-error-border: #EF4444;--cc-sf-error-bg: #FFF5F5;--cc-sf-accent-color: #6366F1;--cc-sf-input-focus-border: #6366F1;--cc-sf-input-hover-border: #A5B4FC;--cc-sf-input-placeholder: #C4C9D4;--cc-sf-input-disabled-bg: #F8F9FB;--cc-sf-input-disabled-border: #E5E7EB;--cc-sf-switch-track-on: #6366F1;--cc-sf-switch-track-off: #D1D5DB;--cc-sf-switch-thumb: #ffffff;--cc-sf-selected-color: #6366F1}.form-row{gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{display:flex;flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-label{font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#6b7280}.field-input,input.matInput,.mat-mdc-input-element{display:block;width:100%;height:var(--cc-sf-input-height)!important;padding:0 14px!important;font-family:inherit;font-size:.9rem;color:var(--cc-sf-label-color);background-color:var(--cc-sf-input-bg)!important;border:1.5px solid var(--cc-sf-input-border)!important;border-radius:var(--cc-sf-input-radius)!important;box-sizing:border-box;box-shadow:0 1px 2px #0000000a!important;transition:all .2s cubic-bezier(.4,0,.2,1)}.field-input::placeholder,input.matInput::placeholder,.mat-mdc-input-element::placeholder{font-weight:400;font-size:14px;color:var(--cc-sf-input-placeholder)}.field-input{opacity:var(--cc-sf-input-opacity, 1);line-height:var(--cc-sf-input-line-height, 1.5);transition:var(--cc-sf-input-transition, all .2s ease)}.field-input::placeholder{font-weight:var(--cc-sf-placeholder-weight, 400);font-size:var(--cc-sf-placeholder-size, 14px);line-height:var(--cc-sf-placeholder-line-height, 100%);color:var(--cc-sf-input-placeholder)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border)!important;box-shadow:0 1px 4px #6366f114!important}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border)!important;box-shadow:0 0 0 3px #6366f124,0 1px 4px #6366f11a!important;background-color:#fefeff!important}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg)!important;color:#9ca3af!important;cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border)!important;box-shadow:none!important}.field-input.is-invalid{border-color:var(--cc-sf-error-border)!important;background-color:var(--cc-sf-error-bg)!important}.field-input.is-invalid:focus{box-shadow:0 0 0 3px #ef44441f,0 1px 4px #ef44441a!important}.field-input.textarea{resize:vertical;min-height:100px;height:auto;padding:12px 16px!important}input[type=time].time-input{cursor:pointer}input[type=time].time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;filter:invert(30%)}input[type=time].time-input::-webkit-calendar-picker-indicator:hover{opacity:1}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.char-count-hint{font-style:normal;line-height:100%;letter-spacing:.02em}.radio-group.layout-column,.checkbox-group.layout-column{display:grid!important;grid-template-columns:repeat(12,1fr);gap:16px;width:100%}.radio-group.layout-row,.checkbox-group.layout-row{flex-direction:column!important;gap:12px;width:100%}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #F05A28)}.radio-label.card-item,.checkbox-label.card-item{display:flex!important;flex-direction:row-reverse!important;justify-content:space-between!important;align-items:center!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);border-radius:12px;padding:16px 20px;box-sizing:border-box;transition:all .2s ease;background:var(--cc-sf-input-bg, #ffffff);margin-bottom:0}.radio-label.card-item input,.checkbox-label.card-item input{margin-left:16px}.radio-label.card-item.selected,.checkbox-label.card-item.selected{border-color:var(--cc-sf-selected-color);background-color:#f05a280d}.radio-label.card-item .option-content .label-text,.checkbox-label.card-item .option-content .label-text,.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-label{transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-selected-color);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-selected-color)}.switch{width:50px;height:24px;display:inline-block}.switch input{opacity:0;width:0;height:0;position:absolute}.switch input:checked+.slider{background-color:var(--cc-sf-switch-track-on)!important}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{inset:0;transition:.4s;background-color:var(--cc-sf-switch-track-off);border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb);transition:.4s;border-radius:50%}.rating-group .star{transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper .password-toggle{right:.625rem;top:50%;transform:translateY(-50%);line-height:1;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-left:12px;padding-top:2px;padding-bottom:2px;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);line-height:1.4}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-accordion-instance{border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-border-radius-inner, 8px);margin-bottom:8px;overflow:hidden;transition:border-color .2s ease}.group-section-wrapper .group-accordion-instance:last-of-type{margin-bottom:0}.group-section-wrapper .group-accordion-instance .group-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--cc-sf-repeater-accordion-header-bg, #F9FAFB);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}.group-section-wrapper .group-accordion-instance .group-accordion-header:hover{background:var(--cc-sf-repeater-accordion-active-bg, #EFF6FF)}.group-section-wrapper .group-accordion-instance .group-accordion-header .instance-badge{width:22px;height:22px;border-radius:50%;background:var(--cc-sf-repeater-badge-bg, #E5E7EB);color:var(--cc-sf-repeater-badge-color, #374151);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.group-section-wrapper .group-accordion-instance .group-accordion-header .instance-title{font-size:var(--cc-sf-instance-num-size, .8125rem);font-weight:600;color:var(--cc-sf-repeater-accordion-header-color, #1F2937)}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn{background:none;border:none;cursor:pointer;color:var(--cc-sf-btn-remove-color, #E53E3E);padding:4px;border-radius:4px;line-height:1;display:flex;align-items:center;transition:background .15s ease}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-chevron{font-size:1.25rem;width:1.25rem;height:1.25rem;line-height:1.25rem;color:var(--cc-sf-instance-num-color, #4B5563)}.group-section-wrapper .group-accordion-instance .group-accordion-body{padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border-top:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .btn-add-group{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 20px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-family:inherit;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.group-section-wrapper .btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.group-section-wrapper .btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper.multi-save-active{border:none;box-shadow:none;padding:0;background:transparent}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button{color:var(--ms-btn-add-color, #3B82F6);font-weight:600;font-size:.875rem;padding:8px 12px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button:hover{color:var(--ms-btn-add-hover, #2563EB);background-color:var(--cc-sf-btn-add-hover-bg, #EFF6FF)}.group-section-wrapper.multi-save-active .group-instance{box-shadow:var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper.multi-save-active .group-instance.is-editing{padding:24px}.group-section-wrapper.multi-save-active .group-instance.is-card{cursor:pointer;transition:all .2s ease-in-out}.group-section-wrapper.multi-save-active .group-instance.is-card:hover{box-shadow:var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, .08));border-color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-title{white-space:nowrap;text-overflow:ellipsis}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-desc{line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view.is-expanded .card-content .card-desc{-webkit-line-clamp:unset;line-clamp:unset}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon{font-size:22px;width:22px;height:22px;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .2s}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-delete:hover{color:var(--cc-sf-error-border, #DC2626)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-edit:hover{color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-expand{color:var(--cc-sf-input-disabled-border, #E5E7EB)}.btn-remove{transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{background-color:var(--cc-sf-dropzone-bg, #F8FAFC);border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);transition:background-color .2s ease,border-color .2s ease}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap .dropzone-icon-pill{width:52px;height:52px;border-radius:50%;background:var(--cc-sf-dropzone-icon-bg, rgba(59, 130, 246, .1))}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:28px;width:28px;height:28px;line-height:28px;color:var(--cc-sf-accent-color, #3B82F6)}.upload-main-text{color:var(--cc-sf-label-color, #1E293B)}.upload-sub-text{color:var(--cc-sf-hint-color, #64748B)}.upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-size-badge{display:inline-block;padding:2px 8px;border-radius:20px;background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-hint-color, #6B7280);font-weight:500}.uploaded-item{background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;flex-shrink:0}.uploaded-item .file-info{min-width:0;gap:2px}.uploaded-item .file-info .file-name{white-space:nowrap;text-overflow:ellipsis}.uploaded-item .file-remove-btn{flex-shrink:0;width:32px;height:32px;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:0;display:flex;align-items:center;justify-content:center;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover:not(:disabled){color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.uploaded-item .file-remove-btn:disabled{opacity:.4;cursor:not-allowed}.uploaded-item.uploading{background:var(--cc-sf-uploaded-uploading-bg, #F8FAFC);border-color:var(--cc-sf-uploaded-uploading-border, #CBD5E1);opacity:.85}.upload-spinner{width:20px;height:20px;flex-shrink:0;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}@keyframes cc-spin{to{transform:rotate(360deg)}}.uploading-label{font-style:italic}.input-group{align-items:stretch}.input-group .field-input{flex:1;width:auto}.input-prefix+.input-group .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .field-input:has(+.input-suffix){border-top-right-radius:0;border-bottom-right-radius:0}.input-group .field-input.has-icon-right{padding-right:3rem}.input-group.readonly .field-input{cursor:default}.input-prefix,.input-suffix{display:flex!important;align-items:center;white-space:nowrap;padding:0 14px;background-color:var(--cc-sf-input-disabled-bg);border:1px solid var(--cc-sf-input-border);font-size:.875rem;color:var(--cc-sf-hint-color);-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px)}.readonly-icons{right:.875rem;top:50%;transform:translateY(-50%)}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.date-icon-wrapper{right:.5rem;top:50%;transform:translateY(-50%);pointer-events:auto}.date-icon-wrapper .mat-icon-button{width:32px;height:32px;line-height:32px}.subfields-group-wrapper .subfields-row{transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{font-weight:700}.autocomplete-wrapper .ac-input{padding-left:40px!important}.autocomplete-wrapper .ac-search-icon{left:.75rem;width:1.1rem;height:1.1rem;line-height:1.1rem;z-index:1;transition:color var(--cc-sf-input-transition, .2s ease)}.autocomplete-wrapper .ac-clear-btn{right:.6rem;transition:color .15s ease,background .15s ease}.autocomplete-wrapper .ac-clear-btn mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.autocomplete-wrapper .ac-clear-btn:hover{color:var(--cc-sf-label-color, #374151);background:var(--cc-sf-input-disabled-bg, #F3F4F6)}.autocomplete-wrapper .ac-clear-btn:focus{outline:none}.autocomplete-wrapper:focus-within .ac-search-icon{color:var(--cc-sf-accent-color, #3B82F6)}.autocomplete-wrapper.is-invalid .ac-input{border-color:var(--cc-sf-error-border)!important;background-color:var(--cc-sf-error-bg)}.autocomplete-wrapper.readonly .ac-input{background-color:var(--cc-sf-input-disabled-bg);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border)!important}.ac-no-results{font-style:italic}::ng-deep .mat-mdc-autocomplete-panel,::ng-deep .mat-autocomplete-panel{background:var(--cc-sf-input-bg, #ffffff)!important;border-radius:var(--cc-sf-input-radius, 9px)!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important;box-shadow:0 8px 24px #0000001a,0 2px 6px #0000000f!important;padding:4px 0!important;min-width:200px}::ng-deep .mat-mdc-autocomplete-panel mat-option,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option,::ng-deep .mat-mdc-autocomplete-panel .mat-option,::ng-deep .mat-autocomplete-panel mat-option,::ng-deep .mat-autocomplete-panel .mat-mdc-option,::ng-deep .mat-autocomplete-panel .mat-option{background:var(--cc-sf-input-bg, #ffffff)!important;color:var(--cc-sf-label-color, #111827)!important;font-size:.875rem!important;padding:10px 16px!important;min-height:40px!important;line-height:1.4!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;transition:background var(--cc-sf-input-transition, .2s ease)!important}::ng-deep .mat-mdc-autocomplete-panel mat-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-mdc-autocomplete-panel .mat-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-autocomplete-panel mat-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-autocomplete-panel .mat-mdc-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-autocomplete-panel .mat-option:hover:not(.mat-option-disabled):not([disabled]){background:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}::ng-deep .mat-mdc-autocomplete-panel mat-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-mdc-autocomplete-panel mat-option.mdc-list-item--selected,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected,::ng-deep .mat-mdc-autocomplete-panel .mat-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-mdc-autocomplete-panel .mat-option.mdc-list-item--selected,::ng-deep .mat-autocomplete-panel mat-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-autocomplete-panel mat-option.mdc-list-item--selected,::ng-deep .mat-autocomplete-panel .mat-mdc-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-autocomplete-panel .mat-mdc-option.mdc-list-item--selected,::ng-deep .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-autocomplete-panel .mat-option.mdc-list-item--selected{background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)!important;color:var(--cc-sf-selected-color, #6366F1)!important;font-weight:600!important}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-option-label,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-option-label,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-option-label,::ng-deep .mat-autocomplete-panel mat-option .ac-option-label,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-option-label,::ng-deep .mat-autocomplete-panel .mat-option .ac-option-label{font-weight:500;color:var(--cc-sf-label-color, #111827);font-size:.875rem;display:block}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-display-fields,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-display-fields,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-display-fields,::ng-deep .mat-autocomplete-panel mat-option .ac-display-fields,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-display-fields,::ng-deep .mat-autocomplete-panel .mat-option .ac-display-fields{align-items:center;line-height:1}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-item,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-item,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-item,::ng-deep .mat-autocomplete-panel mat-option .ac-df-item,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-item,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-item{display:inline-flex;align-items:center;font-size:.72rem;color:var(--cc-sf-hint-color, #6B7280);gap:3px}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-chip,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-chip,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-chip,::ng-deep .mat-autocomplete-panel mat-option .ac-df-chip,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-chip,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-chip{background:var(--cc-sf-input-disabled-bg, #F3F4F6);border-radius:4px;padding:2px 6px}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-text,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-text,::ng-deep .mat-autocomplete-panel mat-option .ac-df-text,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-text,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-text{color:var(--cc-sf-hint-color, #6B7280)}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-avatar,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-avatar,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-avatar,::ng-deep .mat-autocomplete-panel mat-option .ac-df-avatar,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-avatar,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--cc-sf-input-border, #D1D5DB);vertical-align:middle}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-label,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-label,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-label,::ng-deep .mat-autocomplete-panel mat-option .ac-df-label,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-label,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-label{font-weight:600;color:var(--cc-sf-hint-color, #9CA3AF);margin-right:2px}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-icon,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-icon,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-icon,::ng-deep .mat-autocomplete-panel mat-option .ac-df-icon,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-icon,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-icon{font-size:11px;width:11px;height:11px;line-height:11px;color:var(--cc-sf-hint-color, #9CA3AF);flex-shrink:0}.mu-layout{grid-template-columns:1fr 1fr;gap:32px}@media(max-width:768px){.mu-layout{grid-template-columns:1fr}}.mu-title{font-weight:700;line-height:1.3}.mu-badge{white-space:nowrap;flex-shrink:0}.mu-description{line-height:1.6}.mu-feature-item .mu-check{width:16px;height:16px;line-height:16px;flex-shrink:0}.mu-right{min-height:260px}.mu-right-empty{min-height:250px;max-width:400px;box-shadow:0 2px 10px #0000000d;transition:box-shadow .2s ease}.mu-right-empty:hover{cursor:pointer;box-shadow:0 4px 16px #0000001a}.mu-right-empty .mu-right-empty-icon{width:52px;height:52px;line-height:52px;opacity:.3}.mu-right-empty p{margin:0;font-size:.85rem}.media-add-container{display:inline-block}.media-add-container ::ng-deep button{display:flex;align-items:center;gap:6px}.media-add-container ::ng-deep button .menu-chevron{width:18px;height:18px;line-height:18px;transition:transform .2s ease}.media-dropdown{top:calc(100% + 6px);left:0;z-index:200;min-width:240px;box-shadow:var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, .12));animation:mu-fade-in .15s ease}@keyframes mu-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.media-dropdown-item{transition:background .15s ease}.media-dropdown-item:last-child{border-bottom:none}.media-dropdown-item:hover{background:var(--cc-sf-dropzone-hover-bg, #F0F9FF)}.media-drop-icon{width:36px;height:36px;flex-shrink:0}.media-drop-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.media-drop-icon--video{background:var(--mu-icon-video-bg, #FFF0F0);color:var(--mu-icon-video-color, #EF4444)}.media-drop-icon--device{background:var(--mu-icon-device-bg, #EFF6FF);color:var(--mu-icon-device-color, #3B82F6)}.media-drop-icon--library{background:var(--mu-icon-library-bg, #F0FDF4);color:var(--mu-icon-library-color, #22C55E)}.media-drop-text{gap:2px}.youtube-input-panel{animation:mu-fade-in .18s ease}.youtube-panel-label mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--mu-icon-video-color, #EF4444)}.youtube-input-row{align-items:stretch}.media-menu-backdrop{position:fixed;inset:0;z-index:100}.media-upload-status{animation:mu-fade-in .2s ease}.media-upload-status .status-icon{width:18px;height:18px;line-height:18px}.media-carousel-main{max-width:400px;height:var(--mu-carousel-height, 250px)}.carousel-viewer{inset:0}.carousel-viewer .carousel-image{object-fit:cover}.carousel-viewer .carousel-spinner{width:36px;height:36px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.carousel-nav{top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;box-shadow:0 2px 8px #0003;transition:background .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carousel-nav mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:#1e293b}.carousel-nav:hover:not(:disabled){background:#fff}.carousel-nav:disabled{opacity:.3;cursor:not-allowed}.carousel-nav--prev{left:12px}.carousel-nav--next{right:12px}.carousel-remove-btn{top:10px;right:10px;z-index:10;width:32px;height:32px;transition:background .2s ease}.carousel-remove-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.carousel-remove-btn:hover:not(:disabled){background:#dc2626d9}.carousel-remove-btn:disabled{opacity:.4;cursor:not-allowed}.carousel-dots{bottom:10px;left:50%;transform:translate(-50%);z-index:10}.carousel-dot{width:8px;height:8px;transition:background .2s ease,transform .2s ease}.carousel-dot.active{background:#fff;transform:scale(1.3)}.media-thumbnail-strip{max-width:400px;overflow-x:auto}.media-thumbnail-strip::-webkit-scrollbar{height:4px}.media-thumbnail-strip::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:2px}.media-thumb{flex-shrink:0;width:72px;height:52px;transition:border-color .2s ease,transform .15s ease}.media-thumb.active{border-color:var(--mu-thumb-active-border, var(--cc-sf-accent-color, #3B82F6));transform:scale(1.04)}.media-thumb:hover:not(.active){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.media-thumb .thumb-img{object-fit:cover}.media-thumb .thumb-yt-placeholder mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}.media-thumb .thumb-uploading .thumb-spinner{width:20px;height:20px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.media-library-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mu-fade-in .2s ease}.media-library-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:min(90vw,780px);max-height:85vh;box-shadow:var(--mu-modal-shadow, 0 20px 60px rgba(0, 0, 0, .2));animation:mu-modal-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes mu-modal-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.library-modal-header{flex-shrink:0}.library-modal-title{font-weight:700}.library-modal-subtitle{line-height:1.5;max-width:600px}.library-close-btn{width:32px;height:32px;transition:background .15s ease,color .15s ease}.library-close-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-close-btn:hover{background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-label-color, #374151)}.library-loading mat-icon,.library-empty mat-icon{font-size:40px;width:40px;height:40px;line-height:40px;opacity:.5}.lib-spinner{width:36px;height:36px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.library-error{flex-shrink:0}.library-error mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-grid{grid-template-columns:repeat(5,1fr);overflow-y:auto}.library-grid::-webkit-scrollbar{width:8px}.library-grid::-webkit-scrollbar-track{background:#f1f1f1}.library-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px;border:2px solid #F1F1F1}.library-grid-item{aspect-ratio:1/1;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.library-grid-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.library-grid-item.selected{border-color:var(--cc-sf-accent-color, #3B82F6)}.library-grid-item.selected .library-grid-img{opacity:.7}.library-grid-item:hover .library-overlay-hover{opacity:1}.library-grid-img{object-fit:cover}.library-overlay-hover{inset:0;opacity:0;transition:opacity .15s ease}.library-check{top:6px;right:6px;width:22px;height:22px;box-shadow:0 1px 4px #00000026}.library-check mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.library-modal-footer{flex-shrink:0}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary{background-color:var(--cc-sf-accent-color, #3B82F6)!important;border-color:var(--cc-sf-accent-color, #3B82F6)!important;color:#fff!important;font-weight:600;padding-left:32px;padding-right:32px}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:hover{background-color:var(--cc-sf-btn-primary-hover-bg, #2563EB)!important}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:disabled{background-color:#93c5fd!important;cursor:not-allowed}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline{font-weight:600;padding-left:24px;padding-right:24px;border-color:#d1d5db;color:#374151}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline:hover{background-color:#f9fafb}.location-subtitle{line-height:1.5}.loc-tab-btn ::ng-deep button{width:100%}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning){background-color:var(--cc-sf-input-bg, #ffffff)!important;color:var(--cc-sf-label-color, #000000)!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning):hover{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}.loc-venue-item{transition:box-shadow .15s ease,border-color .15s ease}.loc-venue-item:hover{box-shadow:0 2px 8px #0000000f;border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.loc-venue-search-icon{width:18px;height:18px;line-height:18px;flex-shrink:0}.loc-venue-text{white-space:nowrap;text-overflow:ellipsis}.loc-action-btn{transition:background .15s ease,color .15s ease;flex-shrink:0}.loc-action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.loc-action-btn.loc-delete-btn{color:var(--loc-delete-color, #E53E3E)}.loc-action-btn.loc-delete-btn:hover{background:var(--cc-sf-error-bg, #FEF2F2)}.loc-action-btn.loc-edit-btn{color:var(--cc-sf-hint-color, #9CA3AF)}.loc-action-btn.loc-edit-btn:hover{color:var(--cc-sf-input-focus-border, #3B82F6);background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)}.loc-search-icon{left:.75rem;width:1.1rem;height:1.1rem;line-height:1.1rem;z-index:1}.loc-suggestions-panel{top:calc(100% + 4px);left:0;right:0;z-index:300;box-shadow:0 8px 24px #0000001a;animation:mu-fade-in .15s ease;max-height:260px;overflow-y:auto}.loc-suggestion-item{transition:background .12s ease}.loc-suggestion-item:hover,.loc-suggestion-item:focus{background:var(--loc-suggestion-hover-bg, #F0F9FF)}.loc-suggestion-item:not(:last-child){border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)}.loc-suggestion-icon{width:18px;height:18px;line-height:18px;flex-shrink:0}.loc-suggestion-text{white-space:nowrap;text-overflow:ellipsis}.loc-add-btn{transition:opacity .15s ease}.loc-add-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.loc-add-btn:hover{opacity:.8}.loc-map-container{box-shadow:0 2px 10px #0000000f}.loc-tba-panel{min-height:120px}.loc-tba-icon{width:40px;height:40px;line-height:40px;opacity:.6}.loc-tba-text{line-height:1.6;max-width:360px}\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$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i7.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: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }, { kind: "pipe", type: TrustedUrlPipe, name: "trustedUrl" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-field', standalone: false, template: "<div class=\"form-field mb-16px\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\" *ngIf=\"child.isEnabled !== false\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\"\r\n    class=\"group-section-wrapper mb-20px\"\r\n    [class.multi-save-active]=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n\r\n    <!-- Multi-Save: header row with label + top-right Add button -->\r\n    <div class=\"multi-save-header d-flex justify-content-between align-items-center mb-24\"\r\n      *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n      <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n        class=\"btn-add-multi\">\r\n        {{ addMultiLabel }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- Standard heading (non-multiSave) -->\r\n    <h3 class=\"group-label\"\r\n      *ngIf=\"config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active\">{{\r\n      config.sectionConfig!.label }}</h3>\r\n\r\n    <!-- \u2500\u2500 Standard (non-multiSave) repeater: accordion instances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active\">\r\n      <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\"\r\n        class=\"group-accordion-instance\"\r\n        [class.is-expanded]=\"isGroupExpanded(i)\">\r\n\r\n        <!-- Accordion header -->\r\n        <div class=\"group-accordion-header\" (click)=\"toggleGroupAccordion(i)\"\r\n          role=\"button\" [attr.aria-expanded]=\"isGroupExpanded(i)\">\r\n          <div class=\"accordion-header-left d-flex align-items-center gap-10\">\r\n            <span class=\"instance-badge\">{{ i + 1 }}</span>\r\n            <span class=\"instance-title\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n          </div>\r\n          <div class=\"accordion-header-right d-flex align-items-center gap-6\">\r\n            <button type=\"button\" class=\"accordion-remove-btn\"\r\n              *ngIf=\"instanceList.length > 1\"\r\n              (click)=\"$event.stopPropagation(); removeGroupInstance(i)\"\r\n              aria-label=\"Remove\">\r\n              <mat-icon>delete_outline</mat-icon>\r\n            </button>\r\n            <mat-icon class=\"accordion-chevron\">\r\n              {{ isGroupExpanded(i) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n            </mat-icon>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Accordion body -->\r\n        <div class=\"group-accordion-body\" *ngIf=\"isGroupExpanded(i)\">\r\n          <div class=\"group-fields sf-grid\">\r\n            <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n              <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\"\r\n                *ngIf=\"field.isEnabled !== false\">\r\n                <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\"\r\n                  [allowMulti]=\"true\">\r\n                </lib-form-field>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Full-width dashed Add button -->\r\n      <button type=\"button\" class=\"btn-add-group\" (click)=\"addGroupInstance()\">\r\n        <mat-icon>add</mat-icon> {{ addLabel }} {{ config.sectionConfig!.label }}\r\n      </button>\r\n    </ng-container>\r\n\r\n    <!-- \u2500\u2500 MultiSave: card instances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\"\r\n        class=\"group-instance position-relative mb-16 overflow-hidden\"\r\n        [class.is-editing]=\"instance.isEditing\"\r\n        [class.is-card]=\"!instance.isEditing\">\r\n\r\n        <!-- Edit / new form view -->\r\n        <div [hidden]=\"!instance.isEditing\">\r\n          <div class=\"group-fields sf-grid p-24\">\r\n            <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n              <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\"\r\n                *ngIf=\"field.isEnabled !== false\">\r\n                <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\"\r\n                  [allowMulti]=\"true\">\r\n                </lib-form-field>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n\r\n          <!-- Save / Cancel -->\r\n          <div\r\n            class=\"group-footer d-flex justify-content-between align-items-center gap-16 mt-24 pt-20 bt-1px-solid-E5E7EB p-0-24\"\r\n            *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n            <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"multiSaveError\">{{ multiSaveError }}</span>\r\n            <div class=\"footer-actions d-flex gap-12\">\r\n              <lib-button [variant]=\"'outline'\" (click)=\"cancelGroupInstance(i)\">Cancel</lib-button>\r\n              <lib-button [variant]=\"'primary'\" (click)=\"saveGroupInstance(i)\">Save</lib-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Card view (saved state) -->\r\n        <ng-container *ngIf=\"!instance.isEditing\">\r\n          <div class=\"card-view d-flex justify-content-between align-items-center p-18px-24px\"\r\n            [class.is-expanded]=\"instance.isExpanded\">\r\n            <div class=\"card-content flex-1 d-flex flex-column gap-4 overflow-hidden\">\r\n              <span class=\"card-title font-weight-600 overflow-hidden fs-1rem c-111827\">{{\r\n                instance.fg.get(config.sectionConfig!.multiSaveConfig!.summaryField || '')?.value\r\n                || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"card-actions d-flex align-items-center gap-16 ml-20\">\r\n              <mat-icon class=\"icon-delete\" (click)=\"removeGroupInstance(i, true)\">delete_outline</mat-icon>\r\n              <mat-icon class=\"icon-edit\" (click)=\"editGroupInstance(i)\">edit_outline</mat-icon>\r\n              <mat-icon class=\"icon-expand\" (click)=\"toggleExpandGroupInstance(i)\">\r\n                {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n              </mat-icon>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\"\r\n    class=\"group-section-wrapper mb-20px\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper position-relative d-flex align-items-center\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\"\r\n        class=\"password-toggle position-absolute cursor-pointer d-flex align-items-center justify-content-center b-none border-none c-6B7280 p-0-25rem\"\r\n        (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix br-none\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix d-flex align-items-center font-weight-500\" *ngIf=\"config.suffix\">{{ config.suffix\r\n        }}</span>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint font-poppins font-weight-400 text-14 text-right mt-4 c-6B7280\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix br-none\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min ?? null\" [max]=\"config.numberConfig?.max ?? null\"\r\n        [step]=\"config.numberConfig?.step || 1\" [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix d-flex align-items-center font-weight-500\" *ngIf=\"config.suffix\">{{ config.suffix\r\n        }}</span>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <input matInput [matDatepicker]=\"datePicker\" class=\"field-input date-input has-icon-right\"\r\n        [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\" [max]=\"config.dateConfig?.maxDate\"\r\n        [class.is-invalid]=\"errorMessage\" [placeholder]=\"config.placeholder || ''\" [readonly]=\"config.readonly\"\r\n        (click)=\"!config.readonly && datePicker.open()\">\r\n      <div class=\"date-icon-wrapper position-absolute d-flex align-items-center justify-content-center\"\r\n        *ngIf=\"!config.readonly\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n      </div>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Time Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTimeField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <input type=\"time\" class=\"field-input time-input\" [formControlName]=\"config.name!\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"!!config.readonly\">\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Autocomplete \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isAutocomplete\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Hidden real control (stores the code value) -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <div class=\"autocomplete-wrapper position-relative d-flex align-items-center w-100\"\r\n      [class.is-invalid]=\"errorMessage\" [class.readonly]=\"config.readonly\">\r\n      <!-- Search icon -->\r\n      <mat-icon class=\"ac-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">search</mat-icon>\r\n\r\n      <input class=\"field-input ac-input\" [formControl]=\"autocompleteInputCtrl\" [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"config.placeholder || 'Search\u2026'\" [readonly]=\"!!config.readonly\" [class.is-invalid]=\"errorMessage\"\r\n        (blur)=\"onAutocompleteClear()\" autocomplete=\"off\">\r\n\r\n      <!-- Clear button -->\r\n      <button type=\"button\"\r\n        class=\"ac-clear-btn position-absolute d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none c-9CA3AF p-0-2rem\"\r\n        *ngIf=\"autocompleteInputCtrl.value && !config.readonly\"\r\n        (click)=\"autocompleteInputCtrl.setValue(''); updateValue(null)\" tabindex=\"-1\" aria-label=\"Clear\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [panelWidth]=\"'auto'\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.label\"\r\n          (onSelectionChange)=\"onAutocompleteSelected(option)\">\r\n          {{ option.label }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"filteredOptions.length === 0\" disabled class=\"ac-no-results fs-0-8125rem c-6B7280\">\r\n          No results found\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\"\r\n        [class.card-item]=\"config.subType === 'CARD'\"\r\n        [class.selected]=\"formGroup.get(config.name!)?.value === option.code\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <div class=\"option-content d-flex flex-column gap-4 flex-1 text-left\">\r\n          <span class=\"label-text text-16 c-1F2937\">{{ option.label }}</span>\r\n          <span class=\"option-hint text-13 color-gray\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\"\r\n      class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST' || config.subType === 'CARD'\" class=\"checkbox-group d-flex flex-column gap-8\"\r\n      [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\"\r\n        class=\"checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827\"\r\n        [class.card-item]=\"config.subType === 'CARD'\" [class.selected]=\"isChecked(option.code)\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <div class=\"option-content d-flex flex-column gap-4 flex-1 text-left\">\r\n          <span class=\"label-text text-16 c-1F2937\">{{ option.label }}</span>\r\n          <span class=\"option-hint text-13 color-gray\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group d-flex flex-wrap gap-8\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\"\r\n        class=\"chip-label cursor-pointer p-6px-14px b-ffffff c-374151 b-1px-solid-D1D5DB br-20px fs-0-875rem\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" hidden>\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container d-flex justify-content-between align-items-center cursor-pointer\">\r\n      <span class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">{{ config.label }}</span>\r\n      <div class=\"switch position-relative\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider position-absolute cursor-pointer\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rich Text \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRichText\" class=\"field-wrapper component-rich-text d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rich-text-container\" [class.is-invalid]=\"errorMessage\">\r\n      <quill-editor [formControlName]=\"config.name!\" class=\"rich-text-editor d-block w-100\"\r\n        [placeholder]=\"config.richTextConfig?.placeholder || config.placeholder || ''\"\r\n        [styles]=\"{height: config.richTextConfig?.height || '200px'}\">\r\n      </quill-editor>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint font-poppins font-weight-400 text-14 text-right mt-4 c-6B7280\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group d-flex gap-4\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star d-inline-flex align-items-center cursor-pointer\"\r\n        [class.filled]=\"isStarFilled(star)\" [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper d-flex flex-column gap-6\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">{{ config.label\r\n      }}</label>\r\n    <div class=\"generated-value fs-0-875rem p-0-625rem-0-875rem b-F3F4F6 b-1px-solid-E5E7EB br-8px c-6B7280\">{{ value ||\r\n      '-' }}</div>\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div\r\n      class=\"upload-drop-zone d-flex flex-column align-items-center justify-content-center gap-8 cursor-pointer text-center p-32px-24px us-none\"\r\n      [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\" [class.is-invalid]=\"errorMessage\"\r\n      (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onFileDrop($event)\"\r\n      (click)=\"fileInput.click()\">\r\n\r\n      <!-- Icon with accent-colour pill background -->\r\n      <div class=\"upload-icon-wrap mb-4\">\r\n        <div class=\"dropzone-icon-pill d-flex align-items-center justify-content-center\">\r\n          <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text font-weight-600 m-0 fs-0-9rem\">Drag &amp; drop files here</p>\r\n      <p class=\"upload-sub-text m-0 fs-0-8rem c-64748B\">or <span class=\"upload-link\">Browse files</span></p>\r\n      <p class=\"upload-hint-text m-0 fs-0-78rem c-64748B\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported: <span class=\"upload-formats font-weight-500\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text m-0 fs-0-78rem c-64748B\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n      <span class=\"upload-size-badge fs-0-72rem\" *ngIf=\"config.attachmentConfig?.maxSizeMB\">\r\n        Max {{ config.attachmentConfig!.maxSizeMB }}MB\r\n      </span>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" hidden [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list d-flex flex-column gap-8 mt-10\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\"\r\n        class=\"uploaded-item d-flex align-items-center gap-10 p-10px-14px br-8px\"\r\n        [class.uploading]=\"f.isUploading\">\r\n\r\n        <!-- Uploading spinner -->\r\n        <ng-container *ngIf=\"f.isUploading; else fileReady\">\r\n          <div class=\"upload-spinner rounded-50 b-2px-solid-E2E8F0\"></div>\r\n          <div class=\"file-info flex-1 d-flex flex-column\">\r\n            <span class=\"file-name font-weight-500 overflow-hidden fs-0-85rem\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size uploading-label fs-0-72rem\">Uploading...</span>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- Normal state once upload is done -->\r\n        <ng-template #fileReady>\r\n          <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n          <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb rounded-4\"\r\n            alt=\"preview\">\r\n          <div class=\"file-info flex-1 d-flex flex-column\">\r\n            <span class=\"file-name font-weight-500 overflow-hidden fs-0-85rem\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size fs-0-72rem\">{{ formatFileSize(f.size) }}</span>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Compact icon-only remove button -->\r\n        <button type=\"button\" class=\"file-remove-btn d-flex align-items-center justify-content-center rounded-50\"\r\n          [disabled]=\"f.isUploading\" (click)=\"!f.isUploading && removeUploadedFile(i)\"\r\n          aria-label=\"Remove file\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Media Upload (Type 2) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isMediaUpload\" class=\"field-wrapper media-upload-wrapper d-flex flex-column gap-6 p-0 border-none b-none\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <!-- Hidden file input lives outside *ngIf \u2014 triggered via ViewChild -->\r\n    <input #mediaDeviceInput type=\"file\" hidden multiple accept=\"image/*\" (change)=\"onMediaFileSelected($event)\">\r\n\r\n    <!-- Two-column layout -->\r\n    <div class=\"mu-layout d-grid align-items-start\">\r\n\r\n      <!-- \u2500\u2500 LEFT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-left d-flex flex-column gap-20\">\r\n\r\n        <!-- Header: title + max-items badge -->\r\n        <div class=\"mu-header d-flex align-items-start flex-wrap gap-10\">\r\n          <h3 class=\"mu-title m-0 c-111827 fs-1-35rem\">\r\n            {{ config.label }}\r\n            <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n          </h3>\r\n          <span\r\n            class=\"mu-badge d-inline-flex align-items-center rounded-20 color-white font-weight-600 fs-0-72rem p-4px-12px b-111827\"\r\n            *ngIf=\"config.attachmentConfig?.maxFiles\">\r\n            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}\r\n            {{ config.attachmentConfig?.maxFiles }}\r\n            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Description -->\r\n        <p class=\"mu-description m-0 fs-0-875rem c-6B7280\" *ngIf=\"config.attachmentConfig?.description\">\r\n          {{ config.attachmentConfig?.description }}\r\n        </p>\r\n        <p class=\"mu-description m-0 fs-0-875rem c-6B7280\"\r\n          *ngIf=\"!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']\">\r\n          {{ controller.labels['LBL_MEDIA_DESC'] }}\r\n        </p>\r\n\r\n        <!-- Feature bullet list -->\r\n        <ul class=\"mu-features m-0 p-0 d-flex flex-column gap-8 ls-none\"\r\n          *ngIf=\"config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']\">\r\n          <ng-container *ngIf=\"config.attachmentConfig?.features?.length\">\r\n            <li *ngFor=\"let f of config.attachmentConfig?.features\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ f }}\r\n            </li>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!config.attachmentConfig?.features?.length\">\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_1']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_2']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_3']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n\r\n        <!-- Backdrop to close dropdown on outside click -->\r\n        <div class=\"media-menu-backdrop\" *ngIf=\"showMediaMenu\"\r\n          (click)=\"$event.stopPropagation(); showMediaMenu = false\"></div>\r\n\r\n        <!-- Add Media button + dropdown -->\r\n        <div class=\"media-add-container position-relative\" (click)=\"showMediaMenu = !showMediaMenu\">\r\n          <lib-button id=\"btn-add-media-{{ config.name }}\" [variant]=\"'warning'\"\r\n            [icon]=\"{type: 'material', value: 'add_photo_alternate'}\">\r\n            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}\r\n            <mat-icon class=\"menu-chevron fs-18px\">add</mat-icon>\r\n          </lib-button>\r\n\r\n          <div class=\"media-dropdown position-absolute rounded-12 overflow-hidden b-ffffff b-1px-solid-E5E7EB\"\r\n            *ngIf=\"showMediaMenu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n            <!-- Video -->\r\n            <button id=\"btn-media-video-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuVideo(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--video d-flex align-items-center justify-content-center rounded-8\"><mat-icon>videocam</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add\r\n                  YouTube URL'\r\n                  }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Device -->\r\n            <button id=\"btn-media-device-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuDevice(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--device d-flex align-items-center justify-content-center rounded-8\"><mat-icon>upload</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] ||\r\n                  'Select images from your\r\n                  computer' }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Library -->\r\n            <button id=\"btn-media-library-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuLibrary(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--library d-flex align-items-center justify-content-center rounded-8\"><mat-icon>photo_library</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] ||\r\n                  'Choose from default\r\n                  images' }}</span>\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- YouTube URL Input (inline below button) -->\r\n        <div class=\"youtube-input-panel d-flex flex-column gap-8 p-16 rounded-10 b-FFFAF1 b-1px-solid-E5E7EB\"\r\n          *ngIf=\"showYoutubeInput\">\r\n          <label class=\"youtube-panel-label d-flex align-items-center gap-6 font-weight-600 fs-0-875rem c-111827\">\r\n            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}\r\n          </label>\r\n          <div class=\"youtube-input-row d-flex gap-8\">\r\n            <input id=\"input-youtube-url-{{ config.name }}\" type=\"url\" class=\"field-input youtube-url-input\"\r\n              [(ngModel)]=\"youtubeUrlInput\" [ngModelOptions]=\"{standalone: true}\"\r\n              [placeholder]=\"controller.labels['PH_YOUTUBE_URL'] || 'Video URL'\" (keyup.enter)=\"addYoutubeMedia()\">\r\n            <lib-button id=\"btn-add-youtube-{{ config.name }}\" [variant]=\"'secondary'\" (click)=\"addYoutubeMedia()\">\r\n              {{ controller.labels['LBL_ADD'] || 'Add' }}\r\n            </lib-button>\r\n          </div>\r\n          <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"youtubeUrlError\">{{ youtubeUrlError }}</span>\r\n        </div>\r\n\r\n        <div\r\n          class=\"media-upload-status d-flex align-items-center gap-8 mt-4 color-error rounded-8 font-weight-500 p-10px-14px b-FEF2F2 fs-0-85rem\"\r\n          *ngIf=\"mediaUploadError\">\r\n          <mat-icon class=\"status-icon fs-18px\">error_outline</mat-icon>\r\n          <span>{{ mediaUploadError }}</span>\r\n        </div>\r\n\r\n        <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n        <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n      </div>\r\n      <!-- end left panel -->\r\n\r\n      <!-- \u2500\u2500 RIGHT PANEL (carousel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-right d-flex flex-column gap-12\">\r\n\r\n        <!-- Carousel (when items exist) -->\r\n        <div class=\"media-carousel-section d-flex flex-column gap-12\" *ngIf=\"mediaItems.length\">\r\n          <div\r\n            class=\"media-carousel-main position-relative w-100 overflow-hidden d-flex align-items-center justify-content-center br-12px b-0F172A\">\r\n            <button id=\"btn-carousel-prev-{{ config.name }}\" type=\"button\"\r\n              class=\"carousel-nav carousel-nav--prev position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85\"\r\n              (click)=\"mediaCarouselPrev()\" [disabled]=\"mediaCarouselIndex === 0\" aria-label=\"Previous\">\r\n              <mat-icon>chevron_left</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-viewer position-absolute d-flex align-items-center justify-content-center\"\r\n              *ngFor=\"let item of mediaItems; let i = index\" [hidden]=\"i !== mediaCarouselIndex\">\r\n              <div *ngIf=\"item.isUploading\"\r\n                class=\"carousel-uploading d-flex flex-column align-items-center gap-12 c-94A3B8 fs-0-85rem\">\r\n                <div class=\"carousel-spinner rounded-50 b-3px-solid-rgba-255-255-255-0-15\"></div>\r\n                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading\u2026' }}</span>\r\n              </div>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'youtube'\">\r\n                <iframe class=\"carousel-iframe w-100 h-100 br-12px\" [src]=\"item.url | trustedUrl\" frameborder=\"0\"\r\n                  allowfullscreen\r\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\">\r\n                </iframe>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'image'\">\r\n                <img class=\"carousel-image w-100 h-100 br-12px\" [src]=\"item.url\" alt=\"Media\">\r\n              </ng-container>\r\n              <button id=\"btn-remove-media-{{ config.name }}-{{ i }}\" type=\"button\"\r\n                class=\"carousel-remove-btn position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-0-0-0-0-55\"\r\n                [disabled]=\"item.isUploading\" (click)=\"removeMediaItem(i)\" aria-label=\"Remove\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <button id=\"btn-carousel-next-{{ config.name }}\" type=\"button\"\r\n              class=\"carousel-nav carousel-nav--next position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85\"\r\n              (click)=\"mediaCarouselNext()\" [disabled]=\"mediaCarouselIndex === mediaItems.length - 1\" aria-label=\"Next\">\r\n              <mat-icon>chevron_right</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-dots position-absolute d-flex gap-6\">\r\n              <span *ngFor=\"let item of mediaItems; let i = index\"\r\n                class=\"carousel-dot rounded-50 cursor-pointer b-rgba-255-255-255-0-45\"\r\n                [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\"></span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Thumbnail strip -->\r\n          <div class=\"media-thumbnail-strip d-flex flex-wrap gap-8 pb-4px\">\r\n            <div *ngFor=\"let item of mediaThumbnails; let i = index\"\r\n              class=\"media-thumb rounded-8 overflow-hidden cursor-pointer d-flex align-items-center justify-content-center b-2px-solid-transparent b-E2E8F0\"\r\n              [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\">\r\n              <div *ngIf=\"item.isUploading\"\r\n                class=\"thumb-uploading d-flex align-items-center justify-content-center w-100 h-100\">\r\n                <div class=\"thumb-spinner rounded-50 b-2px-solid-E2E8F0\"></div>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl\"\r\n                [src]=\"item.thumbnailUrl\" class=\"thumb-img w-100 h-100\" alt=\"Video thumbnail\">\r\n              <div *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl\"\r\n                class=\"thumb-yt-placeholder d-flex align-items-center justify-content-center w-100 h-100 b-1E293B c-EF4444\">\r\n                <mat-icon>play_circle</mat-icon>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'image' && item.url\" [src]=\"item.url\"\r\n                class=\"thumb-img w-100 h-100\" alt=\"Image thumbnail\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Empty right-side placeholder -->\r\n        <div\r\n          class=\"mu-right-empty d-flex flex-column align-items-center justify-content-center gap-10 h-100 text-center p-24 br-12px b-FFFAF1 c-94A3B8 b-2px-dashed-CBD5E1\"\r\n          *ngIf=\"!mediaItems.length\" (click)=\"onMediaMenuDevice()\">\r\n          <mat-icon class=\"mu-right-empty-icon fs-52px\">perm_media</mat-icon>\r\n          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- end right panel -->\r\n\r\n    </div><!-- end mu-layout -->\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Library Image Picker Modal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div class=\"media-library-overlay b-rgba-0-0-0-0-5\" *ngIf=\"showLibraryModal\" (click)=\"closeLibraryModal()\"></div>\r\n  <div class=\"media-library-modal d-flex flex-column overflow-hidden b-ffffff br-16px\" *ngIf=\"showLibraryModal\"\r\n    role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"library-modal-header d-flex align-items-start justify-content-between p-24px-28px bb-1px-solid-E5E7EB\">\r\n      <div class=\"header-left d-flex flex-column gap-8\">\r\n        <h3 class=\"library-modal-title m-0 color-dark fs-1-25rem\">\r\n          {{ controller.labels['LBL_ADD_IMAGES'] || 'Add Images' }}\r\n        </h3>\r\n        <p class=\"library-modal-subtitle m-0 color-gray fs-0-85rem\">\r\n          {{ controller.labels['LBL_LIBRARY_MODAL_DESC'] || 'Upload media to make your opportunity stand out. Plus, take\r\n          full control of your sequence - drag images to reorder as you desire.' }}\r\n        </p>\r\n      </div>\r\n      <button id=\"btn-close-library-{{ config.name }}\" type=\"button\"\r\n        class=\"library-close-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 border-none b-none c-9CA3AF\"\r\n        (click)=\"closeLibraryModal()\" aria-label=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Loading -->\r\n    <div class=\"library-loading\" *ngIf=\"libraryLoading\">\r\n      <div class=\"lib-spinner rounded-50 b-3px-solid-E2E8F0\"></div>\r\n      <span>{{ controller.labels['LBL_LOADING'] || 'Loading\u2026' }}</span>\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div class=\"library-error d-flex align-items-center gap-8 color-error b-FEF2F2 fs-0-875rem p-16px-24px\"\r\n      *ngIf=\"libraryError && !libraryLoading\">\r\n      <mat-icon>error_outline</mat-icon>\r\n      {{ libraryError }}\r\n    </div>\r\n\r\n    <!-- Image grid -->\r\n    <div class=\"library-grid d-grid gap-16 flex-1 p-28px b-F9FAFB\" *ngIf=\"!libraryLoading && libraryImages.length\">\r\n      <div *ngFor=\"let img of libraryImages; let li = index\" id=\"lib-img-{{ config.name }}-{{ li }}\"\r\n        class=\"library-grid-item position-relative rounded-12 overflow-hidden cursor-pointer bg-white b-3px-solid-transparent\"\r\n        [class.selected]=\"isLibraryItemSelected(img)\" (click)=\"toggleLibraryItem(img)\">\r\n        <img [src]=\"getLibraryItemUrl(img)\" class=\"library-grid-img w-100 h-100 d-block\" alt=\"Library image\">\r\n        <div\r\n          class=\"library-check position-absolute bg-white rounded-50 d-flex align-items-center justify-content-center c-3B82F6\"\r\n          *ngIf=\"isLibraryItemSelected(img)\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        <div class=\"library-overlay-hover position-absolute b-rgba-59-130-246-0-12\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Empty library -->\r\n    <div\r\n      class=\"library-empty d-flex flex-column align-items-center justify-content-center gap-12 flex-1 c-9CA3AF fs-0-875rem p-48px-24px\"\r\n      *ngIf=\"!libraryLoading && !libraryError && libraryImages.length === 0\">\r\n      <mat-icon>image_not_supported</mat-icon>\r\n      <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"library-modal-footer d-flex align-items-center justify-content-end bg-white p-20px-28px bt-1px-solid-E5E7EB\">\r\n      <div class=\"library-footer-actions d-flex gap-12 gap-10\">\r\n        <lib-button id=\"btn-library-cancel-{{ config.name }}\" [variant]=\"'outline'\" (click)=\"closeLibraryModal()\">\r\n          {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}\r\n        </lib-button>\r\n        <lib-button id=\"btn-library-confirm-{{ config.name }}\" [variant]=\"'primary'\"\r\n          [disabled]=\"librarySelectedIds.size === 0\" (click)=\"confirmLibrarySelection()\">\r\n          {{ controller.labels['LBL_CONTINUE'] || 'Continue' }}\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Location Field \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isLocation\" class=\"field-wrapper location-field-wrapper d-flex flex-column gap-6 gap-12\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <!-- Field label -->\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n    <p class=\"location-subtitle m-0 c-6B7280 fs-0-8125rem\" *ngIf=\"config.hint\">{{ config.hint }}</p>\r\n\r\n    <!-- Three-tab bar -->\r\n    <div class=\"location-tabs d-flex gap-12 mb-24\">\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'VENUE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('VENUE')\">\r\n        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'ONLINE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('ONLINE')\">\r\n        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'TBA' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('TBA')\">\r\n        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- VENUE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'VENUE'\" class=\"loc-panel loc-venue-panel d-flex flex-column gap-12\">\r\n\r\n      <p class=\"loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem\">\r\n        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}\r\n      </p>\r\n\r\n      <!-- Added venue rows -->\r\n      <div class=\"loc-venue-list d-flex flex-column gap-8\" *ngIf=\"locationVenues.length > 0\">\r\n        <div *ngFor=\"let venue of locationVenues; let i = index\"\r\n          class=\"loc-venue-item d-flex align-items-center gap-10 p-10px-14px br-7px b-ffffff b-1px-solid-D1D5DB\">\r\n          <mat-icon class=\"loc-venue-search-icon fs-18px c-9CA3AF\">search</mat-icon>\r\n          <span class=\"loc-venue-text flex-1 overflow-hidden fs-0-875rem c-111827\">{{ venue.address || venue.name ||\r\n            venue.description }}</span>\r\n          <button type=\"button\"\r\n            class=\"loc-action-btn loc-delete-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none p-4px\"\r\n            (click)=\"removeLocationVenue(i)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Location count badge -->\r\n      <p class=\"loc-count-text m-0 font-weight-600 fs-0-8125rem c-3B82F6\"\r\n        *ngIf=\"locationVenues.length > 0 && config.locationConfig?.allowMulti\">\r\n        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}\r\n      </p>\r\n\r\n      <!-- Search input (hide when max reached) -->\r\n      <div class=\"loc-search-container position-relative\" *ngIf=\"!locationMaxReached\">\r\n        <div class=\"loc-search-wrapper position-relative d-flex align-items-center mt-4\">\r\n          <mat-icon class=\"loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">search</mat-icon>\r\n          <input\r\n            class=\"field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem\"\r\n            [placeholder]=\"config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')\"\r\n            [value]=\"locationSearchText\" (input)=\"handleLocationSearchInput($event)\" (blur)=\"hideLocationSuggestions()\"\r\n            autocomplete=\"off\" [class.is-invalid]=\"errorMessage\">\r\n        </div>\r\n        <!-- Suggestions dropdown -->\r\n        <div class=\"loc-suggestions-panel position-absolute overflow-hidden br-8px b-ffffff b-1px-solid-D1D5DB\"\r\n          *ngIf=\"locationShowSuggestions && locationSuggestions.length\">\r\n          <div *ngFor=\"let sug of locationSuggestions\"\r\n            class=\"loc-suggestion-item d-flex align-items-center gap-10 cursor-pointer p-10px-14px\"\r\n            (mousedown)=\"onLocationSuggestionSelect(sug)\">\r\n            <mat-icon class=\"loc-suggestion-icon fs-18px c-E53E3E\">place</mat-icon>\r\n            <span class=\"loc-suggestion-text overflow-hidden fs-0-875rem c-374151\">{{ sug.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Add another button -->\r\n      <button type=\"button\"\r\n        class=\"loc-add-btn d-inline-flex align-items-center gap-6 cursor-pointer font-weight-600 p-0 b-none border-none fs-0-875rem c-1A56DB\"\r\n        *ngIf=\"locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti\">\r\n        <mat-icon>add_circle_outline</mat-icon>\r\n        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>\r\n      </button>\r\n\r\n      <!-- Map -->\r\n      <div class=\"loc-map-container overflow-hidden br-10px b-1px-solid-E5E7EB\"\r\n        *ngIf=\"config.locationConfig?.showMap !== false\">\r\n        <ng-container *ngIf=\"config.locationConfig?.googleMapsApiKey; else simpleEmbed\">\r\n          <div [id]=\"'loc-map-' + config.name\" class=\"loc-map-frame w-100 d-block border-none\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\"></div>\r\n        </ng-container>\r\n        <ng-template #simpleEmbed>\r\n          <iframe class=\"loc-map-frame w-100 d-block border-none\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\" [src]=\"getLocationMapEmbedUrl() | trustedUrl\"\r\n            frameborder=\"0\" allowfullscreen loading=\"lazy\">\r\n          </iframe>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- Map hint -->\r\n      <p class=\"loc-map-hint m-0 text-center fs-0-78rem c-6B7280\">\r\n        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}\r\n      </p>\r\n    </div>\r\n\r\n    <!-- ONLINE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'ONLINE'\" class=\"loc-panel loc-online-panel d-flex flex-column gap-12\">\r\n      <p class=\"loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem\">\r\n        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}\r\n      </p>\r\n      <div class=\"loc-search-wrapper position-relative d-flex align-items-center mt-4\">\r\n        <mat-icon class=\"loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">link</mat-icon>\r\n        <input\r\n          class=\"field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem\"\r\n          type=\"url\"\r\n          [placeholder]=\"config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')\"\r\n          [value]=\"locationOnlineUrl\" (input)=\"onLocationUrlChange($any($event.target).value)\"\r\n          [class.is-invalid]=\"errorMessage\">\r\n      </div>\r\n    </div>\r\n\r\n    <!-- TBA TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'TBA'\"\r\n      class=\"loc-panel loc-tba-panel d-flex flex-column gap-12 justify-content-center\">\r\n      <div\r\n        class=\"loc-tba-content d-flex flex-column align-items-center justify-content-center text-center gap-12 p-32px-24px b-F9FAFB b-1px-dashed-D1D5DB br-10px\">\r\n        <mat-icon class=\"loc-tba-icon fs-40px c-9CA3AF\">schedule</mat-icon>\r\n        <p class=\"loc-tba-text m-0 c-6B7280 fs-0-9rem\">\r\n          {{ controller.labels['LBL_LOC_TBA_DESC'] || \"This event's location is yet to be announced. Check back later\r\n          for updates.\" }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Hidden real form control -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n</div>", styles: [".d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-block{display:block}.d-none{display:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.grid-cols-12{grid-template-columns:repeat(12,1fr)}.w-100{width:100%}.h-100{height:100%}.position-relative{position:relative}.position-absolute{position:absolute}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-poppins{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)}.font-weight-400{font-weight:400}.font-weight-500{font-weight:500}.font-weight-600{font-weight:600}.text-13{font-size:13px}.text-14{font-size:14px}.text-16{font-size:16px}.color-white{color:#fff}.color-dark{color:#111827}.color-gray{color:#6b7280}.color-error{color:var(--cc-sf-error-text-color, #DC2626)}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.m-0{margin:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.ml-16{margin-left:16px}.ml-20{margin-left:20px}.p-0{padding:0}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.pt-20{padding-top:20px}.pb-10{padding-bottom:10px}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.rounded-4{border-radius:4px}.rounded-6{border-radius:6px}.rounded-8{border-radius:8px}.rounded-10{border-radius:10px}.rounded-12{border-radius:12px}.rounded-20{border-radius:20px}.rounded-24{border-radius:24px}.rounded-50{border-radius:50%}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.resize-vertical{resize:vertical}.box-sizing-border{box-sizing:border-box}.border-none{border:none!important}.mb-16px{margin-bottom:var(--cc-sf-grid-gap, 16px)!important}.c-DC2626{color:var(--cc-sf-label-required-color, #DC2626)!important}.ml-0-125rem{margin-left:.125rem!important}.fs-0-875rem{font-size:.875rem!important}.c-111827{color:var(--cc-sf-label-color, #111827)!important}.br-7px{border-radius:var(--cc-sf-input-radius, 7px)!important}.c-6B7280{color:var(--cc-sf-hint-color, #6B7280)!important}.fs-0-75rem{font-size:var(--cc-sf-error-text-size, .75rem)!important}.b-none{background:none!important}.p-32px-24px{padding:32px 24px!important}.us-none{-webkit-user-select:none!important;user-select:none!important}.c-1E293B{color:var(--cc-sf-label-color, #1E293B)!important}.c-3B82F6{color:var(--cc-sf-chip-selected-bg, #3B82F6)!important}.fs-0-78rem{font-size:.78rem!important}.p-10px-14px{padding:10px 14px!important}.fs-0-85rem{font-size:.85rem!important}.fs-0-72rem{font-size:.72rem!important}.c-94A3B8{color:#94a3b8!important}.p-4px{padding:4px!important}.br-8px{border-radius:var(--cc-sf-input-radius, 8px)!important}.bc-F3F4F6{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}.br-none{border-right:none!important}.bl-none{border-left:none!important}.pe-none{pointer-events:none!important}.fs-1-1rem{font-size:1.1rem!important}.c-9CA3AF{color:var(--cc-sf-hint-color, #9CA3AF)!important}.pl-2-4rem{padding-left:2.4rem!important}.fs-0-8125rem{font-size:.8125rem!important}.ls-none{list-style:none!important}.br-12px{border-radius:var(--mu-carousel-radius, 12px)!important}.b-FFFAF1{background:var(--cc-sf-dropzone-bg, #FFFAF1)!important}.fs-18px{font-size:18px!important}.b-FEF2F2{background:var(--cc-sf-error-bg, #FEF2F2)!important}.bc-DC2626{border-color:var(--cc-sf-error-border, #DC2626)!important}.c-202124{color:var(--cc-sf-label-color, #202124)!important}.fs-18px{font-size:var(--cc-sf-label-size, 18px)!important}.mb-0-5rem{margin-bottom:.5rem!important}.pt-0-625rem{padding-top:var(--cc-sf-input-padding-y, .625rem)!important}.pb-0-625rem{padding-bottom:var(--cc-sf-input-padding-y, .625rem)!important}.pl-16px{padding-left:var(--cc-sf-input-padding-x, 16px)!important}.pr-16px{padding-right:var(--cc-sf-input-padding-x, 16px)!important}.bc-ffffff{background-color:var(--cc-sf-section-bg, #ffffff)!important}.b-1px-solid-D1D5DB{border:1px solid var(--cc-sf-input-border, #D1D5DB)!important}.fs-0-75rem{font-size:.75rem!important}.c-1F2937{color:var(--cc-sf-section-label-color, #1F2937)!important}.p-6px-14px{padding:var(--cc-sf-chip-padding, 6px 14px)!important}.b-ffffff{background:var(--loc-suggestion-bg, #ffffff)!important}.c-374151{color:var(--cc-sf-label-color, #374151)!important}.br-20px{border-radius:var(--cc-sf-chip-radius, 20px)!important}.fs-0-875rem{font-size:var(--cc-sf-btn-font-size, .875rem)!important}.bc-D1D5DB{background-color:var(--cc-sf-switch-track-off, #D1D5DB)!important}.pr-2-75rem{padding-right:2.75rem!important}.p-0-25rem{padding:.25rem!important}.p-0-625rem-0-875rem{padding:var(--cc-sf-generated-padding, .625rem .875rem)!important}.b-F3F4F6{background:var(--cc-sf-generated-bg, #F3F4F6)!important}.b-1px-solid-E5E7EB{border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important}.br-8px{border-radius:var(--cc-sf-uploaded-item-radius, 8px)!important}.c-6B7280{color:var(--ms-desc-color, #6B7280)!important}.mb-20px{margin-bottom:var(--cc-sf-section-gap, 20px)!important}.br-10px{border-radius:var(--cc-sf-input-radius, 10px)!important}.p-20px{padding:var(--cc-sf-section-padding, 20px)!important}.fs-1rem{font-size:1rem!important}.m-0-0-16px-0{margin:0 0 16px!important}.bb-2px-solid-E5E7EB{border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)!important}.p-16px{padding:var(--cc-sf-instance-padding, 16px)!important}.b-F9FAFB{background:var(--loc-tba-bg, #F9FAFB)!important}.bb-1px-dashed-D1D5DB{border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)!important}.c-4B5563{color:var(--cc-sf-instance-num-color, #4B5563)!important}.fs-0-8125rem{font-size:var(--cc-sf-hint-size, .8125rem)!important}.pb-0{padding-bottom:0!important}.p-18px-24px{padding:18px 24px!important}.c-111827{color:var(--ms-title-color, #111827)!important}.bt-1px-solid-E5E7EB{border-top:1px solid #E5E7EB!important}.p-4px-10px{padding:4px 10px!important}.b-FFF5F5{background:var(--cc-sf-btn-remove-bg, #FFF5F5)!important}.c-E53E3E{color:var(--loc-delete-color, #E53E3E)!important}.b-1px-solid-FED7D7{border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7)!important}.br-4px{border-radius:var(--cc-sf-btn-remove-radius, 4px)!important}.p-8px-16px{padding:8px 16px!important}.b-transparent{background:var(--cc-sf-btn-add-bg, transparent)!important}.c-3B82F6{color:var(--cc-sf-input-focus-border, #3B82F6)!important}.b-1px-dashed-CBD5E1{border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1)!important}.br-6px{border-radius:var(--cc-sf-btn-add-radius, 6px)!important}.b-1-5px-dashed-CBD5E1{border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1)!important}.br-12px{border-radius:var(--cc-sf-dropzone-radius, 12px)!important}.bc-FFFAF1{background-color:var(--cc-sf-dropzone-bg, #FFFAF1)!important}.c-94A3B8{color:var(--cc-sf-uploaded-remove-color, #94A3B8)!important}.fs-0-9rem{font-size:var(--cc-sf-input-font-size, .9rem)!important}.c-64748B{color:var(--cc-sf-dropzone-hint-color, #64748B)!important}.b-1px-solid-E2E8F0{border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0)!important}.b-2px-solid-E2E8F0{border:2px solid #E2E8F0!important}.pr-3-5rem{padding-right:3.5rem!important}.p-0-0-875rem{padding:0 .875rem!important}.bc-FFFFFF{background-color:var(--cc-sf-input-bg, #FFFFFF)!important}.b-1-5px-solid-D1D5DB{border:var(--cc-sf-input-border, 1.5px solid #D1D5DB)!important}.mb-0-75rem{margin-bottom:.75rem!important}.mt-6px{margin-top:6px!important}.pr-2-4rem{padding-right:2.4rem!important}.p-0-2rem{padding:.2rem!important}.fs-1-35rem{font-size:1.35rem!important}.p-4px-12px{padding:4px 12px!important}.b-111827{background:var(--cc-sf-label-color, #111827)!important}.b-2px-dashed-CBD5E1{border:2px dashed var(--cc-sf-dropzone-border, #CBD5E1)!important}.fs-52px{font-size:52px!important}.p-12px-16px{padding:12px 16px!important}.bb-1px-solid-F3F4F6{border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)!important}.b-0F172A{background:var(--mu-carousel-bg, #0F172A)!important}.b-3px-solid-rgba-255-255-255-0-15{border:3px solid rgba(255,255,255,.15)!important}.b-rgba-255-255-255-0-85{background:#ffffffd9!important}.b-rgba-0-0-0-0-55{background:#0000008c!important}.b-rgba-255-255-255-0-45{background:#ffffff73!important}.pb-4px{padding-bottom:4px!important}.b-2px-solid-transparent{border:2px solid transparent!important}.b-E2E8F0{background:var(--mu-thumb-bg, #E2E8F0)!important}.b-1E293B{background:#1e293b!important}.c-EF4444{color:#ef4444!important}.b-rgba-0-0-0-0-5{background:#00000080!important}.br-16px{border-radius:var(--mu-modal-radius, 16px)!important}.p-24px-28px{padding:24px 28px!important}.bb-1px-solid-E5E7EB{border-bottom:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important}.fs-1-25rem{font-size:1.25rem!important}.p-48px-24px{padding:48px 24px!important}.b-3px-solid-E2E8F0{border:3px solid #E2E8F0!important}.p-16px-24px{padding:16px 24px!important}.p-28px{padding:28px!important}.b-3px-solid-transparent{border:3px solid transparent!important}.b-rgba-59-130-246-0-12{background:#3b82f61f!important}.p-20px-28px{padding:20px 28px!important}.c-1A56DB{color:var(--loc-add-color, #1A56DB)!important}.b-1px-dashed-D1D5DB{border:1px dashed var(--cc-sf-input-disabled-border, #D1D5DB)!important}.fs-40px{font-size:40px!important}.c-9CA3AF{color:var(--loc-tba-icon-color, #9CA3AF)!important}.form-field{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)!important}:host{--cc-sf-input-border: #D1D5DB;--cc-sf-input-bg: #ffffff;--cc-sf-input-radius: 9px;--cc-sf-input-height: 44px;--cc-sf-label-color: #111827;--cc-sf-hint-color: #9CA3AF;--cc-sf-error-border: #EF4444;--cc-sf-error-bg: #FFF5F5;--cc-sf-accent-color: #6366F1;--cc-sf-input-focus-border: #6366F1;--cc-sf-input-hover-border: #A5B4FC;--cc-sf-input-placeholder: #C4C9D4;--cc-sf-input-disabled-bg: #F8F9FB;--cc-sf-input-disabled-border: #E5E7EB;--cc-sf-switch-track-on: #6366F1;--cc-sf-switch-track-off: #D1D5DB;--cc-sf-switch-thumb: #ffffff;--cc-sf-selected-color: #6366F1}.form-row{gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{display:flex;flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-label{font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#6b7280}.field-input,input.matInput,.mat-mdc-input-element{display:block;width:100%;height:var(--cc-sf-input-height)!important;padding:0 14px!important;font-family:inherit;font-size:.9rem;color:var(--cc-sf-label-color);background-color:var(--cc-sf-input-bg)!important;border:1.5px solid var(--cc-sf-input-border)!important;border-radius:var(--cc-sf-input-radius)!important;box-sizing:border-box;box-shadow:0 1px 2px #0000000a!important;transition:all .2s cubic-bezier(.4,0,.2,1)}.field-input::placeholder,input.matInput::placeholder,.mat-mdc-input-element::placeholder{font-weight:400;font-size:14px;color:var(--cc-sf-input-placeholder)}.field-input{opacity:var(--cc-sf-input-opacity, 1);line-height:var(--cc-sf-input-line-height, 1.5);transition:var(--cc-sf-input-transition, all .2s ease)}.field-input::placeholder{font-weight:var(--cc-sf-placeholder-weight, 400);font-size:var(--cc-sf-placeholder-size, 14px);line-height:var(--cc-sf-placeholder-line-height, 100%);color:var(--cc-sf-input-placeholder)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border)!important;box-shadow:0 1px 4px #6366f114!important}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border)!important;box-shadow:0 0 0 3px #6366f124,0 1px 4px #6366f11a!important;background-color:#fefeff!important}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg)!important;color:#9ca3af!important;cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border)!important;box-shadow:none!important}.field-input.is-invalid{border-color:var(--cc-sf-error-border)!important;background-color:var(--cc-sf-error-bg)!important}.field-input.is-invalid:focus{box-shadow:0 0 0 3px #ef44441f,0 1px 4px #ef44441a!important}.field-input.textarea{resize:vertical;min-height:100px;height:auto;padding:12px 16px!important}input[type=time].time-input{cursor:pointer}input[type=time].time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;filter:invert(30%)}input[type=time].time-input::-webkit-calendar-picker-indicator:hover{opacity:1}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.char-count-hint{font-style:normal;line-height:100%;letter-spacing:.02em}.radio-group.layout-column,.checkbox-group.layout-column{display:grid!important;grid-template-columns:repeat(12,1fr);gap:16px;width:100%}.radio-group.layout-row,.checkbox-group.layout-row{flex-direction:column!important;gap:12px;width:100%}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #F05A28)}.radio-label.card-item,.checkbox-label.card-item{display:flex!important;flex-direction:row-reverse!important;justify-content:space-between!important;align-items:center!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);border-radius:12px;padding:16px 20px;box-sizing:border-box;transition:all .2s ease;background:var(--cc-sf-input-bg, #ffffff);margin-bottom:0}.radio-label.card-item input,.checkbox-label.card-item input{margin-left:16px}.radio-label.card-item.selected,.checkbox-label.card-item.selected{border-color:var(--cc-sf-selected-color);background-color:#f05a280d}.radio-label.card-item .option-content .label-text,.checkbox-label.card-item .option-content .label-text,.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-label{transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-selected-color);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-selected-color)}.switch{width:50px;height:24px;display:inline-block}.switch input{opacity:0;width:0;height:0;position:absolute}.switch input:checked+.slider{background-color:var(--cc-sf-switch-track-on)!important}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{inset:0;transition:.4s;background-color:var(--cc-sf-switch-track-off);border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb);transition:.4s;border-radius:50%}.rating-group .star{transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper .password-toggle{right:.625rem;top:50%;transform:translateY(-50%);line-height:1;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-left:12px;padding-top:2px;padding-bottom:2px;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);line-height:1.4}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-accordion-instance{border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-border-radius-inner, 8px);margin-bottom:8px;overflow:hidden;transition:border-color .2s ease}.group-section-wrapper .group-accordion-instance:last-of-type{margin-bottom:0}.group-section-wrapper .group-accordion-instance .group-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--cc-sf-repeater-accordion-header-bg, #F9FAFB);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}.group-section-wrapper .group-accordion-instance .group-accordion-header:hover{background:var(--cc-sf-repeater-accordion-active-bg, #EFF6FF)}.group-section-wrapper .group-accordion-instance .group-accordion-header .instance-badge{width:22px;height:22px;border-radius:50%;background:var(--cc-sf-repeater-badge-bg, #E5E7EB);color:var(--cc-sf-repeater-badge-color, #374151);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.group-section-wrapper .group-accordion-instance .group-accordion-header .instance-title{font-size:var(--cc-sf-instance-num-size, .8125rem);font-weight:600;color:var(--cc-sf-repeater-accordion-header-color, #1F2937)}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn{background:none;border:none;cursor:pointer;color:var(--cc-sf-btn-remove-color, #E53E3E);padding:4px;border-radius:4px;line-height:1;display:flex;align-items:center;transition:background .15s ease}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-chevron{font-size:1.25rem;width:1.25rem;height:1.25rem;line-height:1.25rem;color:var(--cc-sf-instance-num-color, #4B5563)}.group-section-wrapper .group-accordion-instance .group-accordion-body{padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border-top:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .btn-add-group{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 20px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-family:inherit;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.group-section-wrapper .btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.group-section-wrapper .btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper.multi-save-active{border:none;box-shadow:none;padding:0;background:transparent}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button{color:var(--ms-btn-add-color, #3B82F6);font-weight:600;font-size:.875rem;padding:8px 12px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button:hover{color:var(--ms-btn-add-hover, #2563EB);background-color:var(--cc-sf-btn-add-hover-bg, #EFF6FF)}.group-section-wrapper.multi-save-active .group-instance{box-shadow:var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper.multi-save-active .group-instance.is-editing{padding:24px}.group-section-wrapper.multi-save-active .group-instance.is-card{cursor:pointer;transition:all .2s ease-in-out}.group-section-wrapper.multi-save-active .group-instance.is-card:hover{box-shadow:var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, .08));border-color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-title{white-space:nowrap;text-overflow:ellipsis}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-desc{line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view.is-expanded .card-content .card-desc{-webkit-line-clamp:unset;line-clamp:unset}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon{font-size:22px;width:22px;height:22px;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .2s}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-delete:hover{color:var(--cc-sf-error-border, #DC2626)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-edit:hover{color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-expand{color:var(--cc-sf-input-disabled-border, #E5E7EB)}.btn-remove{transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{background-color:var(--cc-sf-dropzone-bg, #F8FAFC);border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);transition:background-color .2s ease,border-color .2s ease}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap .dropzone-icon-pill{width:52px;height:52px;border-radius:50%;background:var(--cc-sf-dropzone-icon-bg, rgba(59, 130, 246, .1))}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:28px;width:28px;height:28px;line-height:28px;color:var(--cc-sf-accent-color, #3B82F6)}.upload-main-text{color:var(--cc-sf-label-color, #1E293B)}.upload-sub-text{color:var(--cc-sf-hint-color, #64748B)}.upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-size-badge{display:inline-block;padding:2px 8px;border-radius:20px;background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-hint-color, #6B7280);font-weight:500}.uploaded-item{background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;flex-shrink:0}.uploaded-item .file-info{min-width:0;gap:2px}.uploaded-item .file-info .file-name{white-space:nowrap;text-overflow:ellipsis}.uploaded-item .file-remove-btn{flex-shrink:0;width:32px;height:32px;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:0;display:flex;align-items:center;justify-content:center;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover:not(:disabled){color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.uploaded-item .file-remove-btn:disabled{opacity:.4;cursor:not-allowed}.uploaded-item.uploading{background:var(--cc-sf-uploaded-uploading-bg, #F8FAFC);border-color:var(--cc-sf-uploaded-uploading-border, #CBD5E1);opacity:.85}.upload-spinner{width:20px;height:20px;flex-shrink:0;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}@keyframes cc-spin{to{transform:rotate(360deg)}}.uploading-label{font-style:italic}.input-group{align-items:stretch}.input-group .field-input{flex:1;width:auto}.input-prefix+.input-group .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .field-input:has(+.input-suffix){border-top-right-radius:0;border-bottom-right-radius:0}.input-group .field-input.has-icon-right{padding-right:3rem}.input-group.readonly .field-input{cursor:default}.input-prefix,.input-suffix{display:flex!important;align-items:center;white-space:nowrap;padding:0 14px;background-color:var(--cc-sf-input-disabled-bg);border:1px solid var(--cc-sf-input-border);font-size:.875rem;color:var(--cc-sf-hint-color);-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px)}.readonly-icons{right:.875rem;top:50%;transform:translateY(-50%)}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.date-icon-wrapper{right:.5rem;top:50%;transform:translateY(-50%);pointer-events:auto}.date-icon-wrapper .mat-icon-button{width:32px;height:32px;line-height:32px}.subfields-group-wrapper .subfields-row{transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{font-weight:700}.autocomplete-wrapper .ac-input{padding-left:40px!important}.autocomplete-wrapper .ac-search-icon{left:.75rem;width:1.1rem;height:1.1rem;line-height:1.1rem;z-index:1;transition:color var(--cc-sf-input-transition, .2s ease)}.autocomplete-wrapper .ac-clear-btn{right:.6rem;transition:color .15s ease,background .15s ease}.autocomplete-wrapper .ac-clear-btn mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.autocomplete-wrapper .ac-clear-btn:hover{color:var(--cc-sf-label-color, #374151);background:var(--cc-sf-input-disabled-bg, #F3F4F6)}.autocomplete-wrapper .ac-clear-btn:focus{outline:none}.autocomplete-wrapper:focus-within .ac-search-icon{color:var(--cc-sf-accent-color, #3B82F6)}.autocomplete-wrapper.is-invalid .ac-input{border-color:var(--cc-sf-error-border)!important;background-color:var(--cc-sf-error-bg)}.autocomplete-wrapper.readonly .ac-input{background-color:var(--cc-sf-input-disabled-bg);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border)!important}.ac-no-results{font-style:italic}.mu-layout{grid-template-columns:1fr 1fr;gap:32px}@media(max-width:768px){.mu-layout{grid-template-columns:1fr}}.mu-title{font-weight:700;line-height:1.3}.mu-badge{white-space:nowrap;flex-shrink:0}.mu-description{line-height:1.6}.mu-feature-item .mu-check{width:16px;height:16px;line-height:16px;flex-shrink:0}.mu-right{min-height:260px}.mu-right-empty{min-height:250px;max-width:400px;box-shadow:0 2px 10px #0000000d;transition:box-shadow .2s ease}.mu-right-empty:hover{cursor:pointer;box-shadow:0 4px 16px #0000001a}.mu-right-empty .mu-right-empty-icon{width:52px;height:52px;line-height:52px;opacity:.3}.mu-right-empty p{margin:0;font-size:.85rem}.media-add-container{display:inline-block}.media-add-container ::ng-deep button{display:flex;align-items:center;gap:6px}.media-add-container ::ng-deep button .menu-chevron{width:18px;height:18px;line-height:18px;transition:transform .2s ease}.media-dropdown{top:calc(100% + 6px);left:0;z-index:200;min-width:240px;box-shadow:var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, .12));animation:mu-fade-in .15s ease}@keyframes mu-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.media-dropdown-item{transition:background .15s ease}.media-dropdown-item:last-child{border-bottom:none}.media-dropdown-item:hover{background:var(--cc-sf-dropzone-hover-bg, #F0F9FF)}.media-drop-icon{width:36px;height:36px;flex-shrink:0}.media-drop-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.media-drop-icon--video{background:var(--mu-icon-video-bg, #FFF0F0);color:var(--mu-icon-video-color, #EF4444)}.media-drop-icon--device{background:var(--mu-icon-device-bg, #EFF6FF);color:var(--mu-icon-device-color, #3B82F6)}.media-drop-icon--library{background:var(--mu-icon-library-bg, #F0FDF4);color:var(--mu-icon-library-color, #22C55E)}.media-drop-text{gap:2px}.youtube-input-panel{animation:mu-fade-in .18s ease}.youtube-panel-label mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--mu-icon-video-color, #EF4444)}.youtube-input-row{align-items:stretch}.media-menu-backdrop{position:fixed;inset:0;z-index:100}.media-upload-status{animation:mu-fade-in .2s ease}.media-upload-status .status-icon{width:18px;height:18px;line-height:18px}.media-carousel-main{max-width:400px;height:var(--mu-carousel-height, 250px)}.carousel-viewer{inset:0}.carousel-viewer .carousel-image{object-fit:cover}.carousel-viewer .carousel-spinner{width:36px;height:36px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.carousel-nav{top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;box-shadow:0 2px 8px #0003;transition:background .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carousel-nav mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:#1e293b}.carousel-nav:hover:not(:disabled){background:#fff}.carousel-nav:disabled{opacity:.3;cursor:not-allowed}.carousel-nav--prev{left:12px}.carousel-nav--next{right:12px}.carousel-remove-btn{top:10px;right:10px;z-index:10;width:32px;height:32px;transition:background .2s ease}.carousel-remove-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.carousel-remove-btn:hover:not(:disabled){background:#dc2626d9}.carousel-remove-btn:disabled{opacity:.4;cursor:not-allowed}.carousel-dots{bottom:10px;left:50%;transform:translate(-50%);z-index:10}.carousel-dot{width:8px;height:8px;transition:background .2s ease,transform .2s ease}.carousel-dot.active{background:#fff;transform:scale(1.3)}.media-thumbnail-strip{max-width:400px;overflow-x:auto}.media-thumbnail-strip::-webkit-scrollbar{height:4px}.media-thumbnail-strip::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:2px}.media-thumb{flex-shrink:0;width:72px;height:52px;transition:border-color .2s ease,transform .15s ease}.media-thumb.active{border-color:var(--mu-thumb-active-border, var(--cc-sf-accent-color, #3B82F6));transform:scale(1.04)}.media-thumb:hover:not(.active){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.media-thumb .thumb-img{object-fit:cover}.media-thumb .thumb-yt-placeholder mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}.media-thumb .thumb-uploading .thumb-spinner{width:20px;height:20px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.media-library-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mu-fade-in .2s ease}.media-library-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:min(90vw,780px);max-height:85vh;box-shadow:var(--mu-modal-shadow, 0 20px 60px rgba(0, 0, 0, .2));animation:mu-modal-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes mu-modal-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.library-modal-header{flex-shrink:0}.library-modal-title{font-weight:700}.library-modal-subtitle{line-height:1.5;max-width:600px}.library-close-btn{width:32px;height:32px;transition:background .15s ease,color .15s ease}.library-close-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-close-btn:hover{background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-label-color, #374151)}.library-loading mat-icon,.library-empty mat-icon{font-size:40px;width:40px;height:40px;line-height:40px;opacity:.5}.lib-spinner{width:36px;height:36px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.library-error{flex-shrink:0}.library-error mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-grid{grid-template-columns:repeat(5,1fr);overflow-y:auto}.library-grid::-webkit-scrollbar{width:8px}.library-grid::-webkit-scrollbar-track{background:#f1f1f1}.library-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px;border:2px solid #F1F1F1}.library-grid-item{aspect-ratio:1/1;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.library-grid-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.library-grid-item.selected{border-color:var(--cc-sf-accent-color, #3B82F6)}.library-grid-item.selected .library-grid-img{opacity:.7}.library-grid-item:hover .library-overlay-hover{opacity:1}.library-grid-img{object-fit:cover}.library-overlay-hover{inset:0;opacity:0;transition:opacity .15s ease}.library-check{top:6px;right:6px;width:22px;height:22px;box-shadow:0 1px 4px #00000026}.library-check mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.library-modal-footer{flex-shrink:0}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary{background-color:var(--cc-sf-accent-color, #3B82F6)!important;border-color:var(--cc-sf-accent-color, #3B82F6)!important;color:#fff!important;font-weight:600;padding-left:32px;padding-right:32px}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:hover{background-color:var(--cc-sf-btn-primary-hover-bg, #2563EB)!important}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:disabled{background-color:#93c5fd!important;cursor:not-allowed}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline{font-weight:600;padding-left:24px;padding-right:24px;border-color:#d1d5db;color:#374151}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline:hover{background-color:#f9fafb}.location-subtitle{line-height:1.5}.loc-tab-btn ::ng-deep button{width:100%}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning){background-color:var(--cc-sf-input-bg, #ffffff)!important;color:var(--cc-sf-label-color, #000000)!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning):hover{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}.loc-venue-item{transition:box-shadow .15s ease,border-color .15s ease}.loc-venue-item:hover{box-shadow:0 2px 8px #0000000f;border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.loc-venue-search-icon{width:18px;height:18px;line-height:18px;flex-shrink:0}.loc-venue-text{white-space:nowrap;text-overflow:ellipsis}.loc-action-btn{transition:background .15s ease,color .15s ease;flex-shrink:0}.loc-action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.loc-action-btn.loc-delete-btn{color:var(--loc-delete-color, #E53E3E)}.loc-action-btn.loc-delete-btn:hover{background:var(--cc-sf-error-bg, #FEF2F2)}.loc-action-btn.loc-edit-btn{color:var(--cc-sf-hint-color, #9CA3AF)}.loc-action-btn.loc-edit-btn:hover{color:var(--cc-sf-input-focus-border, #3B82F6);background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)}.loc-search-icon{left:.75rem;width:1.1rem;height:1.1rem;line-height:1.1rem;z-index:1}.loc-suggestions-panel{top:calc(100% + 4px);left:0;right:0;z-index:300;box-shadow:0 8px 24px #0000001a;animation:mu-fade-in .15s ease;max-height:260px;overflow-y:auto}.loc-suggestion-item{transition:background .12s ease}.loc-suggestion-item:hover,.loc-suggestion-item:focus{background:var(--loc-suggestion-hover-bg, #F0F9FF)}.loc-suggestion-item:not(:last-child){border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)}.loc-suggestion-icon{width:18px;height:18px;line-height:18px;flex-shrink:0}.loc-suggestion-text{white-space:nowrap;text-overflow:ellipsis}.loc-add-btn{transition:opacity .15s ease}.loc-add-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.loc-add-btn:hover{opacity:.8}.loc-map-container{box-shadow:0 2px 10px #0000000f}.loc-tba-panel{min-height:120px}.loc-tba-icon{width:40px;height:40px;line-height:40px;opacity:.6}.loc-tba-text{line-height:1.6;max-width:360px}\n"] }]
+            args: [{ selector: 'lib-form-field', standalone: false, template: "<div class=\"form-field mb-16px\" *ngIf=\"isVisible\" [class.has-error]=\"errorMessage\">\r\n\r\n  <!-- \u2550\u2550 ROW Layout \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRow\" class=\"form-row grid-row\">\r\n    <ng-container *ngFor=\"let child of config.children\">\r\n      <div class=\"row-field\" [style.gridColumn]=\"'span ' + getChildColSpan(child)\" *ngIf=\"child.isEnabled !== false\">\r\n        <lib-form-field [config]=\"child\" [controller]=\"controller\" [formGroup]=\"formGroup\" [allowMulti]=\"allowMulti\">\r\n        </lib-form-field>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 allowMulti (repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig?.allowMulti\"\r\n    class=\"group-section-wrapper mb-20px\"\r\n    [class.multi-save-active]=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n\r\n    <!-- Multi-Save: header row with label + top-right Add button -->\r\n    <div class=\"multi-save-header d-flex justify-content-between align-items-center mb-24\"\r\n      *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <h3 class=\"group-label\" *ngIf=\"config.sectionConfig?.label\">{{ config.sectionConfig!.label }}</h3>\r\n      <lib-button [variant]=\"'outline'\" [icon]=\"{type: 'material', value: 'add'}\" (click)=\"addGroupInstance()\"\r\n        class=\"btn-add-multi\">\r\n        {{ addMultiLabel }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- Standard heading (non-multiSave) -->\r\n    <h3 class=\"group-label\"\r\n      *ngIf=\"config.sectionConfig?.label && !config.sectionConfig?.multiSaveConfig?.active\">{{\r\n      config.sectionConfig!.label }}</h3>\r\n\r\n    <!-- \u2500\u2500 Standard (non-multiSave) repeater: accordion instances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"!config.sectionConfig?.multiSaveConfig?.active\">\r\n      <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\"\r\n        class=\"group-accordion-instance\"\r\n        [class.is-expanded]=\"isGroupExpanded(i)\">\r\n\r\n        <!-- Accordion header -->\r\n        <div class=\"group-accordion-header\" (click)=\"toggleGroupAccordion(i)\"\r\n          role=\"button\" [attr.aria-expanded]=\"isGroupExpanded(i)\">\r\n          <div class=\"accordion-header-left d-flex align-items-center gap-10\">\r\n            <span class=\"instance-badge\">{{ i + 1 }}</span>\r\n            <span class=\"instance-title\">{{ config.sectionConfig!.label }} #{{ i + 1 }}</span>\r\n          </div>\r\n          <div class=\"accordion-header-right d-flex align-items-center gap-6\">\r\n            <button type=\"button\" class=\"accordion-remove-btn\"\r\n              *ngIf=\"instanceList.length > 1\"\r\n              (click)=\"$event.stopPropagation(); removeGroupInstance(i)\"\r\n              aria-label=\"Remove\">\r\n              <mat-icon>delete_outline</mat-icon>\r\n            </button>\r\n            <mat-icon class=\"accordion-chevron\">\r\n              {{ isGroupExpanded(i) ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n            </mat-icon>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Accordion body -->\r\n        <div class=\"group-accordion-body\" *ngIf=\"isGroupExpanded(i)\">\r\n          <div class=\"group-fields sf-grid\">\r\n            <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n              <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\"\r\n                *ngIf=\"field.isEnabled !== false\">\r\n                <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\"\r\n                  [allowMulti]=\"true\">\r\n                </lib-form-field>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Full-width dashed Add button -->\r\n      <button type=\"button\" class=\"btn-add-group\" (click)=\"addGroupInstance()\">\r\n        <mat-icon>add</mat-icon> {{ addLabel }} {{ config.sectionConfig!.label }}\r\n      </button>\r\n    </ng-container>\r\n\r\n    <!-- \u2500\u2500 MultiSave: card instances \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <ng-container *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n      <div *ngFor=\"let instance of instanceList; trackBy: trackByInstanceId; let i = index\"\r\n        class=\"group-instance position-relative mb-16 overflow-hidden\"\r\n        [class.is-editing]=\"instance.isEditing\"\r\n        [class.is-card]=\"!instance.isEditing\">\r\n\r\n        <!-- Edit / new form view -->\r\n        <div [hidden]=\"!instance.isEditing\">\r\n          <div class=\"group-fields sf-grid p-24\">\r\n            <ng-container *ngFor=\"let field of config.sectionConfig!.children\">\r\n              <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\"\r\n                *ngIf=\"field.isEnabled !== false\">\r\n                <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instance.fg\"\r\n                  [allowMulti]=\"true\">\r\n                </lib-form-field>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n\r\n          <!-- Save / Cancel -->\r\n          <div\r\n            class=\"group-footer d-flex justify-content-between align-items-center gap-16 mt-24 pt-20 bt-1px-solid-E5E7EB p-0-24\"\r\n            *ngIf=\"config.sectionConfig?.multiSaveConfig?.active\">\r\n            <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"multiSaveError\">{{ multiSaveError }}</span>\r\n            <div class=\"footer-actions d-flex gap-12\">\r\n              <lib-button [variant]=\"'outline'\" (click)=\"cancelGroupInstance(i)\">Cancel</lib-button>\r\n              <lib-button [variant]=\"'primary'\" (click)=\"saveGroupInstance(i)\">Save</lib-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Card view (saved state) -->\r\n        <ng-container *ngIf=\"!instance.isEditing\">\r\n          <div class=\"card-view d-flex justify-content-between align-items-center p-18px-24px\"\r\n            [class.is-expanded]=\"instance.isExpanded\">\r\n            <div class=\"card-content flex-1 d-flex flex-column gap-4 overflow-hidden\">\r\n              <span class=\"card-title font-weight-600 overflow-hidden fs-1rem c-111827\">{{\r\n                instance.fg.get(config.sectionConfig!.multiSaveConfig!.summaryField || '')?.value\r\n                || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"card-actions d-flex align-items-center gap-16 ml-20\">\r\n              <mat-icon class=\"icon-delete\" (click)=\"removeGroupInstance(i, true)\">delete_outline</mat-icon>\r\n              <mat-icon class=\"icon-edit\" (click)=\"editGroupInstance(i)\">edit_outline</mat-icon>\r\n              <mat-icon class=\"icon-expand\" (click)=\"toggleExpandGroupInstance(i)\">\r\n                {{ instance.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n              </mat-icon>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 GROUP \u2014 single (non-repeater) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGroup && config.sectionConfig && !config.sectionConfig.allowMulti\"\r\n    class=\"group-section-wrapper mb-20px\">\r\n    <h3 class=\"group-label\" *ngIf=\"config.sectionConfig.label\">{{ config.sectionConfig.label }}</h3>\r\n    <div class=\"group-fields sf-grid\">\r\n      <ng-container *ngFor=\"let field of config.sectionConfig.children\">\r\n        <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\" *ngIf=\"field.isEnabled !== false\">\r\n          <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"groupFormGroup\" [allowMulti]=\"false\">\r\n          </lib-form-field>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Text Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTextField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <textarea *ngIf=\"config.subType === 'LONG'\" class=\"field-input textarea\" [placeholder]=\"config.placeholder || ''\"\r\n      [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\" rows=\"4\">\r\n    </textarea>\r\n\r\n    <!-- Password input with show/hide toggle -->\r\n    <div *ngIf=\"config.subType === 'PASSWORD'\" class=\"password-wrapper position-relative d-flex align-items-center\">\r\n      <input [type]=\"showPassword ? 'text' : 'password'\" class=\"field-input password-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n      <button type=\"button\"\r\n        class=\"password-toggle position-absolute cursor-pointer d-flex align-items-center justify-content-center b-none border-none c-6B7280 p-0-25rem\"\r\n        (click)=\"showPassword = !showPassword\" tabindex=\"-1\"\r\n        [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\">\r\n        <mat-icon class=\"eye-icon\">{{ showPassword ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix br-none\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input *ngIf=\"config.subType !== 'LONG' && config.subType !== 'PASSWORD'\"\r\n        [type]=\"config.subType === 'EMAIL' ? 'email' : config.subType === 'PHONE' ? 'tel' : 'text'\" class=\"field-input\"\r\n        [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\"\r\n        [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix d-flex align-items-center font-weight-500\" *ngIf=\"config.suffix\">{{ config.suffix\r\n        }}</span>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint font-poppins font-weight-400 text-14 text-right c-6B7280\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Number Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isNumberField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <span class=\"input-prefix br-none\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n\r\n      <input type=\"number\" class=\"field-input\" [placeholder]=\"config.placeholder || ''\" [formControlName]=\"config.name!\"\r\n        [min]=\"config.numberConfig?.min ?? null\" [max]=\"config.numberConfig?.max ?? null\"\r\n        [step]=\"config.numberConfig?.step || 1\" [class.is-invalid]=\"errorMessage\" [readonly]=\"config.readonly\">\r\n\r\n      <span class=\"input-suffix d-flex align-items-center font-weight-500\" *ngIf=\"config.suffix\">{{ config.suffix\r\n        }}</span>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Date Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDateField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <input matInput [matDatepicker]=\"datePicker\" class=\"field-input date-input has-icon-right\"\r\n        [formControlName]=\"config.name!\" [min]=\"config.dateConfig?.minDate\" [max]=\"config.dateConfig?.maxDate\"\r\n        [class.is-invalid]=\"errorMessage\" [placeholder]=\"config.placeholder || ''\" [readonly]=\"config.readonly\"\r\n        (click)=\"!config.readonly && datePicker.open()\">\r\n      <div class=\"date-icon-wrapper position-absolute d-flex align-items-center justify-content-center\"\r\n        *ngIf=\"!config.readonly\">\r\n        <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n      </div>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Time Input \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isTimeField\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"input-group position-relative d-flex w-100\" [class.readonly]=\"config.readonly\">\r\n      <input type=\"time\" class=\"field-input time-input\" [formControlName]=\"config.name!\"\r\n        [class.is-invalid]=\"errorMessage\" [readonly]=\"!!config.readonly\">\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Autocomplete \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isAutocomplete\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Hidden real control (stores the code value) -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <div class=\"autocomplete-wrapper position-relative d-flex align-items-center w-100\"\r\n      [class.is-invalid]=\"errorMessage\" [class.readonly]=\"config.readonly\">\r\n      <!-- Search icon -->\r\n      <mat-icon class=\"ac-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">search</mat-icon>\r\n\r\n      <input class=\"field-input ac-input\" [formControl]=\"autocompleteInputCtrl\" [matAutocomplete]=\"auto\"\r\n        [placeholder]=\"config.placeholder || 'Search\u2026'\" [readonly]=\"!!config.readonly\" [class.is-invalid]=\"errorMessage\"\r\n        (blur)=\"onAutocompleteClear()\" autocomplete=\"off\">\r\n\r\n      <!-- Clear button -->\r\n      <button type=\"button\"\r\n        class=\"ac-clear-btn position-absolute d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none c-9CA3AF p-0-2rem\"\r\n        *ngIf=\"autocompleteInputCtrl.value && !config.readonly\"\r\n        (click)=\"autocompleteInputCtrl.setValue(''); updateValue(null)\" tabindex=\"-1\" aria-label=\"Clear\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" [panelWidth]=\"'auto'\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.label\"\r\n          (onSelectionChange)=\"onAutocompleteSelected(option)\">\r\n          <span class=\"ac-option-label\">{{ option.label }}</span>\r\n\r\n          <!-- Dynamic display fields (image / email / phone / text) -->\r\n          <div class=\"ac-display-fields d-flex flex-wrap gap-6 mt-2\" *ngIf=\"option['displayMeta']?.length\">\r\n            <ng-container *ngFor=\"let field of option['displayMeta']\">\r\n\r\n              <!-- Image avatar -->\r\n              <span *ngIf=\"field.type === 'image' && field.value\" class=\"ac-df-item ac-df-image\">\r\n                <img [src]=\"field.value\" [alt]=\"field.label || 'image'\" class=\"ac-df-avatar\">\r\n              </span>\r\n\r\n              <!-- Email -->\r\n              <span *ngIf=\"field.type === 'email' && field.value\" class=\"ac-df-item ac-df-chip\">\r\n                <mat-icon class=\"ac-df-icon\">mail_outline</mat-icon>\r\n                <span *ngIf=\"field.label\" class=\"ac-df-label\">{{ field.label }}</span>\r\n                {{ field.value }}\r\n              </span>\r\n\r\n              <!-- Phone -->\r\n              <span *ngIf=\"field.type === 'phone' && field.value\" class=\"ac-df-item ac-df-chip\" [class]=\"field.className\">\r\n                <mat-icon class=\"ac-df-icon\">phone</mat-icon>\r\n                <span *ngIf=\"field.label\" class=\"ac-df-label\">{{ field.label }}</span>\r\n                {{ field.value }}\r\n              </span>\r\n\r\n              <!-- Custom / Icon-based / Generic Text -->\r\n              <span *ngIf=\"field.type !== 'image' && field.type !== 'email' && field.type !== 'phone' && field.value\" \r\n                class=\"ac-df-item\" [class.ac-df-chip]=\"!!field.icon\" [class]=\"field.className\">\r\n                <mat-icon class=\"ac-df-icon\" *ngIf=\"field.icon\">{{ field.icon }}</mat-icon>\r\n                <span *ngIf=\"field.label\" class=\"ac-df-label\">{{ field.label }}</span>\r\n                {{ field.value }}\r\n              </span>\r\n\r\n            </ng-container>\r\n          </div>\r\n        </mat-option>\r\n        <mat-option *ngIf=\"filteredOptions.length === 0\" disabled class=\"ac-no-results fs-0-8125rem c-6B7280\">\r\n          No results found\r\n        </mat-option>\r\n      </mat-autocomplete>\r\n\r\n      <div class=\"readonly-icons position-absolute d-flex gap-8 pe-none\" *ngIf=\"config.readonly\">\r\n        <mat-icon class=\"lock-icon\">lock</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Dropdown \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isDropdown\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <select *ngIf=\"config.subType === 'SINGLE'\" class=\"field-input\" [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option [ngValue]=\"null\" disabled selected>{{ config.placeholder || 'Select' }}</option>\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"config.subType === 'MULTIPLE'\" class=\"field-input\" multiple [formControlName]=\"config.name!\"\r\n      [class.is-invalid]=\"errorMessage\">\r\n      <option *ngFor=\"let option of config.optionConfig?.optionList\" [value]=\"option.code\">\r\n        {{ option.label }}\r\n      </option>\r\n    </select>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Radio \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRadio\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"radio-group\" [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\" class=\"radio-label\"\r\n        [class.card-item]=\"config.subType === 'CARD'\"\r\n        [class.selected]=\"formGroup.get(config.name!)?.value === option.code\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"radio\" [formControlName]=\"config.name!\" [value]=\"option.code\">\r\n        <div class=\"option-content d-flex flex-column gap-4 flex-1 text-left\">\r\n          <span class=\"label-text text-16 c-1F2937\">{{ option.label }}</span>\r\n          <span class=\"option-hint text-13 color-gray\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Checkbox \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isCheckbox\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label && config.subType === 'LIST'\"\r\n      class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div *ngIf=\"config.subType === 'BOOL'\" class=\"checkbox-single\">\r\n      <label class=\"checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span>{{ config.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <div *ngIf=\"config.subType === 'LIST' || config.subType === 'CARD'\" class=\"checkbox-group d-flex flex-column gap-8\"\r\n      [class.is-invalid]=\"errorMessage\"\r\n      [class]=\"config.optionConfig?.layout ? 'layout-' + config.optionConfig!.layout.toLowerCase() : ''\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\"\r\n        class=\"checkbox-label d-flex align-items-center gap-8 cursor-pointer fs-0-875rem c-111827\"\r\n        [class.card-item]=\"config.subType === 'CARD'\" [class.selected]=\"isChecked(option.code)\"\r\n        [style.gridColumn]=\"config.optionConfig?.layout?.toUpperCase() === 'COLUMN' ? 'span ' + getOptionColSpan(option) : null\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\">\r\n        <div class=\"option-content d-flex flex-column gap-4 flex-1 text-left\">\r\n          <span class=\"label-text text-16 c-1F2937\">{{ option.label }}</span>\r\n          <span class=\"option-hint text-13 color-gray\" *ngIf=\"option.hint\">{{ option.hint }}</span>\r\n        </div>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Chip \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isChip\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"chip-group d-flex flex-wrap gap-8\" [class.is-invalid]=\"errorMessage\">\r\n      <label *ngFor=\"let option of config.optionConfig?.optionList\"\r\n        class=\"chip-label cursor-pointer p-6px-14px b-ffffff c-374151 b-1px-solid-D1D5DB br-20px fs-0-875rem\"\r\n        [class.selected]=\"isChecked(option.code)\">\r\n        <input type=\"checkbox\" [checked]=\"isChecked(option.code)\" [disabled]=\"!!config.disabled\"\r\n          (change)=\"onCheckboxListChange(option.code, $any($event.target).checked)\" hidden>\r\n        <span>{{ option.label }}</span>\r\n      </label>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Switch \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isSwitch\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label class=\"switch-container d-flex justify-content-between align-items-center cursor-pointer\">\r\n      <span class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">{{ config.label }}</span>\r\n      <div class=\"switch position-relative\">\r\n        <input type=\"checkbox\" [formControlName]=\"config.name!\" [class.is-invalid]=\"errorMessage\">\r\n        <span class=\"slider position-absolute cursor-pointer\"></span>\r\n      </div>\r\n    </label>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rich Text \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRichText\" class=\"field-wrapper component-rich-text d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rich-text-container\" [class.is-invalid]=\"errorMessage\">\r\n      <quill-editor [formControlName]=\"config.name!\" class=\"rich-text-editor d-block w-100\"\r\n        [placeholder]=\"config.richTextConfig?.placeholder || config.placeholder || ''\"\r\n        [styles]=\"{height: config.richTextConfig?.height || '200px'}\">\r\n      </quill-editor>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n    <div class=\"char-count-hint font-poppins font-weight-400 text-14 text-right c-6B7280\" *ngIf=\"showCharCount\">\r\n      {{ remainingCharacters }} characters remaining\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Rating \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isRating\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <div class=\"rating-group d-flex gap-4\" [class.is-invalid]=\"errorMessage\">\r\n      <span *ngFor=\"let star of getStarArray()\" class=\"star d-inline-flex align-items-center cursor-pointer\"\r\n        [class.filled]=\"isStarFilled(star)\" [class.half]=\"isStarHalf(star)\" (click)=\"onRatingChange(star, $event)\">\r\n        <mat-icon>{{ isStarFilled(star) || isStarHalf(star) ? 'star' : 'star_border' }}</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Generated Field (read-only) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isGenerated\" class=\"field-wrapper d-flex flex-column gap-6\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">{{ config.label\r\n      }}</label>\r\n    <div class=\"generated-value fs-0-875rem p-0-625rem-0-875rem b-F3F4F6 b-1px-solid-E5E7EB br-8px c-6B7280\">{{ value ||\r\n      '-' }}</div>\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint\">{{ config.hint }}</span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 File Upload \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isFileUpload\" class=\"field-wrapper d-flex flex-column gap-6\" [formGroup]=\"formGroup\">\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n\r\n    <!-- Drop Zone -->\r\n    <div\r\n      class=\"upload-drop-zone d-flex flex-column align-items-center justify-content-center gap-8 cursor-pointer text-center p-32px-24px us-none\"\r\n      [class.drag-over]=\"isDragOver\" [class.has-files]=\"value?.length\" [class.is-invalid]=\"errorMessage\"\r\n      (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onFileDrop($event)\"\r\n      (click)=\"fileInput.click()\">\r\n\r\n      <!-- Icon with accent-colour pill background -->\r\n      <div class=\"upload-icon-wrap mb-4\">\r\n        <div class=\"dropzone-icon-pill d-flex align-items-center justify-content-center\">\r\n          <mat-icon class=\"upload-cloud-icon\">cloud_upload</mat-icon>\r\n        </div>\r\n      </div>\r\n\r\n      <p class=\"upload-main-text font-weight-600 m-0 fs-0-9rem\">Drag &amp; drop files here</p>\r\n      <p class=\"upload-sub-text m-0 fs-0-8rem c-64748B\">or <span class=\"upload-link\">Browse files</span></p>\r\n      <p class=\"upload-hint-text m-0 fs-0-78rem c-64748B\" *ngIf=\"config.attachmentConfig?.acceptLabel\">\r\n        Supported: <span class=\"upload-formats font-weight-500\">{{ config.attachmentConfig!.acceptLabel }}</span>\r\n      </p>\r\n      <p class=\"upload-hint-text m-0 fs-0-78rem c-64748B\" *ngIf=\"!config.attachmentConfig?.acceptLabel && config.hint\">\r\n        {{ config.hint }}\r\n      </p>\r\n      <span class=\"upload-size-badge fs-0-72rem\" *ngIf=\"config.attachmentConfig?.maxSizeMB\">\r\n        Max {{ config.attachmentConfig!.maxSizeMB }}MB\r\n      </span>\r\n\r\n      <!-- Hidden native file input -->\r\n      <input #fileInput type=\"file\" hidden [attr.multiple]=\"config.attachmentConfig?.multiple ? true : null\"\r\n        [attr.accept]=\"config.attachmentConfig?.accept || null\" (change)=\"onFileSelected($event)\">\r\n    </div>\r\n\r\n    <!-- Uploaded file list -->\r\n    <div class=\"uploaded-list d-flex flex-column gap-8 mt-10\" *ngIf=\"value?.length\">\r\n      <div *ngFor=\"let f of value; let i = index\"\r\n        class=\"uploaded-item d-flex align-items-center gap-10 p-10px-14px br-8px\"\r\n        [class.uploading]=\"f.isUploading\">\r\n\r\n        <!-- Uploading spinner -->\r\n        <ng-container *ngIf=\"f.isUploading; else fileReady\">\r\n          <div class=\"upload-spinner rounded-50 b-2px-solid-E2E8F0\"></div>\r\n          <div class=\"file-info flex-1 d-flex flex-column\">\r\n            <span class=\"file-name font-weight-500 overflow-hidden fs-0-85rem\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size uploading-label fs-0-72rem\">Uploading...</span>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <!-- Normal state once upload is done -->\r\n        <ng-template #fileReady>\r\n          <mat-icon class=\"file-type-icon\">{{ getFileIcon(f.type) }}</mat-icon>\r\n          <img *ngIf=\"f.type?.startsWith('image') && f.dataUrl\" [src]=\"f.dataUrl\" class=\"file-thumb rounded-4\"\r\n            alt=\"preview\">\r\n          <div class=\"file-info flex-1 d-flex flex-column\">\r\n            <span class=\"file-name font-weight-500 overflow-hidden fs-0-85rem\" [title]=\"f.name\">{{ f.name }}</span>\r\n            <span class=\"file-size fs-0-72rem\">{{ formatFileSize(f.size) }}</span>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Compact icon-only remove button -->\r\n        <button type=\"button\" class=\"file-remove-btn d-flex align-items-center justify-content-center rounded-50\"\r\n          [disabled]=\"f.isUploading\" (click)=\"!f.isUploading && removeUploadedFile(i)\"\r\n          aria-label=\"Remove file\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Validation / file errors -->\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"fileUploadError\">{{ fileUploadError }}</span>\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage && !fileUploadError\">{{ errorMessage }}</span>\r\n    <span class=\"field-hint c-6B7280 fs-0-75rem\"\r\n      *ngIf=\"config.hint && !errorMessage && !fileUploadError && !config.attachmentConfig?.acceptLabel\">\r\n      {{ config.hint }}\r\n    </span>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Media Upload (Type 2) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isMediaUpload\" class=\"field-wrapper media-upload-wrapper d-flex flex-column gap-6 p-0 border-none b-none\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <!-- Hidden file input lives outside *ngIf \u2014 triggered via ViewChild -->\r\n    <input #mediaDeviceInput type=\"file\" hidden multiple accept=\"image/*\" (change)=\"onMediaFileSelected($event)\">\r\n\r\n    <!-- Two-column layout -->\r\n    <div class=\"mu-layout d-grid align-items-start\">\r\n\r\n      <!-- \u2500\u2500 LEFT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-left d-flex flex-column gap-20\">\r\n\r\n        <!-- Header: title + max-items badge -->\r\n        <div class=\"mu-header d-flex align-items-start flex-wrap gap-10\">\r\n          <h3 class=\"mu-title m-0 c-111827 fs-1-35rem\">\r\n            {{ config.label }}\r\n            <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n          </h3>\r\n          <span\r\n            class=\"mu-badge d-inline-flex align-items-center rounded-20 color-white font-weight-600 fs-0-72rem p-4px-12px b-111827\"\r\n            *ngIf=\"config.attachmentConfig?.maxFiles\">\r\n            {{ controller.labels['LBL_MEDIA_MAX_PREFIX'] || 'Maximum' }}\r\n            {{ config.attachmentConfig?.maxFiles }}\r\n            {{ controller.labels['LBL_MEDIA_MAX_SUFFIX'] || 'Image & Videos' }}\r\n          </span>\r\n        </div>\r\n\r\n        <!-- Description -->\r\n        <p class=\"mu-description m-0 fs-0-875rem c-6B7280\" *ngIf=\"config.attachmentConfig?.description\">\r\n          {{ config.attachmentConfig?.description }}\r\n        </p>\r\n        <p class=\"mu-description m-0 fs-0-875rem c-6B7280\"\r\n          *ngIf=\"!config.attachmentConfig?.description && controller.labels['LBL_MEDIA_DESC']\">\r\n          {{ controller.labels['LBL_MEDIA_DESC'] }}\r\n        </p>\r\n\r\n        <!-- Feature bullet list -->\r\n        <ul class=\"mu-features m-0 p-0 d-flex flex-column gap-8 ls-none\"\r\n          *ngIf=\"config.attachmentConfig?.features?.length || controller.labels['LBL_MEDIA_FEATURE_1']\">\r\n          <ng-container *ngIf=\"config.attachmentConfig?.features?.length\">\r\n            <li *ngFor=\"let f of config.attachmentConfig?.features\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ f }}\r\n            </li>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!config.attachmentConfig?.features?.length\">\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_1']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_1'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_2']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_2'] }}\r\n            </li>\r\n            <li *ngIf=\"controller.labels['LBL_MEDIA_FEATURE_3']\"\r\n              class=\"mu-feature-item d-flex align-items-center gap-8 fs-0-875rem c-374151\">\r\n              <mat-icon class=\"mu-check text-16 c-3B82F6\">check</mat-icon>{{ controller.labels['LBL_MEDIA_FEATURE_3'] }}\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n\r\n        <!-- Backdrop to close dropdown on outside click -->\r\n        <div class=\"media-menu-backdrop\" *ngIf=\"showMediaMenu\"\r\n          (click)=\"$event.stopPropagation(); showMediaMenu = false\"></div>\r\n\r\n        <!-- Add Media button + dropdown -->\r\n        <div class=\"media-add-container position-relative\" (click)=\"showMediaMenu = !showMediaMenu\">\r\n          <lib-button id=\"btn-add-media-{{ config.name }}\" [variant]=\"'warning'\"\r\n            [icon]=\"{type: 'material', value: 'add_photo_alternate'}\">\r\n            {{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}\r\n            <mat-icon class=\"menu-chevron fs-18px\">add</mat-icon>\r\n          </lib-button>\r\n\r\n          <div class=\"media-dropdown position-absolute rounded-12 overflow-hidden b-ffffff b-1px-solid-E5E7EB\"\r\n            *ngIf=\"showMediaMenu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\r\n            <!-- Video -->\r\n            <button id=\"btn-media-video-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuVideo(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--video d-flex align-items-center justify-content-center rounded-8\"><mat-icon>videocam</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_VIDEO'] || 'Video' }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_VIDEO_DESC'] || 'Add\r\n                  YouTube URL'\r\n                  }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Device -->\r\n            <button id=\"btn-media-device-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuDevice(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--device d-flex align-items-center justify-content-center rounded-8\"><mat-icon>upload</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_DEVICE'] || 'Upload from device'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_DEVICE_DESC'] ||\r\n                  'Select images from your\r\n                  computer' }}</span>\r\n              </span>\r\n            </button>\r\n            <!-- Library -->\r\n            <button id=\"btn-media-library-{{ config.name }}\" type=\"button\"\r\n              class=\"media-dropdown-item d-flex align-items-center gap-12 w-100 cursor-pointer text-left b-none border-none p-12px-16px bb-1px-solid-F3F4F6\"\r\n              (click)=\"onMediaMenuLibrary(); showMediaMenu = false\" role=\"menuitem\">\r\n              <span\r\n                class=\"media-drop-icon media-drop-icon--library d-flex align-items-center justify-content-center rounded-8\"><mat-icon>photo_library</mat-icon></span>\r\n              <span class=\"media-drop-text d-flex flex-column flex-1\">\r\n                <span class=\"media-drop-label font-weight-600 fs-0-875rem c-111827\">{{\r\n                  controller.labels['LBL_MEDIA_LIBRARY'] || 'Upload from library'\r\n                  }}</span>\r\n                <span class=\"media-drop-desc c-6B7280 fs-0-75rem\">{{ controller.labels['LBL_MEDIA_LIBRARY_DESC'] ||\r\n                  'Choose from default\r\n                  images' }}</span>\r\n              </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- YouTube URL Input (inline below button) -->\r\n        <div class=\"youtube-input-panel d-flex flex-column gap-8 p-16 rounded-10 b-FFFAF1 b-1px-solid-E5E7EB\"\r\n          *ngIf=\"showYoutubeInput\">\r\n          <label class=\"youtube-panel-label d-flex align-items-center gap-6 font-weight-600 fs-0-875rem c-111827\">\r\n            {{ controller.labels['LBL_YOUTUBE_URL'] || 'Video URL' }}\r\n          </label>\r\n          <div class=\"youtube-input-row d-flex gap-8\">\r\n            <input id=\"input-youtube-url-{{ config.name }}\" type=\"url\" class=\"field-input youtube-url-input\"\r\n              [(ngModel)]=\"youtubeUrlInput\" [ngModelOptions]=\"{standalone: true}\"\r\n              [placeholder]=\"controller.labels['PH_YOUTUBE_URL'] || 'Video URL'\" (keyup.enter)=\"addYoutubeMedia()\">\r\n            <lib-button id=\"btn-add-youtube-{{ config.name }}\" [variant]=\"'secondary'\" (click)=\"addYoutubeMedia()\">\r\n              {{ controller.labels['LBL_ADD'] || 'Add' }}\r\n            </lib-button>\r\n          </div>\r\n          <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"youtubeUrlError\">{{ youtubeUrlError }}</span>\r\n        </div>\r\n\r\n        <div\r\n          class=\"media-upload-status d-flex align-items-center gap-8 mt-4 color-error rounded-8 font-weight-500 p-10px-14px b-FEF2F2 fs-0-85rem\"\r\n          *ngIf=\"mediaUploadError\">\r\n          <mat-icon class=\"status-icon fs-18px\">error_outline</mat-icon>\r\n          <span>{{ mediaUploadError }}</span>\r\n        </div>\r\n\r\n        <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n        <span class=\"field-hint c-6B7280 fs-0-75rem\" *ngIf=\"config.hint && !errorMessage\">{{ config.hint }}</span>\r\n      </div>\r\n      <!-- end left panel -->\r\n\r\n      <!-- \u2500\u2500 RIGHT PANEL (carousel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n      <div class=\"mu-right d-flex flex-column gap-12\">\r\n\r\n        <!-- Carousel (when items exist) -->\r\n        <div class=\"media-carousel-section d-flex flex-column gap-12\" *ngIf=\"mediaItems.length\">\r\n          <div\r\n            class=\"media-carousel-main position-relative w-100 overflow-hidden d-flex align-items-center justify-content-center br-12px b-0F172A\">\r\n            <button id=\"btn-carousel-prev-{{ config.name }}\" type=\"button\"\r\n              class=\"carousel-nav carousel-nav--prev position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85\"\r\n              (click)=\"mediaCarouselPrev()\" [disabled]=\"mediaCarouselIndex === 0\" aria-label=\"Previous\">\r\n              <mat-icon>chevron_left</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-viewer position-absolute d-flex align-items-center justify-content-center\"\r\n              *ngFor=\"let item of mediaItems; let i = index\" [hidden]=\"i !== mediaCarouselIndex\">\r\n              <div *ngIf=\"item.isUploading\"\r\n                class=\"carousel-uploading d-flex flex-column align-items-center gap-12 c-94A3B8 fs-0-85rem\">\r\n                <div class=\"carousel-spinner rounded-50 b-3px-solid-rgba-255-255-255-0-15\"></div>\r\n                <span>{{ controller.labels['LBL_UPLOADING'] || 'Uploading\u2026' }}</span>\r\n              </div>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'youtube'\">\r\n                <iframe class=\"carousel-iframe w-100 h-100 br-12px\" [src]=\"item.url | trustedUrl\" frameborder=\"0\"\r\n                  allowfullscreen\r\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\">\r\n                </iframe>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!item.isUploading && item.mediaType === 'image'\">\r\n                <img class=\"carousel-image w-100 h-100 br-12px\" [src]=\"item.url\" alt=\"Media\">\r\n              </ng-container>\r\n              <button id=\"btn-remove-media-{{ config.name }}-{{ i }}\" type=\"button\"\r\n                class=\"carousel-remove-btn position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-0-0-0-0-55\"\r\n                [disabled]=\"item.isUploading\" (click)=\"removeMediaItem(i)\" aria-label=\"Remove\">\r\n                <mat-icon>close</mat-icon>\r\n              </button>\r\n            </div>\r\n\r\n            <button id=\"btn-carousel-next-{{ config.name }}\" type=\"button\"\r\n              class=\"carousel-nav carousel-nav--next position-absolute rounded-50 cursor-pointer d-flex align-items-center justify-content-center border-none b-rgba-255-255-255-0-85\"\r\n              (click)=\"mediaCarouselNext()\" [disabled]=\"mediaCarouselIndex === mediaItems.length - 1\" aria-label=\"Next\">\r\n              <mat-icon>chevron_right</mat-icon>\r\n            </button>\r\n\r\n            <div class=\"carousel-dots position-absolute d-flex gap-6\">\r\n              <span *ngFor=\"let item of mediaItems; let i = index\"\r\n                class=\"carousel-dot rounded-50 cursor-pointer b-rgba-255-255-255-0-45\"\r\n                [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\"></span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Thumbnail strip -->\r\n          <div class=\"media-thumbnail-strip d-flex flex-wrap gap-8 pb-4px\">\r\n            <div *ngFor=\"let item of mediaThumbnails; let i = index\"\r\n              class=\"media-thumb rounded-8 overflow-hidden cursor-pointer d-flex align-items-center justify-content-center b-2px-solid-transparent b-E2E8F0\"\r\n              [class.active]=\"i === mediaCarouselIndex\" (click)=\"mediaGoTo(i)\">\r\n              <div *ngIf=\"item.isUploading\"\r\n                class=\"thumb-uploading d-flex align-items-center justify-content-center w-100 h-100\">\r\n                <div class=\"thumb-spinner rounded-50 b-2px-solid-E2E8F0\"></div>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && item.thumbnailUrl\"\r\n                [src]=\"item.thumbnailUrl\" class=\"thumb-img w-100 h-100\" alt=\"Video thumbnail\">\r\n              <div *ngIf=\"!item.isUploading && item.mediaType === 'youtube' && !item.thumbnailUrl\"\r\n                class=\"thumb-yt-placeholder d-flex align-items-center justify-content-center w-100 h-100 b-1E293B c-EF4444\">\r\n                <mat-icon>play_circle</mat-icon>\r\n              </div>\r\n              <img *ngIf=\"!item.isUploading && item.mediaType === 'image' && item.url\" [src]=\"item.url\"\r\n                class=\"thumb-img w-100 h-100\" alt=\"Image thumbnail\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Empty right-side placeholder -->\r\n        <div\r\n          class=\"mu-right-empty d-flex flex-column align-items-center justify-content-center gap-10 h-100 text-center p-24 br-12px b-FFFAF1 c-94A3B8 b-2px-dashed-CBD5E1\"\r\n          *ngIf=\"!mediaItems.length\" (click)=\"onMediaMenuDevice()\">\r\n          <mat-icon class=\"mu-right-empty-icon fs-52px\">perm_media</mat-icon>\r\n          <p>{{ controller.labels['LBL_ADD_MEDIA'] || 'Add media' }}</p>\r\n        </div>\r\n\r\n      </div>\r\n      <!-- end right panel -->\r\n\r\n    </div><!-- end mu-layout -->\r\n  </div>\r\n\r\n\r\n  <!-- \u2550\u2550 Library Image Picker Modal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div class=\"media-library-overlay b-rgba-0-0-0-0-5\" *ngIf=\"showLibraryModal\" (click)=\"closeLibraryModal()\"></div>\r\n  <div class=\"media-library-modal d-flex flex-column overflow-hidden b-ffffff br-16px\" *ngIf=\"showLibraryModal\"\r\n    role=\"dialog\" aria-modal=\"true\">\r\n    <div class=\"library-modal-header d-flex align-items-start justify-content-between p-24px-28px bb-1px-solid-E5E7EB\">\r\n      <div class=\"header-left d-flex flex-column gap-8\">\r\n        <h3 class=\"library-modal-title m-0 color-dark fs-1-25rem\">\r\n          {{ controller.labels['LBL_ADD_IMAGES'] || 'Add Images' }}\r\n        </h3>\r\n        <p class=\"library-modal-subtitle m-0 color-gray fs-0-85rem\">\r\n          {{ controller.labels['LBL_LIBRARY_MODAL_DESC'] || 'Upload media to make your opportunity stand out. Plus, take\r\n          full control of your sequence - drag images to reorder as you desire.' }}\r\n        </p>\r\n      </div>\r\n      <button id=\"btn-close-library-{{ config.name }}\" type=\"button\"\r\n        class=\"library-close-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 border-none b-none c-9CA3AF\"\r\n        (click)=\"closeLibraryModal()\" aria-label=\"Close\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Loading -->\r\n    <div class=\"library-loading\" *ngIf=\"libraryLoading\">\r\n      <div class=\"lib-spinner rounded-50 b-3px-solid-E2E8F0\"></div>\r\n      <span>{{ controller.labels['LBL_LOADING'] || 'Loading\u2026' }}</span>\r\n    </div>\r\n\r\n    <!-- Error -->\r\n    <div class=\"library-error d-flex align-items-center gap-8 color-error b-FEF2F2 fs-0-875rem p-16px-24px\"\r\n      *ngIf=\"libraryError && !libraryLoading\">\r\n      <mat-icon>error_outline</mat-icon>\r\n      {{ libraryError }}\r\n    </div>\r\n\r\n    <!-- Image grid -->\r\n    <div class=\"library-grid d-grid gap-16 flex-1 p-28px b-F9FAFB\" *ngIf=\"!libraryLoading && libraryImages.length\">\r\n      <div *ngFor=\"let img of libraryImages; let li = index\" id=\"lib-img-{{ config.name }}-{{ li }}\"\r\n        class=\"library-grid-item position-relative rounded-12 overflow-hidden cursor-pointer bg-white b-3px-solid-transparent\"\r\n        [class.selected]=\"isLibraryItemSelected(img)\" (click)=\"toggleLibraryItem(img)\">\r\n        <img [src]=\"getLibraryItemUrl(img)\" class=\"library-grid-img w-100 h-100 d-block\" alt=\"Library image\">\r\n        <div\r\n          class=\"library-check position-absolute bg-white rounded-50 d-flex align-items-center justify-content-center c-3B82F6\"\r\n          *ngIf=\"isLibraryItemSelected(img)\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        <div class=\"library-overlay-hover position-absolute b-rgba-59-130-246-0-12\"></div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Empty library -->\r\n    <div\r\n      class=\"library-empty d-flex flex-column align-items-center justify-content-center gap-12 flex-1 c-9CA3AF fs-0-875rem p-48px-24px\"\r\n      *ngIf=\"!libraryLoading && !libraryError && libraryImages.length === 0\">\r\n      <mat-icon>image_not_supported</mat-icon>\r\n      <span>{{ controller.labels['LBL_LIBRARY_EMPTY'] || 'No images found in library.' }}</span>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"library-modal-footer d-flex align-items-center justify-content-end bg-white p-20px-28px bt-1px-solid-E5E7EB\">\r\n      <div class=\"library-footer-actions d-flex gap-12 gap-10\">\r\n        <lib-button id=\"btn-library-cancel-{{ config.name }}\" [variant]=\"'outline'\" (click)=\"closeLibraryModal()\">\r\n          {{ controller.labels['LBL_CANCEL'] || 'Cancel' }}\r\n        </lib-button>\r\n        <lib-button id=\"btn-library-confirm-{{ config.name }}\" [variant]=\"'primary'\"\r\n          [disabled]=\"librarySelectedIds.size === 0\" (click)=\"confirmLibrarySelection()\">\r\n          {{ controller.labels['LBL_CONTINUE'] || 'Continue' }}\r\n        </lib-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- \u2550\u2550 Location Field \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <div *ngIf=\"isLocation\" class=\"field-wrapper location-field-wrapper d-flex flex-column gap-6 gap-12\"\r\n    [formGroup]=\"formGroup\">\r\n\r\n    <!-- Field label -->\r\n    <label *ngIf=\"config.label\" class=\"field-label d-block font-poppins c-202124 fs-18px mb-0-5rem\">\r\n      {{ config.label }}\r\n      <span class=\"required c-DC2626 ml-0-125rem\" *ngIf=\"config.required\">*</span>\r\n    </label>\r\n    <p class=\"location-subtitle m-0 c-6B7280 fs-0-8125rem\" *ngIf=\"config.hint\">{{ config.hint }}</p>\r\n\r\n    <!-- Three-tab bar -->\r\n    <div class=\"location-tabs d-flex gap-12 mb-24\">\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'VENUE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('VENUE')\">\r\n        {{ controller.labels['LBL_LOC_VENUE'] || 'Venue' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'ONLINE' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('ONLINE')\">\r\n        {{ controller.labels['LBL_LOC_ONLINE'] || 'Online Event' }}\r\n      </lib-button>\r\n      <lib-button class=\"loc-tab-btn flex-1\" [variant]=\"locationActiveTab === 'TBA' ? 'warning' : 'outline'\"\r\n        (click)=\"onLocationTabChange('TBA')\">\r\n        {{ controller.labels['LBL_LOC_TBA'] || 'To be Announced' }}\r\n      </lib-button>\r\n    </div>\r\n\r\n    <!-- VENUE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'VENUE'\" class=\"loc-panel loc-venue-panel d-flex flex-column gap-12\">\r\n\r\n      <p class=\"loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem\">\r\n        {{ controller.labels['LBL_LOC_ADDRESS'] || 'Location address' }}\r\n      </p>\r\n\r\n      <!-- Added venue rows -->\r\n      <div class=\"loc-venue-list d-flex flex-column gap-8\" *ngIf=\"locationVenues.length > 0\">\r\n        <div *ngFor=\"let venue of locationVenues; let i = index\"\r\n          class=\"loc-venue-item d-flex align-items-center gap-10 p-10px-14px br-7px b-ffffff b-1px-solid-D1D5DB\">\r\n          <mat-icon class=\"loc-venue-search-icon fs-18px c-9CA3AF\">search</mat-icon>\r\n          <span class=\"loc-venue-text flex-1 overflow-hidden fs-0-875rem c-111827\">{{ venue.address || venue.name ||\r\n            venue.description }}</span>\r\n          <button type=\"button\"\r\n            class=\"loc-action-btn loc-delete-btn d-flex align-items-center justify-content-center cursor-pointer rounded-50 b-none border-none p-4px\"\r\n            (click)=\"removeLocationVenue(i)\">\r\n            <mat-icon>delete_outline</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Location count badge -->\r\n      <p class=\"loc-count-text m-0 font-weight-600 fs-0-8125rem c-3B82F6\"\r\n        *ngIf=\"locationVenues.length > 0 && config.locationConfig?.allowMulti\">\r\n        {{ locationVenues.length }}&nbsp;{{ controller.labels['LBL_LOC_COUNT_SUFFIX'] || 'Locations Added!' }}\r\n      </p>\r\n\r\n      <!-- Search input (hide when max reached) -->\r\n      <div class=\"loc-search-container position-relative\" *ngIf=\"!locationMaxReached\">\r\n        <div class=\"loc-search-wrapper position-relative d-flex align-items-center mt-4\">\r\n          <mat-icon class=\"loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">search</mat-icon>\r\n          <input\r\n            class=\"field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem\"\r\n            [placeholder]=\"config.locationConfig?.venuePlaceholder || (controller.labels['PH_LOC_VENUE'] || 'Type to search venue...')\"\r\n            [value]=\"locationSearchText\" (input)=\"handleLocationSearchInput($event)\" (blur)=\"hideLocationSuggestions()\"\r\n            autocomplete=\"off\" [class.is-invalid]=\"errorMessage\">\r\n        </div>\r\n        <!-- Suggestions dropdown -->\r\n        <div class=\"loc-suggestions-panel position-absolute overflow-hidden br-8px b-ffffff b-1px-solid-D1D5DB\"\r\n          *ngIf=\"locationShowSuggestions && locationSuggestions.length\">\r\n          <div *ngFor=\"let sug of locationSuggestions\"\r\n            class=\"loc-suggestion-item d-flex align-items-center gap-10 cursor-pointer p-10px-14px\"\r\n            (mousedown)=\"onLocationSuggestionSelect(sug)\">\r\n            <mat-icon class=\"loc-suggestion-icon fs-18px c-E53E3E\">place</mat-icon>\r\n            <span class=\"loc-suggestion-text overflow-hidden fs-0-875rem c-374151\">{{ sug.description }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Add another button -->\r\n      <button type=\"button\"\r\n        class=\"loc-add-btn d-inline-flex align-items-center gap-6 cursor-pointer font-weight-600 p-0 b-none border-none fs-0-875rem c-1A56DB\"\r\n        *ngIf=\"locationVenues.length > 0 && !locationMaxReached && config.locationConfig?.allowMulti\">\r\n        <mat-icon>add_circle_outline</mat-icon>\r\n        <span>{{ controller.labels['LBL_LOC_ADD_ANOTHER'] || 'Add another Location' }}</span>\r\n      </button>\r\n\r\n      <!-- Map -->\r\n      <div class=\"loc-map-container overflow-hidden br-10px b-1px-solid-E5E7EB\"\r\n        *ngIf=\"config.locationConfig?.showMap !== false\">\r\n        <ng-container *ngIf=\"config.locationConfig?.googleMapsApiKey; else simpleEmbed\">\r\n          <div [id]=\"'loc-map-' + config.name\" class=\"loc-map-frame w-100 d-block border-none\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\"></div>\r\n        </ng-container>\r\n        <ng-template #simpleEmbed>\r\n          <iframe class=\"loc-map-frame w-100 d-block border-none\"\r\n            [style.height]=\"config.locationConfig?.mapHeight || '300px'\" [src]=\"getLocationMapEmbedUrl() | trustedUrl\"\r\n            frameborder=\"0\" allowfullscreen loading=\"lazy\">\r\n          </iframe>\r\n        </ng-template>\r\n      </div>\r\n\r\n      <!-- Map hint -->\r\n      <p class=\"loc-map-hint m-0 text-center fs-0-78rem c-6B7280\">\r\n        {{ controller.labels['LBL_LOC_MAP_HINT'] || 'Type the venue address. A map will appear to assist you.' }}\r\n      </p>\r\n    </div>\r\n\r\n    <!-- ONLINE TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'ONLINE'\" class=\"loc-panel loc-online-panel d-flex flex-column gap-12\">\r\n      <p class=\"loc-section-label m-0 font-weight-600 c-111827 fs-0-9rem\">\r\n        {{ controller.labels['LBL_LOC_ONLINE_URL'] || 'Event URL' }}\r\n      </p>\r\n      <div class=\"loc-search-wrapper position-relative d-flex align-items-center mt-4\">\r\n        <mat-icon class=\"loc-search-icon position-absolute fs-1-1rem c-9CA3AF pe-none\">link</mat-icon>\r\n        <input\r\n          class=\"field-input loc-search-input w-100 font-poppins flex-1 fs-0-875rem c-111827 br-7px br-8px bc-F3F4F6 pl-2-4rem bc-DC2626 pt-0-625rem pb-0-625rem pl-16px pr-16px bc-ffffff b-1px-solid-D1D5DB pr-3-5rem\"\r\n          type=\"url\"\r\n          [placeholder]=\"config.locationConfig?.onlinePlaceholder || (controller.labels['PH_LOC_ONLINE'] || 'https://zoom.us/j/...')\"\r\n          [value]=\"locationOnlineUrl\" (input)=\"onLocationUrlChange($any($event.target).value)\"\r\n          [class.is-invalid]=\"errorMessage\">\r\n      </div>\r\n    </div>\r\n\r\n    <!-- TBA TAB -->\r\n    <div *ngIf=\"locationActiveTab === 'TBA'\"\r\n      class=\"loc-panel loc-tba-panel d-flex flex-column gap-12 justify-content-center\">\r\n      <div\r\n        class=\"loc-tba-content d-flex flex-column align-items-center justify-content-center text-center gap-12 p-32px-24px b-F9FAFB b-1px-dashed-D1D5DB br-10px\">\r\n        <mat-icon class=\"loc-tba-icon fs-40px c-9CA3AF\">schedule</mat-icon>\r\n        <p class=\"loc-tba-text m-0 c-6B7280 fs-0-9rem\">\r\n          {{ controller.labels['LBL_LOC_TBA_DESC'] || \"This event's location is yet to be announced. Check back later\r\n          for updates.\" }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Hidden real form control -->\r\n    <input type=\"hidden\" [formControlName]=\"config.name!\">\r\n\r\n    <span class=\"field-error color-error fs-0-75rem\" *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n  </div>\r\n\r\n</div>", styles: [".d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-block{display:block}.d-none{display:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.grid-cols-12{grid-template-columns:repeat(12,1fr)}.w-100{width:100%}.h-100{height:100%}.position-relative{position:relative}.position-absolute{position:absolute}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-poppins{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)}.font-weight-400{font-weight:400}.font-weight-500{font-weight:500}.font-weight-600{font-weight:600}.text-13{font-size:13px}.text-14{font-size:14px}.text-16{font-size:16px}.color-white{color:#fff}.color-dark{color:#111827}.color-gray{color:#6b7280}.color-error{color:var(--cc-sf-error-text-color, #DC2626)}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.m-0{margin:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.ml-16{margin-left:16px}.ml-20{margin-left:20px}.p-0{padding:0}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.pt-20{padding-top:20px}.pb-10{padding-bottom:10px}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.rounded-4{border-radius:4px}.rounded-6{border-radius:6px}.rounded-8{border-radius:8px}.rounded-10{border-radius:10px}.rounded-12{border-radius:12px}.rounded-20{border-radius:20px}.rounded-24{border-radius:24px}.rounded-50{border-radius:50%}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.resize-vertical{resize:vertical}.box-sizing-border{box-sizing:border-box}.border-none{border:none!important}.mb-16px{margin-bottom:var(--cc-sf-grid-gap, 16px)!important}.c-DC2626{color:var(--cc-sf-label-required-color, #DC2626)!important}.ml-0-125rem{margin-left:.125rem!important}.fs-0-875rem{font-size:.875rem!important}.c-111827{color:var(--cc-sf-label-color, #111827)!important}.br-7px{border-radius:var(--cc-sf-input-radius, 7px)!important}.c-6B7280{color:var(--cc-sf-hint-color, #6B7280)!important}.fs-0-75rem{font-size:var(--cc-sf-error-text-size, .75rem)!important}.b-none{background:none!important}.p-32px-24px{padding:32px 24px!important}.us-none{-webkit-user-select:none!important;user-select:none!important}.c-1E293B{color:var(--cc-sf-label-color, #1E293B)!important}.c-3B82F6{color:var(--cc-sf-chip-selected-bg, #3B82F6)!important}.fs-0-78rem{font-size:.78rem!important}.p-10px-14px{padding:10px 14px!important}.fs-0-85rem{font-size:.85rem!important}.fs-0-72rem{font-size:.72rem!important}.c-94A3B8{color:#94a3b8!important}.p-4px{padding:4px!important}.br-8px{border-radius:var(--cc-sf-input-radius, 8px)!important}.bc-F3F4F6{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}.br-none{border-right:none!important}.bl-none{border-left:none!important}.pe-none{pointer-events:none!important}.fs-1-1rem{font-size:1.1rem!important}.c-9CA3AF{color:var(--cc-sf-hint-color, #9CA3AF)!important}.pl-2-4rem{padding-left:2.4rem!important}.fs-0-8125rem{font-size:.8125rem!important}.ls-none{list-style:none!important}.br-12px{border-radius:var(--mu-carousel-radius, 12px)!important}.b-FFFAF1{background:var(--cc-sf-dropzone-bg, #FFFAF1)!important}.fs-18px{font-size:18px!important}.b-FEF2F2{background:var(--cc-sf-error-bg, #FEF2F2)!important}.bc-DC2626{border-color:var(--cc-sf-error-border, #DC2626)!important}.c-202124{color:var(--cc-sf-label-color, #202124)!important}.fs-18px{font-size:var(--cc-sf-label-size, 18px)!important}.mb-0-5rem{margin-bottom:.5rem!important}.pt-0-625rem{padding-top:var(--cc-sf-input-padding-y, .625rem)!important}.pb-0-625rem{padding-bottom:var(--cc-sf-input-padding-y, .625rem)!important}.pl-16px{padding-left:var(--cc-sf-input-padding-x, 16px)!important}.pr-16px{padding-right:var(--cc-sf-input-padding-x, 16px)!important}.bc-ffffff{background-color:var(--cc-sf-section-bg, #ffffff)!important}.b-1px-solid-D1D5DB{border:1px solid var(--cc-sf-input-border, #D1D5DB)!important}.fs-0-75rem{font-size:.75rem!important}.c-1F2937{color:var(--cc-sf-section-label-color, #1F2937)!important}.p-6px-14px{padding:var(--cc-sf-chip-padding, 6px 14px)!important}.b-ffffff{background:var(--loc-suggestion-bg, #ffffff)!important}.c-374151{color:var(--cc-sf-label-color, #374151)!important}.br-20px{border-radius:var(--cc-sf-chip-radius, 20px)!important}.fs-0-875rem{font-size:var(--cc-sf-btn-font-size, .875rem)!important}.bc-D1D5DB{background-color:var(--cc-sf-switch-track-off, #D1D5DB)!important}.pr-2-75rem{padding-right:2.75rem!important}.p-0-25rem{padding:.25rem!important}.p-0-625rem-0-875rem{padding:var(--cc-sf-generated-padding, .625rem .875rem)!important}.b-F3F4F6{background:var(--cc-sf-generated-bg, #F3F4F6)!important}.b-1px-solid-E5E7EB{border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important}.br-8px{border-radius:var(--cc-sf-uploaded-item-radius, 8px)!important}.c-6B7280{color:var(--ms-desc-color, #6B7280)!important}.mb-20px{margin-bottom:var(--cc-sf-section-gap, 20px)!important}.br-10px{border-radius:var(--cc-sf-input-radius, 10px)!important}.p-20px{padding:var(--cc-sf-section-padding, 20px)!important}.fs-1rem{font-size:1rem!important}.m-0-0-16px-0{margin:0 0 16px!important}.bb-2px-solid-E5E7EB{border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)!important}.p-16px{padding:var(--cc-sf-instance-padding, 16px)!important}.b-F9FAFB{background:var(--loc-tba-bg, #F9FAFB)!important}.bb-1px-dashed-D1D5DB{border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)!important}.c-4B5563{color:var(--cc-sf-instance-num-color, #4B5563)!important}.fs-0-8125rem{font-size:var(--cc-sf-hint-size, .8125rem)!important}.pb-0{padding-bottom:0!important}.p-18px-24px{padding:18px 24px!important}.c-111827{color:var(--ms-title-color, #111827)!important}.bt-1px-solid-E5E7EB{border-top:1px solid #E5E7EB!important}.p-4px-10px{padding:4px 10px!important}.b-FFF5F5{background:var(--cc-sf-btn-remove-bg, #FFF5F5)!important}.c-E53E3E{color:var(--loc-delete-color, #E53E3E)!important}.b-1px-solid-FED7D7{border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7)!important}.br-4px{border-radius:var(--cc-sf-btn-remove-radius, 4px)!important}.p-8px-16px{padding:8px 16px!important}.b-transparent{background:var(--cc-sf-btn-add-bg, transparent)!important}.c-3B82F6{color:var(--cc-sf-input-focus-border, #3B82F6)!important}.b-1px-dashed-CBD5E1{border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1)!important}.br-6px{border-radius:var(--cc-sf-btn-add-radius, 6px)!important}.b-1-5px-dashed-CBD5E1{border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1)!important}.br-12px{border-radius:var(--cc-sf-dropzone-radius, 12px)!important}.bc-FFFAF1{background-color:var(--cc-sf-dropzone-bg, #FFFAF1)!important}.c-94A3B8{color:var(--cc-sf-uploaded-remove-color, #94A3B8)!important}.fs-0-9rem{font-size:var(--cc-sf-input-font-size, .9rem)!important}.c-64748B{color:var(--cc-sf-dropzone-hint-color, #64748B)!important}.b-1px-solid-E2E8F0{border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0)!important}.b-2px-solid-E2E8F0{border:2px solid #E2E8F0!important}.pr-3-5rem{padding-right:3.5rem!important}.p-0-0-875rem{padding:0 .875rem!important}.bc-FFFFFF{background-color:var(--cc-sf-input-bg, #FFFFFF)!important}.b-1-5px-solid-D1D5DB{border:var(--cc-sf-input-border, 1.5px solid #D1D5DB)!important}.mb-0-75rem{margin-bottom:.75rem!important}.mt-6px{margin-top:6px!important}.pr-2-4rem{padding-right:2.4rem!important}.p-0-2rem{padding:.2rem!important}.fs-1-35rem{font-size:1.35rem!important}.p-4px-12px{padding:4px 12px!important}.b-111827{background:var(--cc-sf-label-color, #111827)!important}.b-2px-dashed-CBD5E1{border:2px dashed var(--cc-sf-dropzone-border, #CBD5E1)!important}.fs-52px{font-size:52px!important}.p-12px-16px{padding:12px 16px!important}.bb-1px-solid-F3F4F6{border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)!important}.b-0F172A{background:var(--mu-carousel-bg, #0F172A)!important}.b-3px-solid-rgba-255-255-255-0-15{border:3px solid rgba(255,255,255,.15)!important}.b-rgba-255-255-255-0-85{background:#ffffffd9!important}.b-rgba-0-0-0-0-55{background:#0000008c!important}.b-rgba-255-255-255-0-45{background:#ffffff73!important}.pb-4px{padding-bottom:4px!important}.b-2px-solid-transparent{border:2px solid transparent!important}.b-E2E8F0{background:var(--mu-thumb-bg, #E2E8F0)!important}.b-1E293B{background:#1e293b!important}.c-EF4444{color:#ef4444!important}.b-rgba-0-0-0-0-5{background:#00000080!important}.br-16px{border-radius:var(--mu-modal-radius, 16px)!important}.p-24px-28px{padding:24px 28px!important}.bb-1px-solid-E5E7EB{border-bottom:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important}.fs-1-25rem{font-size:1.25rem!important}.p-48px-24px{padding:48px 24px!important}.b-3px-solid-E2E8F0{border:3px solid #E2E8F0!important}.p-16px-24px{padding:16px 24px!important}.p-28px{padding:28px!important}.b-3px-solid-transparent{border:3px solid transparent!important}.b-rgba-59-130-246-0-12{background:#3b82f61f!important}.p-20px-28px{padding:20px 28px!important}.c-1A56DB{color:var(--loc-add-color, #1A56DB)!important}.b-1px-dashed-D1D5DB{border:1px dashed var(--cc-sf-input-disabled-border, #D1D5DB)!important}.fs-40px{font-size:40px!important}.c-9CA3AF{color:var(--loc-tba-icon-color, #9CA3AF)!important}.form-field{font-family:var(--cc-sf-font-family, \"Poppins\", sans-serif)!important}:host{--cc-sf-input-border: #D1D5DB;--cc-sf-input-bg: #ffffff;--cc-sf-input-radius: 9px;--cc-sf-input-height: 44px;--cc-sf-label-color: #111827;--cc-sf-hint-color: #9CA3AF;--cc-sf-error-border: #EF4444;--cc-sf-error-bg: #FFF5F5;--cc-sf-accent-color: #6366F1;--cc-sf-input-focus-border: #6366F1;--cc-sf-input-hover-border: #A5B4FC;--cc-sf-input-placeholder: #C4C9D4;--cc-sf-input-disabled-bg: #F8F9FB;--cc-sf-input-disabled-border: #E5E7EB;--cc-sf-switch-track-on: #6366F1;--cc-sf-switch-track-off: #D1D5DB;--cc-sf-switch-thumb: #ffffff;--cc-sf-selected-color: #6366F1}.form-row{gap:var(--cc-sf-grid-gap, 16px)}.form-row.horizontal{display:flex;flex-direction:row}.form-row.horizontal>*{flex:1}.form-row:not(.horizontal){flex-direction:column}.form-row.grid-row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-row.grid-row{grid-template-columns:1fr}.form-row.grid-row .row-field{grid-column:span 12!important}}.field-label{font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#6b7280}.field-input,input.matInput,.mat-mdc-input-element{display:block;width:100%;height:var(--cc-sf-input-height)!important;padding:0 14px!important;font-family:inherit;font-size:.9rem;color:var(--cc-sf-label-color);background-color:var(--cc-sf-input-bg)!important;border:1.5px solid var(--cc-sf-input-border)!important;border-radius:var(--cc-sf-input-radius)!important;box-sizing:border-box;box-shadow:0 1px 2px #0000000a!important;transition:all .2s cubic-bezier(.4,0,.2,1)}.field-input::placeholder,input.matInput::placeholder,.mat-mdc-input-element::placeholder{font-weight:400;font-size:14px;color:var(--cc-sf-input-placeholder)}.field-input{opacity:var(--cc-sf-input-opacity, 1);line-height:var(--cc-sf-input-line-height, 1.5);transition:var(--cc-sf-input-transition, all .2s ease)}.field-input::placeholder{font-weight:var(--cc-sf-placeholder-weight, 400);font-size:var(--cc-sf-placeholder-size, 14px);line-height:var(--cc-sf-placeholder-line-height, 100%);color:var(--cc-sf-input-placeholder)}.field-input:hover:not(:disabled):not([readonly]){border-color:var(--cc-sf-input-hover-border)!important;box-shadow:0 1px 4px #6366f114!important}.field-input:focus{outline:none;border-color:var(--cc-sf-input-focus-border)!important;box-shadow:0 0 0 3px #6366f124,0 1px 4px #6366f11a!important;background-color:#fefeff!important}.field-input:disabled,.field-input[readonly]{background-color:var(--cc-sf-input-disabled-bg)!important;color:#9ca3af!important;cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border)!important;box-shadow:none!important}.field-input.is-invalid{border-color:var(--cc-sf-error-border)!important;background-color:var(--cc-sf-error-bg)!important}.field-input.is-invalid:focus{box-shadow:0 0 0 3px #ef44441f,0 1px 4px #ef44441a!important}.field-input.textarea{resize:vertical;min-height:100px;height:auto;padding:12px 16px!important}input[type=time].time-input{cursor:pointer}input[type=time].time-input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;filter:invert(30%)}input[type=time].time-input::-webkit-calendar-picker-indicator:hover{opacity:1}select.field-input{appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;cursor:pointer}select.field-input:disabled{cursor:not-allowed}.char-count-hint{font-style:normal;line-height:100%;letter-spacing:.02em}.radio-group.layout-column,.checkbox-group.layout-column{display:grid!important;grid-template-columns:repeat(12,1fr);gap:16px;width:100%}.radio-group.layout-row,.checkbox-group.layout-row{flex-direction:column!important;gap:12px;width:100%}.radio-label input,.checkbox-label input{cursor:pointer;accent-color:var(--cc-sf-chip-selected-bg, #F05A28)}.radio-label.card-item,.checkbox-label.card-item{display:flex!important;flex-direction:row-reverse!important;justify-content:space-between!important;align-items:center!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB);border-radius:12px;padding:16px 20px;box-sizing:border-box;transition:all .2s ease;background:var(--cc-sf-input-bg, #ffffff);margin-bottom:0}.radio-label.card-item input,.checkbox-label.card-item input{margin-left:16px}.radio-label.card-item.selected,.checkbox-label.card-item.selected{border-color:var(--cc-sf-selected-color);background-color:#f05a280d}.radio-label.card-item .option-content .label-text,.checkbox-label.card-item .option-content .label-text,.checkbox-single .checkbox-label{font-weight:var(--cc-sf-label-weight, 500)}.chip-label{transition:var(--cc-sf-input-transition, all .2s ease)}.chip-label:hover{background:var(--cc-sf-chip-hover-bg, #F3F4F6)}.chip-label.selected{background:var(--cc-sf-selected-color);color:var(--cc-sf-chip-selected-color, #ffffff);border-color:var(--cc-sf-selected-color)}.switch{width:50px;height:24px;display:inline-block}.switch input{opacity:0;width:0;height:0;position:absolute}.switch input:checked+.slider{background-color:var(--cc-sf-switch-track-on)!important}.switch input:checked+.slider:before{transform:translate(26px)}.switch .slider{inset:0;transition:.4s;background-color:var(--cc-sf-switch-track-off);border-radius:24px}.switch .slider:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--cc-sf-switch-thumb);transition:.4s;border-radius:50%}.rating-group .star{transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star mat-icon{font-size:var(--cc-sf-star-size, 28px);width:var(--cc-sf-star-size, 28px);height:var(--cc-sf-star-size, 28px);line-height:var(--cc-sf-star-size, 28px);color:var(--cc-sf-star-empty, #D1D5DB);transition:var(--cc-sf-input-transition, all .2s ease)}.rating-group .star.filled mat-icon,.rating-group .star.half mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.rating-group .star:hover mat-icon{color:var(--cc-sf-star-filled, #F59E0B)}.password-wrapper .password-toggle{right:.625rem;top:50%;transform:translateY(-50%);line-height:1;transition:color var(--cc-sf-input-transition, .2s ease)}.password-wrapper .password-toggle mat-icon.eye-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.password-wrapper .password-toggle:hover{color:var(--cc-sf-label-color, #374151)}.password-wrapper .password-toggle:focus{outline:none}.group-section-wrapper .group-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-left:12px;padding-top:2px;padding-bottom:2px;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);line-height:1.4}.group-section-wrapper .group-fields.sf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.group-section-wrapper .group-fields.sf-grid{grid-template-columns:1fr}.group-section-wrapper .group-fields.sf-grid .sf-col{grid-column:span 12!important}}.group-section-wrapper .group-accordion-instance{border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-section-border-radius-inner, 8px);margin-bottom:8px;overflow:hidden;transition:border-color .2s ease}.group-section-wrapper .group-accordion-instance:last-of-type{margin-bottom:0}.group-section-wrapper .group-accordion-instance .group-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--cc-sf-repeater-accordion-header-bg, #F9FAFB);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s ease}.group-section-wrapper .group-accordion-instance .group-accordion-header:hover{background:var(--cc-sf-repeater-accordion-active-bg, #EFF6FF)}.group-section-wrapper .group-accordion-instance .group-accordion-header .instance-badge{width:22px;height:22px;border-radius:50%;background:var(--cc-sf-repeater-badge-bg, #E5E7EB);color:var(--cc-sf-repeater-badge-color, #374151);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.group-section-wrapper .group-accordion-instance .group-accordion-header .instance-title{font-size:var(--cc-sf-instance-num-size, .8125rem);font-weight:600;color:var(--cc-sf-repeater-accordion-header-color, #1F2937)}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn{background:none;border:none;cursor:pointer;color:var(--cc-sf-btn-remove-color, #E53E3E);padding:4px;border-radius:4px;line-height:1;display:flex;align-items:center;transition:background .15s ease}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-remove-btn:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.group-section-wrapper .group-accordion-instance .group-accordion-header .accordion-chevron{font-size:1.25rem;width:1.25rem;height:1.25rem;line-height:1.25rem;color:var(--cc-sf-instance-num-color, #4B5563)}.group-section-wrapper .group-accordion-instance .group-accordion-body{padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border-top:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.group-section-wrapper .btn-add-group{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 20px;margin-top:12px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-family:inherit;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.group-section-wrapper .btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.group-section-wrapper .btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.group-section-wrapper .group-instance:last-child{margin-bottom:0}.group-section-wrapper.multi-save-active{border:none;box-shadow:none;padding:0;background:transparent}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button{color:var(--ms-btn-add-color, #3B82F6);font-weight:600;font-size:.875rem;padding:8px 12px}.group-section-wrapper.multi-save-active .multi-save-header .btn-add-multi ::ng-deep button:hover{color:var(--ms-btn-add-hover, #2563EB);background-color:var(--cc-sf-btn-add-hover-bg, #EFF6FF)}.group-section-wrapper.multi-save-active .group-instance{box-shadow:var(--ms-card-shadow, 0 1px 4px rgba(0, 0, 0, .05))}.group-section-wrapper.multi-save-active .group-instance.is-editing{padding:24px}.group-section-wrapper.multi-save-active .group-instance.is-card{cursor:pointer;transition:all .2s ease-in-out}.group-section-wrapper.multi-save-active .group-instance.is-card:hover{box-shadow:var(--ms-card-shadow-hover, 0 8px 24px rgba(0, 0, 0, .08));border-color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-title{white-space:nowrap;text-overflow:ellipsis}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-content .card-desc{line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view.is-expanded .card-content .card-desc{-webkit-line-clamp:unset;line-clamp:unset}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon{font-size:22px;width:22px;height:22px;color:var(--cc-sf-hint-color, #9CA3AF);transition:color .2s}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-delete:hover{color:var(--cc-sf-error-border, #DC2626)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-edit:hover{color:var(--cc-sf-input-focus-border, #3B82F6)}.group-section-wrapper.multi-save-active .group-instance.is-card .card-view .card-actions mat-icon.icon-expand{color:var(--cc-sf-input-disabled-border, #E5E7EB)}.btn-remove{transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-remove mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.btn-add-group{font-weight:var(--cc-sf-btn-font-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.btn-add-group mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.btn-add-group:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}.upload-drop-zone{background-color:var(--cc-sf-dropzone-bg, #F8FAFC);border:var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1);border-radius:var(--cc-sf-dropzone-radius, 12px);transition:background-color .2s ease,border-color .2s ease}.upload-drop-zone:hover{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-hover-border, #93C5FD)}.upload-drop-zone.drag-over{background-color:var(--cc-sf-dropzone-hover-bg, #EFF6FF);border-color:var(--cc-sf-dropzone-over-border, #3B82F6);box-shadow:var(--cc-sf-dropzone-over-shadow, 0 0 0 4px rgba(59, 130, 246, .12))}.upload-drop-zone.is-invalid{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.upload-icon-wrap .dropzone-icon-pill{width:52px;height:52px;border-radius:50%;background:var(--cc-sf-dropzone-icon-bg, rgba(59, 130, 246, .1))}.upload-icon-wrap mat-icon.upload-cloud-icon{font-size:28px;width:28px;height:28px;line-height:28px;color:var(--cc-sf-accent-color, #3B82F6)}.upload-main-text{color:var(--cc-sf-label-color, #1E293B)}.upload-sub-text{color:var(--cc-sf-hint-color, #64748B)}.upload-link{color:var(--cc-sf-dropzone-link-color, #3B82F6);font-weight:500}.upload-formats{color:var(--cc-sf-dropzone-link-color, #3B82F6)}.upload-size-badge{display:inline-block;padding:2px 8px;border-radius:20px;background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-hint-color, #6B7280);font-weight:500}.uploaded-item{background:var(--cc-sf-uploaded-item-bg, #ffffff);border:var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0);border-radius:var(--cc-sf-uploaded-item-radius, 8px);transition:box-shadow .15s ease}.uploaded-item:hover{box-shadow:0 2px 6px #0000000f}.uploaded-item mat-icon.file-type-icon{font-size:20px;width:20px;height:20px;line-height:20px;flex-shrink:0;color:var(--cc-sf-hint-color, #64748B)}.uploaded-item .file-thumb{width:36px;height:36px;object-fit:cover;flex-shrink:0}.uploaded-item .file-info{min-width:0;gap:2px}.uploaded-item .file-info .file-name{white-space:nowrap;text-overflow:ellipsis}.uploaded-item .file-remove-btn{flex-shrink:0;width:32px;height:32px;background:none;border:none;cursor:pointer;color:var(--cc-sf-uploaded-remove-color, #94A3B8);padding:0;display:flex;align-items:center;justify-content:center;transition:color .15s ease,background .15s ease}.uploaded-item .file-remove-btn mat-icon{font-size:1.1rem;width:1.1rem;height:1.1rem;line-height:1.1rem}.uploaded-item .file-remove-btn:hover:not(:disabled){color:var(--cc-sf-uploaded-remove-hover-color, #DC2626);background:var(--cc-sf-uploaded-remove-hover-bg, #FEF2F2)}.uploaded-item .file-remove-btn:disabled{opacity:.4;cursor:not-allowed}.uploaded-item.uploading{background:var(--cc-sf-uploaded-uploading-bg, #F8FAFC);border-color:var(--cc-sf-uploaded-uploading-border, #CBD5E1);opacity:.85}.upload-spinner{width:20px;height:20px;flex-shrink:0;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}@keyframes cc-spin{to{transform:rotate(360deg)}}.uploading-label{font-style:italic}.input-group{align-items:stretch}.input-group .field-input{flex:1;width:auto}.input-prefix+.input-group .field-input{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .field-input:has(+.input-suffix){border-top-right-radius:0;border-bottom-right-radius:0}.input-group .field-input.has-icon-right{padding-right:3rem}.input-group.readonly .field-input{cursor:default}.input-prefix,.input-suffix{display:flex!important;align-items:center;white-space:nowrap;padding:0 14px;background-color:var(--cc-sf-input-disabled-bg);border:1px solid var(--cc-sf-input-border);font-size:.875rem;color:var(--cc-sf-hint-color);-webkit-user-select:none;user-select:none}.input-prefix{border-right:none;border-top-left-radius:var(--cc-sf-input-radius, 8px);border-bottom-left-radius:var(--cc-sf-input-radius, 8px)}.input-suffix{border-left:none;border-top-right-radius:var(--cc-sf-input-radius, 8px);border-bottom-right-radius:var(--cc-sf-input-radius, 8px)}.readonly-icons{right:.875rem;top:50%;transform:translateY(-50%)}.readonly-icons mat-icon.lock-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;opacity:.5;color:var(--cc-sf-hint-color, #6B7280)}.date-icon-wrapper{right:.5rem;top:50%;transform:translateY(-50%);pointer-events:auto}.date-icon-wrapper .mat-icon-button{width:32px;height:32px;line-height:32px}.subfields-group-wrapper .subfields-row{transition:all .2s ease}.subfields-group-wrapper .subfields-row.is-invalid .subfield-item ::ng-deep .field-input{border-color:var(--cc-sf-error-border, #DC2626);background-color:var(--cc-sf-error-bg, #FEF2F2)}.subfields-group-wrapper .subfields-row .subfield-item{min-width:0}.subfields-group-wrapper .subfields-row .subfield-item ::ng-deep .field-label{font-size:.75rem!important;margin-bottom:4px!important;font-weight:500!important;color:var(--cc-sf-hint-color, #6B7280)!important}.subfields-group-wrapper .subfields-row .subfield-separator{font-weight:700}.autocomplete-wrapper .ac-input{padding-left:40px!important}.autocomplete-wrapper .ac-search-icon{left:.75rem;width:1.1rem;height:1.1rem;line-height:1.1rem;z-index:1;transition:color var(--cc-sf-input-transition, .2s ease)}.autocomplete-wrapper .ac-clear-btn{right:.6rem;transition:color .15s ease,background .15s ease}.autocomplete-wrapper .ac-clear-btn mat-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem}.autocomplete-wrapper .ac-clear-btn:hover{color:var(--cc-sf-label-color, #374151);background:var(--cc-sf-input-disabled-bg, #F3F4F6)}.autocomplete-wrapper .ac-clear-btn:focus{outline:none}.autocomplete-wrapper:focus-within .ac-search-icon{color:var(--cc-sf-accent-color, #3B82F6)}.autocomplete-wrapper.is-invalid .ac-input{border-color:var(--cc-sf-error-border)!important;background-color:var(--cc-sf-error-bg)}.autocomplete-wrapper.readonly .ac-input{background-color:var(--cc-sf-input-disabled-bg);color:var(--cc-sf-input-disabled-color, #6B7280);cursor:not-allowed;border-color:var(--cc-sf-input-disabled-border)!important}.ac-no-results{font-style:italic}::ng-deep .mat-mdc-autocomplete-panel,::ng-deep .mat-autocomplete-panel{background:var(--cc-sf-input-bg, #ffffff)!important;border-radius:var(--cc-sf-input-radius, 9px)!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)!important;box-shadow:0 8px 24px #0000001a,0 2px 6px #0000000f!important;padding:4px 0!important;min-width:200px}::ng-deep .mat-mdc-autocomplete-panel mat-option,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option,::ng-deep .mat-mdc-autocomplete-panel .mat-option,::ng-deep .mat-autocomplete-panel mat-option,::ng-deep .mat-autocomplete-panel .mat-mdc-option,::ng-deep .mat-autocomplete-panel .mat-option{background:var(--cc-sf-input-bg, #ffffff)!important;color:var(--cc-sf-label-color, #111827)!important;font-size:.875rem!important;padding:10px 16px!important;min-height:40px!important;line-height:1.4!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;transition:background var(--cc-sf-input-transition, .2s ease)!important}::ng-deep .mat-mdc-autocomplete-panel mat-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-mdc-autocomplete-panel .mat-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-autocomplete-panel mat-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-autocomplete-panel .mat-mdc-option:hover:not(.mat-option-disabled):not([disabled]),::ng-deep .mat-autocomplete-panel .mat-option:hover:not(.mat-option-disabled):not([disabled]){background:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}::ng-deep .mat-mdc-autocomplete-panel mat-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-mdc-autocomplete-panel mat-option.mdc-list-item--selected,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected,::ng-deep .mat-mdc-autocomplete-panel .mat-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-mdc-autocomplete-panel .mat-option.mdc-list-item--selected,::ng-deep .mat-autocomplete-panel mat-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-autocomplete-panel mat-option.mdc-list-item--selected,::ng-deep .mat-autocomplete-panel .mat-mdc-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-autocomplete-panel .mat-mdc-option.mdc-list-item--selected,::ng-deep .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-option-multiple),::ng-deep .mat-autocomplete-panel .mat-option.mdc-list-item--selected{background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)!important;color:var(--cc-sf-selected-color, #6366F1)!important;font-weight:600!important}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-option-label,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-option-label,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-option-label,::ng-deep .mat-autocomplete-panel mat-option .ac-option-label,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-option-label,::ng-deep .mat-autocomplete-panel .mat-option .ac-option-label{font-weight:500;color:var(--cc-sf-label-color, #111827);font-size:.875rem;display:block}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-display-fields,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-display-fields,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-display-fields,::ng-deep .mat-autocomplete-panel mat-option .ac-display-fields,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-display-fields,::ng-deep .mat-autocomplete-panel .mat-option .ac-display-fields{align-items:center;line-height:1}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-item,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-item,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-item,::ng-deep .mat-autocomplete-panel mat-option .ac-df-item,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-item,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-item{display:inline-flex;align-items:center;font-size:.72rem;color:var(--cc-sf-hint-color, #6B7280);gap:3px}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-chip,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-chip,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-chip,::ng-deep .mat-autocomplete-panel mat-option .ac-df-chip,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-chip,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-chip{background:var(--cc-sf-input-disabled-bg, #F3F4F6);border-radius:4px;padding:2px 6px}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-text,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-text,::ng-deep .mat-autocomplete-panel mat-option .ac-df-text,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-text,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-text{color:var(--cc-sf-hint-color, #6B7280)}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-avatar,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-avatar,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-avatar,::ng-deep .mat-autocomplete-panel mat-option .ac-df-avatar,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-avatar,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--cc-sf-input-border, #D1D5DB);vertical-align:middle}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-label,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-label,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-label,::ng-deep .mat-autocomplete-panel mat-option .ac-df-label,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-label,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-label{font-weight:600;color:var(--cc-sf-hint-color, #9CA3AF);margin-right:2px}::ng-deep .mat-mdc-autocomplete-panel mat-option .ac-df-icon,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .ac-df-icon,::ng-deep .mat-mdc-autocomplete-panel .mat-option .ac-df-icon,::ng-deep .mat-autocomplete-panel mat-option .ac-df-icon,::ng-deep .mat-autocomplete-panel .mat-mdc-option .ac-df-icon,::ng-deep .mat-autocomplete-panel .mat-option .ac-df-icon{font-size:11px;width:11px;height:11px;line-height:11px;color:var(--cc-sf-hint-color, #9CA3AF);flex-shrink:0}.mu-layout{grid-template-columns:1fr 1fr;gap:32px}@media(max-width:768px){.mu-layout{grid-template-columns:1fr}}.mu-title{font-weight:700;line-height:1.3}.mu-badge{white-space:nowrap;flex-shrink:0}.mu-description{line-height:1.6}.mu-feature-item .mu-check{width:16px;height:16px;line-height:16px;flex-shrink:0}.mu-right{min-height:260px}.mu-right-empty{min-height:250px;max-width:400px;box-shadow:0 2px 10px #0000000d;transition:box-shadow .2s ease}.mu-right-empty:hover{cursor:pointer;box-shadow:0 4px 16px #0000001a}.mu-right-empty .mu-right-empty-icon{width:52px;height:52px;line-height:52px;opacity:.3}.mu-right-empty p{margin:0;font-size:.85rem}.media-add-container{display:inline-block}.media-add-container ::ng-deep button{display:flex;align-items:center;gap:6px}.media-add-container ::ng-deep button .menu-chevron{width:18px;height:18px;line-height:18px;transition:transform .2s ease}.media-dropdown{top:calc(100% + 6px);left:0;z-index:200;min-width:240px;box-shadow:var(--mu-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, .12));animation:mu-fade-in .15s ease}@keyframes mu-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.media-dropdown-item{transition:background .15s ease}.media-dropdown-item:last-child{border-bottom:none}.media-dropdown-item:hover{background:var(--cc-sf-dropzone-hover-bg, #F0F9FF)}.media-drop-icon{width:36px;height:36px;flex-shrink:0}.media-drop-icon mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.media-drop-icon--video{background:var(--mu-icon-video-bg, #FFF0F0);color:var(--mu-icon-video-color, #EF4444)}.media-drop-icon--device{background:var(--mu-icon-device-bg, #EFF6FF);color:var(--mu-icon-device-color, #3B82F6)}.media-drop-icon--library{background:var(--mu-icon-library-bg, #F0FDF4);color:var(--mu-icon-library-color, #22C55E)}.media-drop-text{gap:2px}.youtube-input-panel{animation:mu-fade-in .18s ease}.youtube-panel-label mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--mu-icon-video-color, #EF4444)}.youtube-input-row{align-items:stretch}.media-menu-backdrop{position:fixed;inset:0;z-index:100}.media-upload-status{animation:mu-fade-in .2s ease}.media-upload-status .status-icon{width:18px;height:18px;line-height:18px}.media-carousel-main{max-width:400px;height:var(--mu-carousel-height, 250px)}.carousel-viewer{inset:0}.carousel-viewer .carousel-image{object-fit:cover}.carousel-viewer .carousel-spinner{width:36px;height:36px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.carousel-nav{top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;box-shadow:0 2px 8px #0003;transition:background .2s ease,opacity .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carousel-nav mat-icon{font-size:22px;width:22px;height:22px;line-height:22px;color:#1e293b}.carousel-nav:hover:not(:disabled){background:#fff}.carousel-nav:disabled{opacity:.3;cursor:not-allowed}.carousel-nav--prev{left:12px}.carousel-nav--next{right:12px}.carousel-remove-btn{top:10px;right:10px;z-index:10;width:32px;height:32px;transition:background .2s ease}.carousel-remove-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:#fff}.carousel-remove-btn:hover:not(:disabled){background:#dc2626d9}.carousel-remove-btn:disabled{opacity:.4;cursor:not-allowed}.carousel-dots{bottom:10px;left:50%;transform:translate(-50%);z-index:10}.carousel-dot{width:8px;height:8px;transition:background .2s ease,transform .2s ease}.carousel-dot.active{background:#fff;transform:scale(1.3)}.media-thumbnail-strip{max-width:400px;overflow-x:auto}.media-thumbnail-strip::-webkit-scrollbar{height:4px}.media-thumbnail-strip::-webkit-scrollbar-thumb{background:var(--cc-sf-input-disabled-border, #D1D5DB);border-radius:2px}.media-thumb{flex-shrink:0;width:72px;height:52px;transition:border-color .2s ease,transform .15s ease}.media-thumb.active{border-color:var(--mu-thumb-active-border, var(--cc-sf-accent-color, #3B82F6));transform:scale(1.04)}.media-thumb:hover:not(.active){border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.media-thumb .thumb-img{object-fit:cover}.media-thumb .thumb-yt-placeholder mat-icon{font-size:28px;width:28px;height:28px;line-height:28px}.media-thumb .thumb-uploading .thumb-spinner{width:20px;height:20px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.media-library-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:mu-fade-in .2s ease}.media-library-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:min(90vw,780px);max-height:85vh;box-shadow:var(--mu-modal-shadow, 0 20px 60px rgba(0, 0, 0, .2));animation:mu-modal-in .22s cubic-bezier(.34,1.56,.64,1)}@keyframes mu-modal-in{0%{opacity:0;transform:translate(-50%,-48%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.library-modal-header{flex-shrink:0}.library-modal-title{font-weight:700}.library-modal-subtitle{line-height:1.5;max-width:600px}.library-close-btn{width:32px;height:32px;transition:background .15s ease,color .15s ease}.library-close-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-close-btn:hover{background:var(--cc-sf-input-disabled-bg, #F3F4F6);color:var(--cc-sf-label-color, #374151)}.library-loading mat-icon,.library-empty mat-icon{font-size:40px;width:40px;height:40px;line-height:40px;opacity:.5}.lib-spinner{width:36px;height:36px;border-top-color:var(--cc-sf-accent-color, #3B82F6);animation:cc-spin .7s linear infinite}.library-error{flex-shrink:0}.library-error mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.library-grid{grid-template-columns:repeat(5,1fr);overflow-y:auto}.library-grid::-webkit-scrollbar{width:8px}.library-grid::-webkit-scrollbar-track{background:#f1f1f1}.library-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px;border:2px solid #F1F1F1}.library-grid-item{aspect-ratio:1/1;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.library-grid-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.library-grid-item.selected{border-color:var(--cc-sf-accent-color, #3B82F6)}.library-grid-item.selected .library-grid-img{opacity:.7}.library-grid-item:hover .library-overlay-hover{opacity:1}.library-grid-img{object-fit:cover}.library-overlay-hover{inset:0;opacity:0;transition:opacity .15s ease}.library-check{top:6px;right:6px;width:22px;height:22px;box-shadow:0 1px 4px #00000026}.library-check mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.library-modal-footer{flex-shrink:0}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary{background-color:var(--cc-sf-accent-color, #3B82F6)!important;border-color:var(--cc-sf-accent-color, #3B82F6)!important;color:#fff!important;font-weight:600;padding-left:32px;padding-right:32px}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:hover{background-color:var(--cc-sf-btn-primary-hover-bg, #2563EB)!important}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-primary:disabled{background-color:#93c5fd!important;cursor:not-allowed}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline{font-weight:600;padding-left:24px;padding-right:24px;border-color:#d1d5db;color:#374151}.library-modal-footer .library-footer-actions ::ng-deep .cc-btn-outline:hover{background-color:#f9fafb}.location-subtitle{line-height:1.5}.loc-tab-btn ::ng-deep button{width:100%}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning){background-color:var(--cc-sf-input-bg, #ffffff)!important;color:var(--cc-sf-label-color, #000000)!important;border:1px solid var(--cc-sf-input-disabled-border, #E5E7EB)}.loc-tab-btn ::ng-deep button:not(.cc-btn-warning):hover{background-color:var(--cc-sf-input-disabled-bg, #F3F4F6)!important}.loc-venue-item{transition:box-shadow .15s ease,border-color .15s ease}.loc-venue-item:hover{box-shadow:0 2px 8px #0000000f;border-color:var(--cc-sf-input-hover-border, #9CA3AF)}.loc-venue-search-icon{width:18px;height:18px;line-height:18px;flex-shrink:0}.loc-venue-text{white-space:nowrap;text-overflow:ellipsis}.loc-action-btn{transition:background .15s ease,color .15s ease;flex-shrink:0}.loc-action-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.loc-action-btn.loc-delete-btn{color:var(--loc-delete-color, #E53E3E)}.loc-action-btn.loc-delete-btn:hover{background:var(--cc-sf-error-bg, #FEF2F2)}.loc-action-btn.loc-edit-btn{color:var(--cc-sf-hint-color, #9CA3AF)}.loc-action-btn.loc-edit-btn:hover{color:var(--cc-sf-input-focus-border, #3B82F6);background:var(--cc-sf-dropzone-hover-bg, #EFF6FF)}.loc-search-icon{left:.75rem;width:1.1rem;height:1.1rem;line-height:1.1rem;z-index:1}.loc-suggestions-panel{top:calc(100% + 4px);left:0;right:0;z-index:300;box-shadow:0 8px 24px #0000001a;animation:mu-fade-in .15s ease;max-height:260px;overflow-y:auto}.loc-suggestion-item{transition:background .12s ease}.loc-suggestion-item:hover,.loc-suggestion-item:focus{background:var(--loc-suggestion-hover-bg, #F0F9FF)}.loc-suggestion-item:not(:last-child){border-bottom:1px solid var(--cc-sf-input-disabled-border, #F3F4F6)}.loc-suggestion-icon{width:18px;height:18px;line-height:18px;flex-shrink:0}.loc-suggestion-text{white-space:nowrap;text-overflow:ellipsis}.loc-add-btn{transition:opacity .15s ease}.loc-add-btn mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.loc-add-btn:hover{opacity:.8}.loc-map-container{box-shadow:0 2px 10px #0000000f}.loc-tba-panel{min-height:120px}.loc-tba-icon{width:40px;height:40px;line-height:40px;opacity:.6}.loc-tba-text{line-height:1.6;max-width:360px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: ExpressionService }, { type: i3.HttpClient }], propDecorators: { config: [{
                 type: Input
             }], controller: [{
@@ -3066,11 +3144,11 @@ class SmartFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, deps: [{ token: i1$3.FormBuilder }, { token: SmartFormController }, { token: ExpressionService }, { token: i3.HttpClient }, { token: SnackbarService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartFormComponent, isStandalone: false, selector: "lib-smart-form", inputs: { formJson: "formJson", initialValues: "initialValues", enableDraftAutoSave: "enableDraftAutoSave", labels: "labels", mode: "mode", readOnly: "readOnly" }, outputs: { submit: "submit", draftSave: "draftSave", actionClick: "actionClick", valueChange: "valueChange", fileAdded: "fileAdded", fileUploadFinished: "fileUploadFinished", fileRemoved: "fileRemoved", stepChange: "stepChange" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\n\n  <!-- \u2550\u2550 Skeleton loader \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"smart-form-skeleton\" *ngIf=\"!isFormReady\" aria-hidden=\"true\">\n\n    <!-- Title + description -->\n    <div class=\"skel-header\">\n      <div class=\"skel-block skel-title\" style=\"--sd: 0s\"></div>\n      <div class=\"skel-block skel-desc\" style=\"--sd: 0.07s\"></div>\n    </div>\n\n    <!-- Section 1 \u2014 two full-width fields -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.1s; width: 32%\"></div>\n      <div class=\"skel-fields skel-fields--two\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.13s; width: 55%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.15s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.16s; width: 45%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.18s\"></div>\n        </div>\n        <div class=\"skel-field skel-field--full\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.2s; width: 38%\"></div>\n          <div class=\"skel-block skel-input skel-input--textarea\" style=\"--sd: 0.22s\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Section 2 \u2014 three columns -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.25s; width: 24%\"></div>\n      <div class=\"skel-fields skel-fields--three\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.28s; width: 60%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.30s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.31s; width: 50%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.33s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.34s; width: 65%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.36s\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Section 3 \u2014 two columns + chip row -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.38s; width: 28%\"></div>\n      <div class=\"skel-fields skel-fields--two\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.40s; width: 48%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.42s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.43s; width: 55%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.45s\"></div>\n        </div>\n      </div>\n      <div class=\"skel-chips\">\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.47s; width: 72px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.49s; width: 96px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.51s; width: 80px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.53s; width: 64px\"></div>\n      </div>\n    </div>\n\n    <!-- Action bar -->\n    <div class=\"skel-actions\">\n      <div class=\"skel-block skel-btn\" style=\"--sd: 0.55s; width: 88px\"></div>\n      <div class=\"skel-block skel-btn skel-btn--primary\" style=\"--sd: 0.58s; width: 120px\"></div>\n    </div>\n  </div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION STEPPER layout \u2014 stepper nav card + per-step form panels.\n       Rendered when formSchema.sectionStepper === true.\n       The nav and each step section are separate cards (no outer wrapper card).\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <ng-container *ngIf=\"formSchema && isFormReady && isSectionStepper\">\n\n    <!-- Horizontal stepper nav card -->\n    <div class=\"section-stepper-nav\" *ngIf=\"sectionSteps.length > 0\">\n      <div class=\"section-stepper-track\">\n        <div\n          *ngFor=\"let step of sectionSteps; let i = index\"\n          class=\"section-stepper-step\"\n          [class.ss-active]=\"i === currentSectionStep\"\n          [class.ss-completed]=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\n          [class.ss-warning]=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\n          [attr.data-tooltip]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\"\n          (click)=\"goToSectionStep(i)\">\n\n          <!-- Connector line \u2014 left side (hidden for first step) -->\n          <div class=\"ss-connector ss-connector--left\" *ngIf=\"i > 0\"></div>\n\n          <!-- Step badge -->\n          <div class=\"ss-badge\">\n            <!-- Green checkmark: visited and valid -->\n            <svg *ngIf=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\n                 width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n                 fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n            <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->\n            <span *ngIf=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\n                  class=\"ss-warning-mark\">!</span>\n            <!-- Number: current or future step -->\n            <span *ngIf=\"i >= currentSectionStep\">{{ i + 1 }}</span>\n          </div>\n\n          <!-- Step label (truncated; full text revealed by CSS tooltip) -->\n          <div class=\"ss-label\" [title]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\">\n            {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}\n          </div>\n\n          <!-- Connector line \u2014 right side (hidden for last step) -->\n          <div class=\"ss-connector ss-connector--right\" *ngIf=\"i < sectionSteps.length - 1\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Step panels \u2014 all mounted, only active one is visible (preserves form data) -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form ss-form\">\n      <div\n        *ngFor=\"let step of sectionSteps; let i = index\"\n        class=\"ss-step-panel\"\n        [style.display]=\"i === currentSectionStep ? 'block' : 'none'\">\n        <lib-form-section\n          [config]=\"getSectionStepConfig(step)\"\n          [controller]=\"controller\"\n          [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n    </form>\n\n  </ng-container>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       Regular card wrapper \u2014 used for SECTION and STEPPER form types.\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema && isFormReady && !isSectionStepper\"\n       [class.smart-form-wrapper--readonly]=\"readOnly\">\n\n    <!-- Form Header -->\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\n    </div>\n\n    <!-- STEPPER type nav -->\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\n          [class.completed]=\"i < currentStep\">\n          <div class=\"step-number\">{{ i + 1 }}</div>\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\n      <!-- Regular SECTION form -->\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n\n      <!-- STEPPER type form -->\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n    </form>\n\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false && !readOnly && actionBarConfig?.buttons?.length\">\n\n      <!-- LEFT GROUP -->\n      <div class=\"action-group action-group--left\">\n        <lib-button\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\n          [variant]=\"$any(btn.variant) || 'outline'\"\n          [disabled]=\"isButtonDisabled(btn)\"\n          (click)=\"handleButtonClick(btn)\">\n          {{ getButtonLabel(btn) }}\n        </lib-button>\n      </div>\n\n      <!-- RIGHT GROUP -->\n      <div class=\"action-group action-group--right\">\n        <lib-button\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\n          [variant]=\"$any(btn.variant) || 'primary'\"\n          [disabled]=\"isButtonDisabled(btn)\"\n          (click)=\"handleButtonClick(btn)\">\n          {{ getButtonLabel(btn) }}\n        </lib-button>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n", styles: ["@keyframes skel-wave{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes skel-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes form-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.smart-form-skeleton{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06));padding:1.5rem;display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px);animation:skel-fade-in .3s ease both}.skel-block{position:relative;overflow:hidden;border-radius:6px;background:var(--cc-sf-input-disabled-bg, #F0F2F5)}.skel-block:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent 100%);animation:skel-wave 1.8s ease-in-out infinite;animation-delay:var(--sd, 0s)}.skel-header{display:flex;flex-direction:column;gap:10px}.skel-header .skel-title{height:26px;border-radius:8px}.skel-header .skel-desc{height:14px;border-radius:5px;opacity:.7}.skel-section{display:flex;flex-direction:column;gap:14px}.skel-section-label{height:16px;border-radius:0 5px 5px 0;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);background:var(--cc-sf-input-disabled-bg, #F0F2F5);opacity:.85}.skel-fields{display:grid;gap:var(--cc-sf-grid-gap, 16px);align-items:start}.skel-fields--two{grid-template-columns:1fr 1fr}.skel-fields--three{grid-template-columns:1fr 1fr 1fr}@media(max-width:640px){.skel-fields--two,.skel-fields--three{grid-template-columns:1fr}}.skel-field{display:flex;flex-direction:column;gap:7px}.skel-field--full{grid-column:1/-1}.skel-label{height:12px;border-radius:4px;opacity:.75}.skel-input{height:42px;border-radius:8px}.skel-input--textarea{height:80px}.skel-chips{display:flex;flex-wrap:wrap;gap:8px}.skel-chip{height:32px;border-radius:20px;opacity:.8}.skel-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:20px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.skel-btn{height:40px;border-radius:8px}.skel-btn--primary{background:color-mix(in srgb,var(--cc-sf-accent-color, #3B82F6) 18%,var(--cc-sf-input-disabled-bg, #F0F2F5))}.smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06));padding:1.5rem;animation:form-reveal .3s ease both}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}@keyframes ss-badge-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes ss-pulse-ring{0%{box-shadow:0 0 #6366f173}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes ss-panel-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ss-connector-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.section-stepper-nav{position:relative;background:#fff;border-radius:16px;border:1px solid #E8EAF0;box-shadow:0 1px 3px #0000000d,0 4px 16px #6366f10f;padding:24px 28px 48px;margin-bottom:14px;overflow-x:clip;overflow-y:hidden}.section-stepper-nav:before{content:\"\";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.section-stepper-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:max-content;width:100%}.section-stepper-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;cursor:pointer;padding:0 4px}.section-stepper-step:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);white-space:nowrap;background:#1e1b4b;color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:5px 11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:200;box-shadow:0 4px 14px #0003}.section-stepper-step:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.section-stepper-step .ss-badge{width:38px;height:38px;min-width:38px;border-radius:50%;background:#f1f2f6;color:#9ca3af;border:2px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;position:relative;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.section-stepper-step .ss-badge span{line-height:1;letter-spacing:-.01em}.section-stepper-step .ss-badge svg{flex-shrink:0}.section-stepper-step .ss-badge .ss-warning-mark{font-size:1.25rem;font-weight:900;line-height:1;letter-spacing:0;color:#fff}.section-stepper-step .ss-label{margin-top:9px;font-size:.6875rem;font-weight:500;color:#b0b7c3;white-space:nowrap;text-align:center;transition:color .25s ease,font-weight .25s ease;max-width:88px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.section-stepper-step .ss-connector{height:2px;background:#e8eaf0;position:absolute;top:19px;z-index:0;overflow:hidden;border-radius:2px}.section-stepper-step .ss-connector--left{left:0;right:calc(50% + 19px)}.section-stepper-step .ss-connector--right{left:calc(50% + 19px);right:0}.section-stepper-step .ss-connector:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.section-stepper-step.ss-active{cursor:default}.section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;box-shadow:0 0 0 4px #6366f12e,0 4px 12px #6366f159;animation:ss-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both,ss-pulse-ring 2s .4s ease-out infinite}.section-stepper-step.ss-active .ss-label{color:#4f46e5;font-weight:700}.section-stepper-step.ss-completed .ss-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px #10b9814d}.section-stepper-step.ss-completed .ss-label{color:#6b7280;font-weight:500}.section-stepper-step.ss-completed .ss-connector--left:after,.section-stepper-step.ss-completed .ss-connector--right:after{transform:scaleX(1)}.section-stepper-step.ss-warning .ss-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 2px 8px #f59e0b59;animation:ss-badge-pop .35s cubic-bezier(.34,1.56,.64,1) both}.section-stepper-step.ss-warning .ss-label{color:#b45309;font-weight:600}.section-stepper-step.ss-warning .ss-connector--left:after{transform:scaleX(0)}.section-stepper-step.ss-warning .ss-connector--right:after{transform:scaleX(0)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{background:#e8eaf0;color:#6366f1;border-color:#c7d2fe;transform:translateY(-2px)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-label{color:#6b7280}.ss-step-panel{animation:ss-panel-in .35s cubic-bezier(.4,0,.2,1) both}.ss-form{padding-top:0}@media(max-width:768px){.section-stepper-nav{padding:20px 16px 16px}.section-stepper-step .ss-label{font-size:.625rem;max-width:64px}.section-stepper-step .ss-badge{width:32px;height:32px;min-width:32px;font-size:.75rem}.section-stepper-step .ss-connector{top:16px}.section-stepper-step .ss-connector--left{right:calc(50% + 16px)}.section-stepper-step .ss-connector--right{left:calc(50% + 16px)}}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{padding-top:var(--cc-sf-form-padding, 24px);display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px)}.smart-form>*{margin-bottom:0!important}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);margin-top:8px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormSectionComponent, selector: "lib-form-section", inputs: ["config", "controller", "formGroup"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartFormComponent, isStandalone: false, selector: "lib-smart-form", inputs: { formJson: "formJson", initialValues: "initialValues", enableDraftAutoSave: "enableDraftAutoSave", labels: "labels", mode: "mode", readOnly: "readOnly" }, outputs: { submit: "submit", draftSave: "draftSave", actionClick: "actionClick", valueChange: "valueChange", fileAdded: "fileAdded", fileUploadFinished: "fileUploadFinished", fileRemoved: "fileRemoved", stepChange: "stepChange" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\n\n  <!-- \u2550\u2550 Skeleton loader \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"smart-form-skeleton\" *ngIf=\"!isFormReady\" aria-hidden=\"true\">\n\n    <!-- Title + description -->\n    <div class=\"skel-header\">\n      <div class=\"skel-block skel-title\" style=\"--sd: 0s\"></div>\n      <div class=\"skel-block skel-desc\" style=\"--sd: 0.07s\"></div>\n    </div>\n\n    <!-- Section 1 \u2014 two full-width fields -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.1s; width: 32%\"></div>\n      <div class=\"skel-fields skel-fields--two\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.13s; width: 55%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.15s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.16s; width: 45%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.18s\"></div>\n        </div>\n        <div class=\"skel-field skel-field--full\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.2s; width: 38%\"></div>\n          <div class=\"skel-block skel-input skel-input--textarea\" style=\"--sd: 0.22s\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Section 2 \u2014 three columns -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.25s; width: 24%\"></div>\n      <div class=\"skel-fields skel-fields--three\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.28s; width: 60%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.30s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.31s; width: 50%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.33s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.34s; width: 65%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.36s\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Section 3 \u2014 two columns + chip row -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.38s; width: 28%\"></div>\n      <div class=\"skel-fields skel-fields--two\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.40s; width: 48%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.42s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.43s; width: 55%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.45s\"></div>\n        </div>\n      </div>\n      <div class=\"skel-chips\">\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.47s; width: 72px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.49s; width: 96px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.51s; width: 80px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.53s; width: 64px\"></div>\n      </div>\n    </div>\n\n    <!-- Action bar -->\n    <div class=\"skel-actions\">\n      <div class=\"skel-block skel-btn\" style=\"--sd: 0.55s; width: 88px\"></div>\n      <div class=\"skel-block skel-btn skel-btn--primary\" style=\"--sd: 0.58s; width: 120px\"></div>\n    </div>\n  </div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION STEPPER layout \u2014 stepper nav card + per-step form panels.\n       Rendered when formSchema.sectionStepper === true.\n       The nav and each step section are separate cards (no outer wrapper card).\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <ng-container *ngIf=\"formSchema && isFormReady && isSectionStepper\">\n\n    <!-- Horizontal stepper nav card -->\n    <div class=\"section-stepper-nav\" *ngIf=\"sectionSteps.length > 0\">\n      <div class=\"section-stepper-track\">\n        <div\n          *ngFor=\"let step of sectionSteps; let i = index\"\n          class=\"section-stepper-step\"\n          [class.ss-active]=\"i === currentSectionStep\"\n          [class.ss-completed]=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\n          [class.ss-warning]=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\n          [attr.data-tooltip]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\"\n          (click)=\"goToSectionStep(i)\">\n\n          <!-- Connector line \u2014 left side (hidden for first step) -->\n          <div class=\"ss-connector ss-connector--left\" *ngIf=\"i > 0\"></div>\n\n          <!-- Step badge -->\n          <div class=\"ss-badge\">\n            <!-- Green checkmark: visited and valid -->\n            <svg *ngIf=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\n                 width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n                 fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n            <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->\n            <span *ngIf=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\n                  class=\"ss-warning-mark\">!</span>\n            <!-- Number: current or future step -->\n            <span *ngIf=\"i >= currentSectionStep\">{{ i + 1 }}</span>\n          </div>\n\n          <!-- Step label (truncated; full text revealed by CSS tooltip) -->\n          <div class=\"ss-label\" [title]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\">\n            {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}\n          </div>\n\n          <!-- Connector line \u2014 right side (hidden for last step) -->\n          <div class=\"ss-connector ss-connector--right\" *ngIf=\"i < sectionSteps.length - 1\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Step panels \u2014 all mounted, only active one is visible (preserves form data) -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form ss-form\">\n      <div\n        *ngFor=\"let step of sectionSteps; let i = index\"\n        class=\"ss-step-panel\"\n        [style.display]=\"i === currentSectionStep ? 'block' : 'none'\">\n        <lib-form-section\n          [config]=\"getSectionStepConfig(step)\"\n          [controller]=\"controller\"\n          [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n    </form>\n\n    <!-- \u2500\u2500 Action bar: Prev / custom action buttons / Next \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"form-actions\"\n         *ngIf=\"!readOnly && formSchema.showActions !== false\">\n\n      <!-- LEFT GROUP: Previous button + left-aligned custom buttons -->\n      <div class=\"action-group action-group--left\">\n        <lib-button\n          *ngIf=\"!isSectionStepFirst\"\n          variant=\"outline\"\n          (click)=\"navigateToPrevious()\">\n          {{ previousLabel }}\n        </lib-button>\n        <ng-container *ngFor=\"let btn of getButtonsForAlignment('left')\">\n          <lib-button\n            *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\n            [variant]=\"$any(btn.variant) || 'outline'\"\n            [disabled]=\"isButtonDisabled(btn)\"\n            (click)=\"handleButtonClick(btn)\">\n            {{ getButtonLabel(btn) }}\n          </lib-button>\n        </ng-container>\n      </div>\n\n      <!-- RIGHT GROUP: right-aligned custom buttons + Next button -->\n      <div class=\"action-group action-group--right\">\n        <ng-container *ngFor=\"let btn of getButtonsForAlignment('right')\">\n          <lib-button\n            *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\n            [variant]=\"$any(btn.variant) || 'primary'\"\n            [disabled]=\"isButtonDisabled(btn)\"\n            (click)=\"handleButtonClick(btn)\">\n            {{ getButtonLabel(btn) }}\n          </lib-button>\n        </ng-container>\n        <lib-button\n          *ngIf=\"!isSectionStepLast\"\n          variant=\"primary\"\n          (click)=\"navigateToNext()\">\n          {{ nextLabel }}\n        </lib-button>\n      </div>\n\n    </div>\n\n  </ng-container>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       Regular card wrapper \u2014 used for SECTION and STEPPER form types.\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema && isFormReady && !isSectionStepper\"\n       [class.smart-form-wrapper--readonly]=\"readOnly\">\n\n    <!-- Form Header -->\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\n    </div>\n\n    <!-- STEPPER type nav -->\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\n          [class.completed]=\"i < currentStep\">\n          <div class=\"step-number\">{{ i + 1 }}</div>\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\n      <!-- Regular SECTION form -->\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n\n      <!-- STEPPER type form -->\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n    </form>\n\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false && !readOnly && actionBarConfig?.buttons?.length\">\n\n      <!-- LEFT GROUP -->\n      <div class=\"action-group action-group--left\">\n        <lib-button\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\n          [variant]=\"$any(btn.variant) || 'outline'\"\n          [disabled]=\"isButtonDisabled(btn)\"\n          (click)=\"handleButtonClick(btn)\">\n          {{ getButtonLabel(btn) }}\n        </lib-button>\n      </div>\n\n      <!-- RIGHT GROUP -->\n      <div class=\"action-group action-group--right\">\n        <lib-button\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\n          [variant]=\"$any(btn.variant) || 'primary'\"\n          [disabled]=\"isButtonDisabled(btn)\"\n          (click)=\"handleButtonClick(btn)\">\n          {{ getButtonLabel(btn) }}\n        </lib-button>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n", styles: ["@keyframes skel-wave{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes skel-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes form-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.smart-form-skeleton{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06));padding:1.5rem;display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px);animation:skel-fade-in .3s ease both}.skel-block{position:relative;overflow:hidden;border-radius:6px;background:var(--cc-sf-input-disabled-bg, #F0F2F5)}.skel-block:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent 100%);animation:skel-wave 1.8s ease-in-out infinite;animation-delay:var(--sd, 0s)}.skel-header{display:flex;flex-direction:column;gap:10px}.skel-header .skel-title{height:26px;border-radius:8px}.skel-header .skel-desc{height:14px;border-radius:5px;opacity:.7}.skel-section{display:flex;flex-direction:column;gap:14px}.skel-section-label{height:16px;border-radius:0 5px 5px 0;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);background:var(--cc-sf-input-disabled-bg, #F0F2F5);opacity:.85}.skel-fields{display:grid;gap:var(--cc-sf-grid-gap, 16px);align-items:start}.skel-fields--two{grid-template-columns:1fr 1fr}.skel-fields--three{grid-template-columns:1fr 1fr 1fr}@media(max-width:640px){.skel-fields--two,.skel-fields--three{grid-template-columns:1fr}}.skel-field{display:flex;flex-direction:column;gap:7px}.skel-field--full{grid-column:1/-1}.skel-label{height:12px;border-radius:4px;opacity:.75}.skel-input{height:42px;border-radius:8px}.skel-input--textarea{height:80px}.skel-chips{display:flex;flex-wrap:wrap;gap:8px}.skel-chip{height:32px;border-radius:20px;opacity:.8}.skel-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:20px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.skel-btn{height:40px;border-radius:8px}.skel-btn--primary{background:color-mix(in srgb,var(--cc-sf-accent-color, #3B82F6) 18%,var(--cc-sf-input-disabled-bg, #F0F2F5))}.smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06));padding:1.5rem;animation:form-reveal .3s ease both}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}@keyframes ss-badge-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes ss-pulse-ring{0%{box-shadow:0 0 #6366f173}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes ss-panel-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ss-connector-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.section-stepper-nav{position:relative;background:#fff;border-radius:16px;border:1px solid #E8EAF0;box-shadow:0 1px 3px #0000000d,0 4px 16px #6366f10f;padding:24px 28px 48px;margin-bottom:14px;overflow-x:clip;overflow-y:hidden}.section-stepper-nav:before{content:\"\";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.section-stepper-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:max-content;width:100%}.section-stepper-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;cursor:pointer;padding:0 4px}.section-stepper-step:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);white-space:nowrap;background:#1e1b4b;color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:5px 11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:200;box-shadow:0 4px 14px #0003}.section-stepper-step:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.section-stepper-step .ss-badge{width:38px;height:38px;min-width:38px;border-radius:50%;background:#f1f2f6;color:#9ca3af;border:2px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;position:relative;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.section-stepper-step .ss-badge span{line-height:1;letter-spacing:-.01em}.section-stepper-step .ss-badge svg{flex-shrink:0}.section-stepper-step .ss-badge .ss-warning-mark{font-size:1.25rem;font-weight:900;line-height:1;letter-spacing:0;color:#fff}.section-stepper-step .ss-label{margin-top:9px;font-size:.6875rem;font-weight:500;color:#b0b7c3;white-space:nowrap;text-align:center;transition:color .25s ease,font-weight .25s ease;max-width:88px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.section-stepper-step .ss-connector{height:2px;background:#e8eaf0;position:absolute;top:19px;z-index:0;overflow:hidden;border-radius:2px}.section-stepper-step .ss-connector--left{left:0;right:calc(50% + 19px)}.section-stepper-step .ss-connector--right{left:calc(50% + 19px);right:0}.section-stepper-step .ss-connector:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.section-stepper-step.ss-active{cursor:default}.section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;box-shadow:0 0 0 4px #6366f12e,0 4px 12px #6366f159;animation:ss-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both,ss-pulse-ring 2s .4s ease-out infinite}.section-stepper-step.ss-active .ss-label{color:#4f46e5;font-weight:700}.section-stepper-step.ss-completed .ss-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px #10b9814d}.section-stepper-step.ss-completed .ss-label{color:#6b7280;font-weight:500}.section-stepper-step.ss-completed .ss-connector--left:after,.section-stepper-step.ss-completed .ss-connector--right:after{transform:scaleX(1)}.section-stepper-step.ss-warning .ss-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 2px 8px #f59e0b59;animation:ss-badge-pop .35s cubic-bezier(.34,1.56,.64,1) both}.section-stepper-step.ss-warning .ss-label{color:#b45309;font-weight:600}.section-stepper-step.ss-warning .ss-connector--left:after{transform:scaleX(0)}.section-stepper-step.ss-warning .ss-connector--right:after{transform:scaleX(0)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{background:#e8eaf0;color:#6366f1;border-color:#c7d2fe;transform:translateY(-2px)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-label{color:#6b7280}.ss-step-panel{animation:ss-panel-in .35s cubic-bezier(.4,0,.2,1) both}.ss-form{padding-top:0}@media(max-width:768px){.section-stepper-nav{padding:20px 16px 16px}.section-stepper-step .ss-label{font-size:.625rem;max-width:64px}.section-stepper-step .ss-badge{width:32px;height:32px;min-width:32px;font-size:.75rem}.section-stepper-step .ss-connector{top:16px}.section-stepper-step .ss-connector--left{right:calc(50% + 16px)}.section-stepper-step .ss-connector--right{left:calc(50% + 16px)}}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px)}.smart-form>*{margin-bottom:0!important}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);margin-top:8px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormSectionComponent, selector: "lib-form-section", inputs: ["config", "controller", "formGroup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\n\n  <!-- \u2550\u2550 Skeleton loader \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"smart-form-skeleton\" *ngIf=\"!isFormReady\" aria-hidden=\"true\">\n\n    <!-- Title + description -->\n    <div class=\"skel-header\">\n      <div class=\"skel-block skel-title\" style=\"--sd: 0s\"></div>\n      <div class=\"skel-block skel-desc\" style=\"--sd: 0.07s\"></div>\n    </div>\n\n    <!-- Section 1 \u2014 two full-width fields -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.1s; width: 32%\"></div>\n      <div class=\"skel-fields skel-fields--two\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.13s; width: 55%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.15s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.16s; width: 45%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.18s\"></div>\n        </div>\n        <div class=\"skel-field skel-field--full\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.2s; width: 38%\"></div>\n          <div class=\"skel-block skel-input skel-input--textarea\" style=\"--sd: 0.22s\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Section 2 \u2014 three columns -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.25s; width: 24%\"></div>\n      <div class=\"skel-fields skel-fields--three\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.28s; width: 60%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.30s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.31s; width: 50%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.33s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.34s; width: 65%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.36s\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Section 3 \u2014 two columns + chip row -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.38s; width: 28%\"></div>\n      <div class=\"skel-fields skel-fields--two\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.40s; width: 48%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.42s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.43s; width: 55%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.45s\"></div>\n        </div>\n      </div>\n      <div class=\"skel-chips\">\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.47s; width: 72px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.49s; width: 96px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.51s; width: 80px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.53s; width: 64px\"></div>\n      </div>\n    </div>\n\n    <!-- Action bar -->\n    <div class=\"skel-actions\">\n      <div class=\"skel-block skel-btn\" style=\"--sd: 0.55s; width: 88px\"></div>\n      <div class=\"skel-block skel-btn skel-btn--primary\" style=\"--sd: 0.58s; width: 120px\"></div>\n    </div>\n  </div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION STEPPER layout \u2014 stepper nav card + per-step form panels.\n       Rendered when formSchema.sectionStepper === true.\n       The nav and each step section are separate cards (no outer wrapper card).\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <ng-container *ngIf=\"formSchema && isFormReady && isSectionStepper\">\n\n    <!-- Horizontal stepper nav card -->\n    <div class=\"section-stepper-nav\" *ngIf=\"sectionSteps.length > 0\">\n      <div class=\"section-stepper-track\">\n        <div\n          *ngFor=\"let step of sectionSteps; let i = index\"\n          class=\"section-stepper-step\"\n          [class.ss-active]=\"i === currentSectionStep\"\n          [class.ss-completed]=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\n          [class.ss-warning]=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\n          [attr.data-tooltip]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\"\n          (click)=\"goToSectionStep(i)\">\n\n          <!-- Connector line \u2014 left side (hidden for first step) -->\n          <div class=\"ss-connector ss-connector--left\" *ngIf=\"i > 0\"></div>\n\n          <!-- Step badge -->\n          <div class=\"ss-badge\">\n            <!-- Green checkmark: visited and valid -->\n            <svg *ngIf=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\n                 width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n                 fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n            <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->\n            <span *ngIf=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\n                  class=\"ss-warning-mark\">!</span>\n            <!-- Number: current or future step -->\n            <span *ngIf=\"i >= currentSectionStep\">{{ i + 1 }}</span>\n          </div>\n\n          <!-- Step label (truncated; full text revealed by CSS tooltip) -->\n          <div class=\"ss-label\" [title]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\">\n            {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}\n          </div>\n\n          <!-- Connector line \u2014 right side (hidden for last step) -->\n          <div class=\"ss-connector ss-connector--right\" *ngIf=\"i < sectionSteps.length - 1\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Step panels \u2014 all mounted, only active one is visible (preserves form data) -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form ss-form\">\n      <div\n        *ngFor=\"let step of sectionSteps; let i = index\"\n        class=\"ss-step-panel\"\n        [style.display]=\"i === currentSectionStep ? 'block' : 'none'\">\n        <lib-form-section\n          [config]=\"getSectionStepConfig(step)\"\n          [controller]=\"controller\"\n          [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n    </form>\n\n  </ng-container>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       Regular card wrapper \u2014 used for SECTION and STEPPER form types.\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema && isFormReady && !isSectionStepper\"\n       [class.smart-form-wrapper--readonly]=\"readOnly\">\n\n    <!-- Form Header -->\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\n    </div>\n\n    <!-- STEPPER type nav -->\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\n          [class.completed]=\"i < currentStep\">\n          <div class=\"step-number\">{{ i + 1 }}</div>\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\n      <!-- Regular SECTION form -->\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n\n      <!-- STEPPER type form -->\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n    </form>\n\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false && !readOnly && actionBarConfig?.buttons?.length\">\n\n      <!-- LEFT GROUP -->\n      <div class=\"action-group action-group--left\">\n        <lib-button\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\n          [variant]=\"$any(btn.variant) || 'outline'\"\n          [disabled]=\"isButtonDisabled(btn)\"\n          (click)=\"handleButtonClick(btn)\">\n          {{ getButtonLabel(btn) }}\n        </lib-button>\n      </div>\n\n      <!-- RIGHT GROUP -->\n      <div class=\"action-group action-group--right\">\n        <lib-button\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\n          [variant]=\"$any(btn.variant) || 'primary'\"\n          [disabled]=\"isButtonDisabled(btn)\"\n          (click)=\"handleButtonClick(btn)\">\n          {{ getButtonLabel(btn) }}\n        </lib-button>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n", styles: ["@keyframes skel-wave{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes skel-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes form-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.smart-form-skeleton{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06));padding:1.5rem;display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px);animation:skel-fade-in .3s ease both}.skel-block{position:relative;overflow:hidden;border-radius:6px;background:var(--cc-sf-input-disabled-bg, #F0F2F5)}.skel-block:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent 100%);animation:skel-wave 1.8s ease-in-out infinite;animation-delay:var(--sd, 0s)}.skel-header{display:flex;flex-direction:column;gap:10px}.skel-header .skel-title{height:26px;border-radius:8px}.skel-header .skel-desc{height:14px;border-radius:5px;opacity:.7}.skel-section{display:flex;flex-direction:column;gap:14px}.skel-section-label{height:16px;border-radius:0 5px 5px 0;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);background:var(--cc-sf-input-disabled-bg, #F0F2F5);opacity:.85}.skel-fields{display:grid;gap:var(--cc-sf-grid-gap, 16px);align-items:start}.skel-fields--two{grid-template-columns:1fr 1fr}.skel-fields--three{grid-template-columns:1fr 1fr 1fr}@media(max-width:640px){.skel-fields--two,.skel-fields--three{grid-template-columns:1fr}}.skel-field{display:flex;flex-direction:column;gap:7px}.skel-field--full{grid-column:1/-1}.skel-label{height:12px;border-radius:4px;opacity:.75}.skel-input{height:42px;border-radius:8px}.skel-input--textarea{height:80px}.skel-chips{display:flex;flex-wrap:wrap;gap:8px}.skel-chip{height:32px;border-radius:20px;opacity:.8}.skel-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:20px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.skel-btn{height:40px;border-radius:8px}.skel-btn--primary{background:color-mix(in srgb,var(--cc-sf-accent-color, #3B82F6) 18%,var(--cc-sf-input-disabled-bg, #F0F2F5))}.smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06));padding:1.5rem;animation:form-reveal .3s ease both}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}@keyframes ss-badge-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes ss-pulse-ring{0%{box-shadow:0 0 #6366f173}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes ss-panel-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ss-connector-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.section-stepper-nav{position:relative;background:#fff;border-radius:16px;border:1px solid #E8EAF0;box-shadow:0 1px 3px #0000000d,0 4px 16px #6366f10f;padding:24px 28px 48px;margin-bottom:14px;overflow-x:clip;overflow-y:hidden}.section-stepper-nav:before{content:\"\";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.section-stepper-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:max-content;width:100%}.section-stepper-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;cursor:pointer;padding:0 4px}.section-stepper-step:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);white-space:nowrap;background:#1e1b4b;color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:5px 11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:200;box-shadow:0 4px 14px #0003}.section-stepper-step:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.section-stepper-step .ss-badge{width:38px;height:38px;min-width:38px;border-radius:50%;background:#f1f2f6;color:#9ca3af;border:2px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;position:relative;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.section-stepper-step .ss-badge span{line-height:1;letter-spacing:-.01em}.section-stepper-step .ss-badge svg{flex-shrink:0}.section-stepper-step .ss-badge .ss-warning-mark{font-size:1.25rem;font-weight:900;line-height:1;letter-spacing:0;color:#fff}.section-stepper-step .ss-label{margin-top:9px;font-size:.6875rem;font-weight:500;color:#b0b7c3;white-space:nowrap;text-align:center;transition:color .25s ease,font-weight .25s ease;max-width:88px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.section-stepper-step .ss-connector{height:2px;background:#e8eaf0;position:absolute;top:19px;z-index:0;overflow:hidden;border-radius:2px}.section-stepper-step .ss-connector--left{left:0;right:calc(50% + 19px)}.section-stepper-step .ss-connector--right{left:calc(50% + 19px);right:0}.section-stepper-step .ss-connector:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.section-stepper-step.ss-active{cursor:default}.section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;box-shadow:0 0 0 4px #6366f12e,0 4px 12px #6366f159;animation:ss-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both,ss-pulse-ring 2s .4s ease-out infinite}.section-stepper-step.ss-active .ss-label{color:#4f46e5;font-weight:700}.section-stepper-step.ss-completed .ss-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px #10b9814d}.section-stepper-step.ss-completed .ss-label{color:#6b7280;font-weight:500}.section-stepper-step.ss-completed .ss-connector--left:after,.section-stepper-step.ss-completed .ss-connector--right:after{transform:scaleX(1)}.section-stepper-step.ss-warning .ss-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 2px 8px #f59e0b59;animation:ss-badge-pop .35s cubic-bezier(.34,1.56,.64,1) both}.section-stepper-step.ss-warning .ss-label{color:#b45309;font-weight:600}.section-stepper-step.ss-warning .ss-connector--left:after{transform:scaleX(0)}.section-stepper-step.ss-warning .ss-connector--right:after{transform:scaleX(0)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{background:#e8eaf0;color:#6366f1;border-color:#c7d2fe;transform:translateY(-2px)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-label{color:#6b7280}.ss-step-panel{animation:ss-panel-in .35s cubic-bezier(.4,0,.2,1) both}.ss-form{padding-top:0}@media(max-width:768px){.section-stepper-nav{padding:20px 16px 16px}.section-stepper-step .ss-label{font-size:.625rem;max-width:64px}.section-stepper-step .ss-badge{width:32px;height:32px;min-width:32px;font-size:.75rem}.section-stepper-step .ss-connector{top:16px}.section-stepper-step .ss-connector--left{right:calc(50% + 16px)}.section-stepper-step .ss-connector--right{left:calc(50% + 16px)}}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{padding-top:var(--cc-sf-form-padding, 24px);display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px)}.smart-form>*{margin-bottom:0!important}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);margin-top:8px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"] }]
+            args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\n\n  <!-- \u2550\u2550 Skeleton loader \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"smart-form-skeleton\" *ngIf=\"!isFormReady\" aria-hidden=\"true\">\n\n    <!-- Title + description -->\n    <div class=\"skel-header\">\n      <div class=\"skel-block skel-title\" style=\"--sd: 0s\"></div>\n      <div class=\"skel-block skel-desc\" style=\"--sd: 0.07s\"></div>\n    </div>\n\n    <!-- Section 1 \u2014 two full-width fields -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.1s; width: 32%\"></div>\n      <div class=\"skel-fields skel-fields--two\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.13s; width: 55%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.15s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.16s; width: 45%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.18s\"></div>\n        </div>\n        <div class=\"skel-field skel-field--full\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.2s; width: 38%\"></div>\n          <div class=\"skel-block skel-input skel-input--textarea\" style=\"--sd: 0.22s\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Section 2 \u2014 three columns -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.25s; width: 24%\"></div>\n      <div class=\"skel-fields skel-fields--three\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.28s; width: 60%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.30s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.31s; width: 50%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.33s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.34s; width: 65%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.36s\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Section 3 \u2014 two columns + chip row -->\n    <div class=\"skel-section\">\n      <div class=\"skel-block skel-section-label\" style=\"--sd: 0.38s; width: 28%\"></div>\n      <div class=\"skel-fields skel-fields--two\">\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.40s; width: 48%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.42s\"></div>\n        </div>\n        <div class=\"skel-field\">\n          <div class=\"skel-block skel-label\" style=\"--sd: 0.43s; width: 55%\"></div>\n          <div class=\"skel-block skel-input\" style=\"--sd: 0.45s\"></div>\n        </div>\n      </div>\n      <div class=\"skel-chips\">\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.47s; width: 72px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.49s; width: 96px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.51s; width: 80px\"></div>\n        <div class=\"skel-block skel-chip\" style=\"--sd: 0.53s; width: 64px\"></div>\n      </div>\n    </div>\n\n    <!-- Action bar -->\n    <div class=\"skel-actions\">\n      <div class=\"skel-block skel-btn\" style=\"--sd: 0.55s; width: 88px\"></div>\n      <div class=\"skel-block skel-btn skel-btn--primary\" style=\"--sd: 0.58s; width: 120px\"></div>\n    </div>\n  </div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECTION STEPPER layout \u2014 stepper nav card + per-step form panels.\n       Rendered when formSchema.sectionStepper === true.\n       The nav and each step section are separate cards (no outer wrapper card).\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <ng-container *ngIf=\"formSchema && isFormReady && isSectionStepper\">\n\n    <!-- Horizontal stepper nav card -->\n    <div class=\"section-stepper-nav\" *ngIf=\"sectionSteps.length > 0\">\n      <div class=\"section-stepper-track\">\n        <div\n          *ngFor=\"let step of sectionSteps; let i = index\"\n          class=\"section-stepper-step\"\n          [class.ss-active]=\"i === currentSectionStep\"\n          [class.ss-completed]=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\n          [class.ss-warning]=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\n          [attr.data-tooltip]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\"\n          (click)=\"goToSectionStep(i)\">\n\n          <!-- Connector line \u2014 left side (hidden for first step) -->\n          <div class=\"ss-connector ss-connector--left\" *ngIf=\"i > 0\"></div>\n\n          <!-- Step badge -->\n          <div class=\"ss-badge\">\n            <!-- Green checkmark: visited and valid -->\n            <svg *ngIf=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\n                 width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\n                 fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n            <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->\n            <span *ngIf=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\n                  class=\"ss-warning-mark\">!</span>\n            <!-- Number: current or future step -->\n            <span *ngIf=\"i >= currentSectionStep\">{{ i + 1 }}</span>\n          </div>\n\n          <!-- Step label (truncated; full text revealed by CSS tooltip) -->\n          <div class=\"ss-label\" [title]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\">\n            {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}\n          </div>\n\n          <!-- Connector line \u2014 right side (hidden for last step) -->\n          <div class=\"ss-connector ss-connector--right\" *ngIf=\"i < sectionSteps.length - 1\"></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Step panels \u2014 all mounted, only active one is visible (preserves form data) -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form ss-form\">\n      <div\n        *ngFor=\"let step of sectionSteps; let i = index\"\n        class=\"ss-step-panel\"\n        [style.display]=\"i === currentSectionStep ? 'block' : 'none'\">\n        <lib-form-section\n          [config]=\"getSectionStepConfig(step)\"\n          [controller]=\"controller\"\n          [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n    </form>\n\n    <!-- \u2500\u2500 Action bar: Prev / custom action buttons / Next \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"form-actions\"\n         *ngIf=\"!readOnly && formSchema.showActions !== false\">\n\n      <!-- LEFT GROUP: Previous button + left-aligned custom buttons -->\n      <div class=\"action-group action-group--left\">\n        <lib-button\n          *ngIf=\"!isSectionStepFirst\"\n          variant=\"outline\"\n          (click)=\"navigateToPrevious()\">\n          {{ previousLabel }}\n        </lib-button>\n        <ng-container *ngFor=\"let btn of getButtonsForAlignment('left')\">\n          <lib-button\n            *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\n            [variant]=\"$any(btn.variant) || 'outline'\"\n            [disabled]=\"isButtonDisabled(btn)\"\n            (click)=\"handleButtonClick(btn)\">\n            {{ getButtonLabel(btn) }}\n          </lib-button>\n        </ng-container>\n      </div>\n\n      <!-- RIGHT GROUP: right-aligned custom buttons + Next button -->\n      <div class=\"action-group action-group--right\">\n        <ng-container *ngFor=\"let btn of getButtonsForAlignment('right')\">\n          <lib-button\n            *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\n            [variant]=\"$any(btn.variant) || 'primary'\"\n            [disabled]=\"isButtonDisabled(btn)\"\n            (click)=\"handleButtonClick(btn)\">\n            {{ getButtonLabel(btn) }}\n          </lib-button>\n        </ng-container>\n        <lib-button\n          *ngIf=\"!isSectionStepLast\"\n          variant=\"primary\"\n          (click)=\"navigateToNext()\">\n          {{ nextLabel }}\n        </lib-button>\n      </div>\n\n    </div>\n\n  </ng-container>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       Regular card wrapper \u2014 used for SECTION and STEPPER form types.\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema && isFormReady && !isSectionStepper\"\n       [class.smart-form-wrapper--readonly]=\"readOnly\">\n\n    <!-- Form Header -->\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\n    </div>\n\n    <!-- STEPPER type nav -->\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\n          [class.completed]=\"i < currentStep\">\n          <div class=\"step-number\">{{ i + 1 }}</div>\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\n      <!-- Regular SECTION form -->\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n\n      <!-- STEPPER type form -->\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\n        </lib-form-section>\n      </div>\n    </form>\n\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false && !readOnly && actionBarConfig?.buttons?.length\">\n\n      <!-- LEFT GROUP -->\n      <div class=\"action-group action-group--left\">\n        <lib-button\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\n          [variant]=\"$any(btn.variant) || 'outline'\"\n          [disabled]=\"isButtonDisabled(btn)\"\n          (click)=\"handleButtonClick(btn)\">\n          {{ getButtonLabel(btn) }}\n        </lib-button>\n      </div>\n\n      <!-- RIGHT GROUP -->\n      <div class=\"action-group action-group--right\">\n        <lib-button\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\n          [variant]=\"$any(btn.variant) || 'primary'\"\n          [disabled]=\"isButtonDisabled(btn)\"\n          (click)=\"handleButtonClick(btn)\">\n          {{ getButtonLabel(btn) }}\n        </lib-button>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n", styles: ["@keyframes skel-wave{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes skel-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes form-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.smart-form-skeleton{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06));padding:1.5rem;display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px);animation:skel-fade-in .3s ease both}.skel-block{position:relative;overflow:hidden;border-radius:6px;background:var(--cc-sf-input-disabled-bg, #F0F2F5)}.skel-block:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent 100%);animation:skel-wave 1.8s ease-in-out infinite;animation-delay:var(--sd, 0s)}.skel-header{display:flex;flex-direction:column;gap:10px}.skel-header .skel-title{height:26px;border-radius:8px}.skel-header .skel-desc{height:14px;border-radius:5px;opacity:.7}.skel-section{display:flex;flex-direction:column;gap:14px}.skel-section-label{height:16px;border-radius:0 5px 5px 0;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);background:var(--cc-sf-input-disabled-bg, #F0F2F5);opacity:.85}.skel-fields{display:grid;gap:var(--cc-sf-grid-gap, 16px);align-items:start}.skel-fields--two{grid-template-columns:1fr 1fr}.skel-fields--three{grid-template-columns:1fr 1fr 1fr}@media(max-width:640px){.skel-fields--two,.skel-fields--three{grid-template-columns:1fr}}.skel-field{display:flex;flex-direction:column;gap:7px}.skel-field--full{grid-column:1/-1}.skel-label{height:12px;border-radius:4px;opacity:.75}.skel-input{height:42px;border-radius:8px}.skel-input--textarea{height:80px}.skel-chips{display:flex;flex-wrap:wrap;gap:8px}.skel-chip{height:32px;border-radius:20px;opacity:.8}.skel-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:20px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.skel-btn{height:40px;border-radius:8px}.skel-btn--primary{background:color-mix(in srgb,var(--cc-sf-accent-color, #3B82F6) 18%,var(--cc-sf-input-disabled-bg, #F0F2F5))}.smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06));padding:1.5rem;animation:form-reveal .3s ease both}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}@keyframes ss-badge-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes ss-pulse-ring{0%{box-shadow:0 0 #6366f173}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes ss-panel-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ss-connector-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.section-stepper-nav{position:relative;background:#fff;border-radius:16px;border:1px solid #E8EAF0;box-shadow:0 1px 3px #0000000d,0 4px 16px #6366f10f;padding:24px 28px 48px;margin-bottom:14px;overflow-x:clip;overflow-y:hidden}.section-stepper-nav:before{content:\"\";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.section-stepper-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:max-content;width:100%}.section-stepper-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;cursor:pointer;padding:0 4px}.section-stepper-step:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);white-space:nowrap;background:#1e1b4b;color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:5px 11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:200;box-shadow:0 4px 14px #0003}.section-stepper-step:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.section-stepper-step .ss-badge{width:38px;height:38px;min-width:38px;border-radius:50%;background:#f1f2f6;color:#9ca3af;border:2px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;position:relative;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.section-stepper-step .ss-badge span{line-height:1;letter-spacing:-.01em}.section-stepper-step .ss-badge svg{flex-shrink:0}.section-stepper-step .ss-badge .ss-warning-mark{font-size:1.25rem;font-weight:900;line-height:1;letter-spacing:0;color:#fff}.section-stepper-step .ss-label{margin-top:9px;font-size:.6875rem;font-weight:500;color:#b0b7c3;white-space:nowrap;text-align:center;transition:color .25s ease,font-weight .25s ease;max-width:88px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.section-stepper-step .ss-connector{height:2px;background:#e8eaf0;position:absolute;top:19px;z-index:0;overflow:hidden;border-radius:2px}.section-stepper-step .ss-connector--left{left:0;right:calc(50% + 19px)}.section-stepper-step .ss-connector--right{left:calc(50% + 19px);right:0}.section-stepper-step .ss-connector:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.section-stepper-step.ss-active{cursor:default}.section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;box-shadow:0 0 0 4px #6366f12e,0 4px 12px #6366f159;animation:ss-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both,ss-pulse-ring 2s .4s ease-out infinite}.section-stepper-step.ss-active .ss-label{color:#4f46e5;font-weight:700}.section-stepper-step.ss-completed .ss-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px #10b9814d}.section-stepper-step.ss-completed .ss-label{color:#6b7280;font-weight:500}.section-stepper-step.ss-completed .ss-connector--left:after,.section-stepper-step.ss-completed .ss-connector--right:after{transform:scaleX(1)}.section-stepper-step.ss-warning .ss-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 2px 8px #f59e0b59;animation:ss-badge-pop .35s cubic-bezier(.34,1.56,.64,1) both}.section-stepper-step.ss-warning .ss-label{color:#b45309;font-weight:600}.section-stepper-step.ss-warning .ss-connector--left:after{transform:scaleX(0)}.section-stepper-step.ss-warning .ss-connector--right:after{transform:scaleX(0)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{background:#e8eaf0;color:#6366f1;border-color:#c7d2fe;transform:translateY(-2px)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-label{color:#6b7280}.ss-step-panel{animation:ss-panel-in .35s cubic-bezier(.4,0,.2,1) both}.ss-form{padding-top:0}@media(max-width:768px){.section-stepper-nav{padding:20px 16px 16px}.section-stepper-step .ss-label{font-size:.625rem;max-width:64px}.section-stepper-step .ss-badge{width:32px;height:32px;min-width:32px;font-size:.75rem}.section-stepper-step .ss-connector{top:16px}.section-stepper-step .ss-connector--left{right:calc(50% + 16px)}.section-stepper-step .ss-connector--right{left:calc(50% + 16px)}}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px)}.smart-form>*{margin-bottom:0!important}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);margin-top:8px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: SmartFormController }, { type: ExpressionService }, { type: i3.HttpClient }, { type: SnackbarService }, { type: i1$4.Router }], propDecorators: { formJson: [{
                 type: Input
             }], initialValues: [{
@@ -7574,7 +7652,8 @@ class ConfirmationModalComponent {
             const sizeMap = {
                 sm: '400px',
                 md: '560px',
-                lg: '720px'
+                lg: '720px',
+                xl: '1200px'
             };
             return sizeMap[this.mergedConfig.size];
         }
@@ -9228,1261 +9307,1612 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
-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,
-            AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
-            SummaryCardModule,
-            ConfigurableFormModule,
-            FormComponentsModule,
-            SmartFormModule,
-            SideNavModule,
-            FormBuilderModule], exports: [MaterialModule,
-            AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
-            SummaryCardModule,
-            ConfigurableFormModule,
-            FormComponentsModule,
-            SmartFormModule,
-            SideNavModule,
-            FormBuilderModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
-            MaterialModule,
-            AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
-            SummaryCardModule,
-            ConfigurableFormModule,
-            FormComponentsModule,
-            SmartFormModule,
-            SideNavModule,
-            FormBuilderModule, MaterialModule,
-            AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
-            SummaryCardModule,
-            ConfigurableFormModule,
-            FormComponentsModule,
-            SmartFormModule,
-            SideNavModule,
-            FormBuilderModule] });
+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: SharedUiModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [
-                        CommonModule,
-                        MaterialModule,
-                        AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
-                        SummaryCardModule,
-                        ConfigurableFormModule,
-                        FormComponentsModule,
-                        SmartFormModule,
-                        SideNavModule,
-                        FormBuilderModule
-                    ],
-                    exports: [
-                        MaterialModule,
-                        AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
-                        SummaryCardModule,
-                        ConfigurableFormModule,
-                        FormComponentsModule,
-                        SmartFormModule,
-                        SideNavModule,
-                        FormBuilderModule
-                    ],
-                }]
-        }] });
-
-/**
- * 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();
-};
+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
+            }] } });
 
-/**
- * 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'
-                }
-            ]
-        }
-    ],
-    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'
-                }
-            ]
-        }
-    ],
-};
-
-var configurableForm_examples = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    EXAMPLE_FORM_CONFIG: EXAMPLE_FORM_CONFIG,
-    TARGET_GROUP_CONFIG: TARGET_GROUP_CONFIG
-});
-
-class PaginationComponent {
+class SmartTableComponent {
+    http;
+    router;
+    cdr;
+    ngZone;
+    config;
+    /**
+     * External data mode: pass table rows directly from the parent.
+     * When this input is provided, the component will NOT make any internal API calls.
+     * Instead, it emits sortChange / pageChange / searchChange / filterChange events
+     * so the parent can fetch and supply updated data.
+     */
+    tableData;
+    /**
+     * Total number of items — used by the pagination component when operating in
+     * external-data mode. Must be kept in sync by the parent.
+     */
+    totalItemsCount;
+    action = new EventEmitter();
+    topAction = new EventEmitter(); // For top bar buttons
+    filterChange = new EventEmitter();
+    rowSelect = new EventEmitter();
+    columnClick = new EventEmitter();
+    /**
+     * Pre-selected row objects. These are tracked across pages.
+     * Matching incoming data rows (via rowIdField) will be checked automatically.
+     */
+    selectedRows = [];
+    /** Emitted in external-data mode when the user changes the sort column/direction. */
+    sortChange = new EventEmitter();
+    /** Emitted in external-data mode when the user changes the page or page size. */
+    pageChange = new EventEmitter();
+    /** Emitted in external-data mode when the user types in the search box. */
+    searchChange = new EventEmitter();
+    data = [];
     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() { }
+    loading = false;
+    // State
+    activeSort = { key: '', direction: 'ASC' };
+    isSortActive = false; // true only when orderBy is explicitly configured or user has sorted
+    activeFilters = {};
+    searchTerm = '';
+    stickyColumnStyles = {};
+    hasStickyColumns = false;
+    openDropdownId = null;
+    /** Viewport-relative position used to render the dropdown as position:fixed. */
+    dropdownPosition = { top: 0, right: 0 };
+    // --- Delete confirmation modal state ---
+    deleteModalOpen = false;
+    deleteModalConfig = {};
+    pendingDeleteAction = null;
+    searchSubject = new Subject();
+    stickyHeaders;
+    resizeObserver = null;
+    locale = inject(LOCALE_ID);
+    constructor(http, router, cdr, ngZone) {
+        this.http = http;
+        this.router = router;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        // Debounce search input
+        this.searchSubject.pipe(debounceTime(this.config?.searchConfig?.debounceTime || 300), distinctUntilChanged()).subscribe(term => {
+            this.searchTerm = term;
+            this.currentPage = 1;
+            if (this.tableData !== undefined) {
+                // External-data mode: delegate to parent via event
+                this.searchChange.emit(this.buildChangeEvent());
+            }
+            else {
+                this.loadData();
+            }
+        });
+    }
     ngOnInit() {
-        this.calculatePagination();
+        if (this.config) {
+            if (this.config.sortBy) {
+                this.activeSort.key = this.config.sortBy;
+            }
+            if (this.config.orderBy) {
+                this.activeSort.direction = this.config.orderBy;
+                this.isSortActive = true;
+            }
+            this.loadFilterOptions();
+            if (this.tableData !== undefined) {
+                // External-data mode: sync incoming data, skip internal API call
+                this.data = this.tableData;
+                if (this.totalItemsCount !== undefined) {
+                    this.totalItems = this.totalItemsCount;
+                }
+            }
+            else {
+                this.loadData();
+            }
+        }
     }
     ngOnChanges(changes) {
-        if (changes['totalItems'] || changes['itemsPerPage'] || changes['currentPage']) {
-            this.calculatePagination();
+        // External data changed — sync directly without an API call
+        if (changes['tableData']) {
+            this.data = this.tableData || [];
         }
-    }
-    calculatePagination() {
-        this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
-        // Ensure current page is valid
-        if (this.currentPage < 1) {
-            this.currentPage = 1;
+        // Total count updated from parent
+        if (changes['totalItemsCount'] && this.totalItemsCount !== undefined) {
+            this.totalItems = this.totalItemsCount;
         }
-        else if (this.currentPage > this.totalPages && this.totalPages > 0) {
-            this.currentPage = this.totalPages;
+        // Config changed (non-first) — reload filter opts; reload data only if NOT in external mode
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.loadFilterOptions();
+            if (this.tableData === undefined) {
+                this.loadData();
+            }
+            setTimeout(() => this.calculateStickyPositions());
         }
-        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;
+        if (changes['selectedRows']) {
+            this.syncSelection();
         }
-        this.pages = this.getVisiblePages(this.currentPage, this.totalPages);
     }
-    getVisiblePages(current, total) {
-        if (total <= 7) {
-            return Array.from({ length: total }, (_, i) => i + 1);
+    ngAfterViewInit() {
+        this.setupResizeObserver();
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
         }
-        if (current <= 4) {
-            return [1, 2, 3, 4, 5, '...', total];
+    }
+    setupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
         }
-        if (current >= total - 3) {
-            return [1, '...', total - 4, total - 3, total - 2, total - 1, total];
+        this.resizeObserver = new ResizeObserver(() => {
+            this.ngZone.run(() => {
+                this.calculateStickyPositions();
+            });
+        });
+        if (this.stickyHeaders) {
+            this.stickyHeaders.changes.subscribe(() => {
+                this.observeHeaders();
+                // Also recalculate immediately
+                setTimeout(() => this.calculateStickyPositions());
+            });
+            this.observeHeaders();
         }
-        return [1, '...', current - 1, current, current + 1, '...', total];
     }
-    onPageChange(page) {
-        if (typeof page === 'string')
+    observeHeaders() {
+        if (!this.resizeObserver || !this.stickyHeaders)
             return;
-        if (page < 1 || page > this.totalPages || page === this.currentPage)
+        this.stickyHeaders.forEach(header => {
+            this.resizeObserver.observe(header.nativeElement);
+        });
+    }
+    loadData() {
+        if (!this.config?.apiUrl)
             return;
-        this.pageChange.emit(page);
+        this.loading = true;
+        let params;
+        // --- Query Params Construction ---
+        if (this.config.queryParamsConfig) {
+            const qpConfig = this.config.queryParamsConfig;
+            const pageKey = qpConfig.pageKey || 'page';
+            const sizeKey = qpConfig.sizeKey || 'pageSize';
+            const pageIndex = this.currentPage + (qpConfig.pageIndexOffset || 0);
+            let paramsObj = {
+                [pageKey]: pageIndex.toString(),
+                [sizeKey]: (this.config.pagination?.pageSize || 10).toString()
+            };
+            if (this.activeSort.key)
+                paramsObj['sortBy'] = this.activeSort.key;
+            // Only include orderBy if explicitly configured or user has sorted a column
+            if (this.isSortActive && this.activeSort.direction)
+                paramsObj['orderBy'] = this.activeSort.direction;
+            // Search Handling
+            if (this.searchTerm) {
+                const searchConfig = this.config.searchConfig;
+                const searchKey = searchConfig?.searchKey || 'search';
+                if (searchConfig?.handling === 'nested_string' && qpConfig.nestedStringConfig) {
+                    // Will be handled in nested string construction below
+                }
+                else {
+                    paramsObj[searchKey] = this.searchTerm;
+                }
+            }
+            // Filter Handling (and Search if nested)
+            if (qpConfig.filterHandling === 'nested_string' && qpConfig.nestedStringConfig) {
+                const { paramName, baseValue, separator, assignment } = qpConfig.nestedStringConfig;
+                let nestedString = baseValue || '';
+                const assign = assignment || '=';
+                // Add Filters
+                Object.keys(this.activeFilters).forEach(key => {
+                    if (this.activeFilters[key]) {
+                        const prefix = nestedString ? separator : '';
+                        nestedString += `${prefix}${key}${assign}${this.activeFilters[key]}`;
+                    }
+                });
+                // Add Search if nested
+                if (this.searchTerm && this.config.searchConfig?.handling === 'nested_string') {
+                    const searchKey = this.config.searchConfig.searchKey || 'SEARCH_TERM';
+                    const prefix = nestedString ? separator : '';
+                    nestedString += `${prefix}${searchKey}${assign}${this.searchTerm}`;
+                }
+                paramsObj[paramName] = nestedString;
+            }
+            else {
+                // Standard handling
+                Object.keys(this.activeFilters).forEach(key => {
+                    if (this.activeFilters[key])
+                        paramsObj[key] = this.activeFilters[key];
+                });
+            }
+            params = new HttpParams({ fromObject: paramsObj });
+        }
+        else {
+            // --- Default Behavior (Backward Compatibility) ---
+            let paramsObj = {};
+            if (this.config.pagination?.enabled) {
+                paramsObj['page'] = this.currentPage;
+                paramsObj['pageSize'] = this.config.pagination.pageSize;
+            }
+            if (this.activeSort.key) {
+                paramsObj['sortBy'] = this.activeSort.key;
+                // Only include orderBy if explicitly configured or user has sorted a column
+                if (this.isSortActive)
+                    paramsObj['orderBy'] = this.activeSort.direction;
+            }
+            if (this.searchTerm) {
+                const searchKey = this.config.searchConfig?.searchKey || 'search';
+                paramsObj[searchKey] = this.searchTerm;
+            }
+            Object.keys(this.activeFilters).forEach(key => {
+                if (this.activeFilters[key]) {
+                    paramsObj[key] = this.activeFilters[key];
+                }
+            });
+            // Custom Request Params Mapper (if provided)
+            if (this.config.requestParams) {
+                const customParams = this.config.requestParams(this.currentPage, this.config.pagination?.pageSize || 10, this.activeSort.key, this.activeSort.direction, this.searchTerm, this.activeFilters);
+                if (customParams instanceof HttpParams) {
+                    // If function returns HttpParams, use it directly (caveat: might lose previous params if not careful in mapper)
+                    params = customParams;
+                }
+                else {
+                    paramsObj = { ...paramsObj, ...customParams };
+                    params = new HttpParams({ fromObject: paramsObj });
+                }
+            }
+            else {
+                params = new HttpParams({ fromObject: paramsObj });
+            }
+        }
+        // --- Data Fetching ---
+        // Check for separate count API
+        const totalCountConfig = this.config.pagination?.totalCountConfig;
+        let request$; // Observable
+        if (totalCountConfig?.source === 'separate' && totalCountConfig.apiUrl) {
+            const headers = this.getHeaders();
+            const method = this.config.apiMethod || 'GET';
+            const body = this.config.apiPayload || {};
+            const dataRequest$ = method === 'POST' ? this.http.post(this.config.apiUrl, body, { params, headers }) : this.http.get(this.config.apiUrl, { params, headers });
+            const countRequest$ = method === 'POST' ? this.http.post(totalCountConfig.apiUrl, body, { params, headers }) : this.http.get(totalCountConfig.apiUrl, { params, headers });
+            request$ = forkJoin({
+                data: dataRequest$,
+                count: countRequest$
+            }).pipe(map(({ data, count }) => {
+                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
+                return {
+                    data: this.getValueByPath(data, dataPath),
+                    total: this.getValueByPath(count, totalCountConfig.responsePath || '')
+                };
+            }));
+        }
+        else {
+            const headers = this.getHeaders();
+            const method = this.config.apiMethod || 'GET';
+            const body = this.config.apiPayload || {};
+            const baseRequest$ = method === 'POST' ? this.http.post(this.config.apiUrl, body, { params, headers }) : this.http.get(this.config.apiUrl, { params, headers });
+            request$ = baseRequest$.pipe(map(response => {
+                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
+                const totalPath = totalCountConfig?.responsePath || '';
+                return {
+                    data: this.getValueByPath(response, dataPath),
+                    // If source is 'same', try to get total from response, else default 0
+                    total: totalCountConfig ? this.getValueByPath(response, totalPath) : 0
+                };
+            }));
+        }
+        request$.pipe(finalize(() => this.loading = false), catchError(err => {
+            console.error('Table Data Fetch Error', err);
+            return of({ data: [], total: 0 });
+        }))
+            .subscribe((result) => {
+            this.data = result.data || [];
+            if (this.config.pagination) {
+                this.totalItems = result.total || 0;
+            }
+            if (!this.config.columns || this.config.columns.length === 0) {
+                if (this.data && this.data.length > 0) {
+                    this.config.columns = Object.keys(this.data[0]).map(key => ({
+                        key: key,
+                        label: this.toTitleCase(key),
+                        type: 'text',
+                        sortable: false,
+                        editable: false
+                    }));
+                }
+            }
+            this.syncSelection();
+        });
     }
-    onItemsPerPageChange(event) {
-        const target = event.target;
-        const newSize = Number(target.value);
-        this.itemsPerPageChange.emit(newSize);
+    /**
+     * Syncs the locally loaded data set with the externally provided selectedRows.
+     * Marks 'selected' property on row objects to reflect checkbox state.
+     */
+    syncSelection() {
+        if (!this.data || !this.data.length || !this.config)
+            return;
+        const idField = this.config.rowIdField || 'id';
+        const selectedIds = new Set((this.selectedRows || []).map(r => r[idField]));
+        this.data.forEach(row => {
+            row.selected = selectedIds.has(row[idField]);
+        });
     }
-    nextPage() {
-        if (this.currentPage < this.totalPages) {
-            this.onPageChange(this.currentPage + 1);
+    // --- Actions ---
+    onPageChange(page) {
+        this.currentPage = page;
+        if (this.tableData !== undefined) {
+            this.pageChange.emit(this.buildChangeEvent());
+        }
+        else {
+            this.loadData();
         }
     }
-    prevPage() {
-        if (this.currentPage > 1) {
-            this.onPageChange(this.currentPage - 1);
+    onPageSizeChange(size) {
+        if (this.config.pagination) {
+            this.config.pagination.pageSize = size;
+            this.currentPage = 1; // Reset to first page
+            if (this.tableData !== undefined) {
+                this.pageChange.emit(this.buildChangeEvent());
+            }
+            else {
+                this.loadData();
+            }
         }
     }
-    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);
+    onSort(col) {
+        if (!col.sortable)
+            return;
+        if (this.activeSort.key === col.key) {
+            this.activeSort.direction = this.activeSort.direction === 'ASC' ? 'DESC' : 'ASC';
+        }
+        else {
+            this.activeSort.key = col.key;
+            this.activeSort.direction = 'ASC';
+        }
+        this.isSortActive = true; // User has actively sorted, include orderBy in API call
+        if (this.tableData !== undefined) {
+            // External-data mode: let the parent handle the API call
+            this.sortChange.emit(this.buildChangeEvent());
+        }
+        else {
+            this.loadData();
         }
     }
-    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);
+    onSearch(event) {
+        const value = event.target.value;
+        this.searchSubject.next(value);
     }
-    trackById(index, item) {
-        return item.id;
+    onFilterChange(key, event) {
+        const value = event.target.value;
+        this.activeFilters[key] = value;
+        this.currentPage = 1;
+        this.filterChange.emit({ key, value });
+        if (this.tableData === undefined) {
+            this.loadData();
+        }
     }
-    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
-                    ]
-                }]
-        }] });
-
-class SmartTableComponent {
-    http;
-    router;
-    cdr;
-    ngZone;
-    config;
-    /**
-     * External data mode: pass table rows directly from the parent.
-     * When this input is provided, the component will NOT make any internal API calls.
-     * Instead, it emits sortChange / pageChange / searchChange / filterChange events
-     * so the parent can fetch and supply updated data.
-     */
-    tableData;
+    // --- Private helpers ---
     /**
-     * Total number of items — used by the pagination component when operating in
-     * external-data mode. Must be kept in sync by the parent.
+     * Assembles the current table state into a `TableDataChangeEvent` object.
+     * Emitted to the parent in external-data mode so it can fetch and supply new data.
      */
-    totalItemsCount;
-    action = new EventEmitter();
-    topAction = new EventEmitter(); // For top bar buttons
-    filterChange = new EventEmitter();
-    rowSelect = new EventEmitter();
-    columnClick = new EventEmitter();
-    /** Emitted in external-data mode when the user changes the sort column/direction. */
-    sortChange = new EventEmitter();
-    /** Emitted in external-data mode when the user changes the page or page size. */
-    pageChange = new EventEmitter();
-    /** Emitted in external-data mode when the user types in the search box. */
-    searchChange = new EventEmitter();
-    data = [];
-    totalItems = 0;
-    currentPage = 1;
-    loading = false;
-    // State
-    activeSort = { key: '', direction: 'ASC' };
-    isSortActive = false; // true only when orderBy is explicitly configured or user has sorted
-    activeFilters = {};
-    searchTerm = '';
-    selectedRows = [];
-    stickyColumnStyles = {};
-    hasStickyColumns = false;
-    openDropdownId = null;
-    /** Viewport-relative position used to render the dropdown as position:fixed. */
-    dropdownPosition = { top: 0, right: 0 };
-    // --- Delete confirmation modal state ---
-    deleteModalOpen = false;
-    deleteModalConfig = {};
-    pendingDeleteAction = null;
-    searchSubject = new Subject();
-    stickyHeaders;
-    resizeObserver = null;
-    locale = inject(LOCALE_ID);
-    constructor(http, router, cdr, ngZone) {
-        this.http = http;
-        this.router = router;
-        this.cdr = cdr;
-        this.ngZone = ngZone;
-        // Debounce search input
-        this.searchSubject.pipe(debounceTime(this.config?.searchConfig?.debounceTime || 300), distinctUntilChanged()).subscribe(term => {
-            this.searchTerm = term;
-            this.currentPage = 1;
-            if (this.tableData !== undefined) {
-                // External-data mode: delegate to parent via event
-                this.searchChange.emit(this.buildChangeEvent());
-            }
-            else {
-                this.loadData();
-            }
-        });
+    buildChangeEvent() {
+        return {
+            page: this.currentPage,
+            pageSize: this.config.pagination?.pageSize || 10,
+            sortBy: this.activeSort.key || undefined,
+            orderBy: this.isSortActive ? this.activeSort.direction : undefined,
+            searchTerm: this.searchTerm || undefined,
+            filters: { ...this.activeFilters }
+        };
     }
-    ngOnInit() {
-        if (this.config) {
-            if (this.config.sortBy) {
-                this.activeSort.key = this.config.sortBy;
-            }
-            if (this.config.orderBy) {
-                this.activeSort.direction = this.config.orderBy;
-                this.isSortActive = true;
+    onAction(action, row) {
+        if (action.type === 'callback' && action.callback) {
+            action.callback(row);
+        }
+        if (action.type === 'route' && action.route) {
+            const url = this.replaceParams(action.route, row);
+            this.router.navigateByUrl(url);
+            return;
+        }
+        if (action.type === 'api') {
+            if (action.confirmationNeeded) {
+                const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+                if (!confirm(message))
+                    return;
             }
-            this.loadFilterOptions();
-            if (this.tableData !== undefined) {
-                // External-data mode: sync incoming data, skip internal API call
-                this.data = this.tableData;
-                if (this.totalItemsCount !== undefined) {
-                    this.totalItems = this.totalItemsCount;
-                }
+            if (action.apiUrl) {
+                this.executeApiAction(action, row);
             }
             else {
-                this.loadData();
+                this.action.emit({ action, row });
             }
         }
+        else {
+            this.action.emit({ action, row });
+        }
     }
-    ngOnChanges(changes) {
-        // External data changed — sync directly without an API call
-        if (changes['tableData']) {
-            this.data = this.tableData || [];
+    onActionItemClick(item, row, event) {
+        event.stopPropagation();
+        if (item.type === 'delete') {
+            this.openDeleteConfirmModal(item, row);
+            return;
         }
-        // Total count updated from parent
-        if (changes['totalItemsCount'] && this.totalItemsCount !== undefined) {
-            this.totalItems = this.totalItemsCount;
+        if (item.type === 'callback' && item.callback) {
+            item.callback(row);
         }
-        // Config changed (non-first) — reload filter opts; reload data only if NOT in external mode
-        if (changes['config'] && !changes['config'].firstChange) {
-            this.loadFilterOptions();
-            if (this.tableData === undefined) {
-                this.loadData();
-            }
-            setTimeout(() => this.calculateStickyPositions());
+        if (item.type === 'route' && item.route) {
+            const url = this.replaceParams(item.route, row);
+            this.router.navigateByUrl(url);
+            return;
         }
-    }
-    ngAfterViewInit() {
-        this.setupResizeObserver();
-    }
-    ngOnDestroy() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    setupResizeObserver() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
+        if (item.type === 'api') {
+            if (item.confirmationNeeded) {
+                const message = item.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+                if (!confirm(message))
+                    return;
+            }
+            if (item.apiUrl) {
+                this.executeApiAction(item, row);
+            }
+            else {
+                this.action.emit({ action: item, row });
+            }
         }
-        this.resizeObserver = new ResizeObserver(() => {
-            this.ngZone.run(() => {
-                this.calculateStickyPositions();
-            });
-        });
-        if (this.stickyHeaders) {
-            this.stickyHeaders.changes.subscribe(() => {
-                this.observeHeaders();
-                // Also recalculate immediately
-                setTimeout(() => this.calculateStickyPositions());
-            });
-            this.observeHeaders();
+        else {
+            this.action.emit({ action: item, row });
         }
     }
-    observeHeaders() {
-        if (!this.resizeObserver || !this.stickyHeaders)
+    openDeleteConfirmModal(item, row) {
+        const cfg = item.deleteConfig || {};
+        this.deleteModalConfig = {
+            title: cfg.modalTitle || 'Confirm Delete',
+            size: 'sm',
+            headerTheme: 'dark',
+            confirmButton: {
+                label: cfg.confirmLabel || 'Delete',
+                type: 'danger'
+            },
+            cancelButton: {
+                label: cfg.cancelLabel || 'Cancel',
+                show: true
+            }
+        };
+        this.deleteModalMessage = cfg.modalMessage || 'Are you sure you want to delete this item?';
+        this.pendingDeleteAction = { item, row };
+        this.deleteModalOpen = true;
+    }
+    deleteModalMessage = '';
+    onDeleteConfirm() {
+        this.deleteModalOpen = false;
+        if (!this.pendingDeleteAction)
             return;
-        this.stickyHeaders.forEach(header => {
-            this.resizeObserver.observe(header.nativeElement);
+        const { item, row } = this.pendingDeleteAction;
+        const cfg = item.deleteConfig || {};
+        const idField = cfg.idField || 'id';
+        const url = cfg.apiUrl.replace(`:${idField}`, row[idField]);
+        this.pendingDeleteAction = null;
+        this.loading = true;
+        this.http.delete(url, { headers: this.getHeaders() }).pipe(finalize(() => this.loading = false)).subscribe({
+            next: () => {
+                this.loadData();
+                this.action.emit({ action: item, row });
+            },
+            error: (err) => console.error('[SmartTable] Delete API Error', err)
         });
     }
-    loadData() {
-        if (!this.config?.apiUrl)
+    onDeleteCancel() {
+        this.deleteModalOpen = false;
+        this.pendingDeleteAction = null;
+    }
+    onTopAction(action) {
+        if (action.type === 'callback' && action.callback) {
+            action.callback(null); // No row for top action
+        }
+        if (action.type === 'route' && action.route) {
+            // Since it's a top action, replaceParams with an empty object or handle statically 
+            const url = this.replaceParams(action.route, {});
+            this.router.navigateByUrl(url);
             return;
-        this.loading = true;
-        let params;
-        // --- Query Params Construction ---
-        if (this.config.queryParamsConfig) {
-            const qpConfig = this.config.queryParamsConfig;
-            const pageKey = qpConfig.pageKey || 'page';
-            const sizeKey = qpConfig.sizeKey || 'pageSize';
-            const pageIndex = this.currentPage + (qpConfig.pageIndexOffset || 0);
-            let paramsObj = {
-                [pageKey]: pageIndex.toString(),
-                [sizeKey]: (this.config.pagination?.pageSize || 10).toString()
-            };
-            if (this.activeSort.key)
-                paramsObj['sortBy'] = this.activeSort.key;
-            // Only include orderBy if explicitly configured or user has sorted a column
-            if (this.isSortActive && this.activeSort.direction)
-                paramsObj['orderBy'] = this.activeSort.direction;
-            // Search Handling
-            if (this.searchTerm) {
-                const searchConfig = this.config.searchConfig;
-                const searchKey = searchConfig?.searchKey || 'search';
-                if (searchConfig?.handling === 'nested_string' && qpConfig.nestedStringConfig) {
-                    // Will be handled in nested string construction below
-                }
-                else {
-                    paramsObj[searchKey] = this.searchTerm;
-                }
+        }
+        if (action.type === 'api') {
+            if (action.confirmationNeeded) {
+                const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+                if (!confirm(message))
+                    return;
             }
-            // Filter Handling (and Search if nested)
-            if (qpConfig.filterHandling === 'nested_string' && qpConfig.nestedStringConfig) {
-                const { paramName, baseValue, separator, assignment } = qpConfig.nestedStringConfig;
-                let nestedString = baseValue || '';
-                const assign = assignment || '=';
-                // Add Filters
-                Object.keys(this.activeFilters).forEach(key => {
-                    if (this.activeFilters[key]) {
-                        const prefix = nestedString ? separator : '';
-                        nestedString += `${prefix}${key}${assign}${this.activeFilters[key]}`;
-                    }
-                });
-                // Add Search if nested
-                if (this.searchTerm && this.config.searchConfig?.handling === 'nested_string') {
-                    const searchKey = this.config.searchConfig.searchKey || 'SEARCH_TERM';
-                    const prefix = nestedString ? separator : '';
-                    nestedString += `${prefix}${searchKey}${assign}${this.searchTerm}`;
-                }
-                paramsObj[paramName] = nestedString;
+            if (action.apiUrl) {
+                this.executeApiAction(action, null);
             }
             else {
-                // Standard handling
-                Object.keys(this.activeFilters).forEach(key => {
-                    if (this.activeFilters[key])
-                        paramsObj[key] = this.activeFilters[key];
-                });
+                this.topAction.emit(action);
             }
-            params = new HttpParams({ fromObject: paramsObj });
         }
         else {
-            // --- Default Behavior (Backward Compatibility) ---
-            let paramsObj = {};
-            if (this.config.pagination?.enabled) {
-                paramsObj['page'] = this.currentPage;
-                paramsObj['pageSize'] = this.config.pagination.pageSize;
-            }
-            if (this.activeSort.key) {
-                paramsObj['sortBy'] = this.activeSort.key;
-                // Only include orderBy if explicitly configured or user has sorted a column
-                if (this.isSortActive)
-                    paramsObj['orderBy'] = this.activeSort.direction;
-            }
-            if (this.searchTerm) {
-                const searchKey = this.config.searchConfig?.searchKey || 'search';
-                paramsObj[searchKey] = this.searchTerm;
-            }
-            Object.keys(this.activeFilters).forEach(key => {
-                if (this.activeFilters[key]) {
-                    paramsObj[key] = this.activeFilters[key];
-                }
-            });
-            // Custom Request Params Mapper (if provided)
-            if (this.config.requestParams) {
-                const customParams = this.config.requestParams(this.currentPage, this.config.pagination?.pageSize || 10, this.activeSort.key, this.activeSort.direction, this.searchTerm, this.activeFilters);
-                if (customParams instanceof HttpParams) {
-                    // If function returns HttpParams, use it directly (caveat: might lose previous params if not careful in mapper)
-                    params = customParams;
+            this.topAction.emit(action);
+        }
+    }
+    executeApiAction(action, row) {
+        if (!action.apiUrl)
+            return;
+        const url = row ? this.replaceParams(action.apiUrl, row) : action.apiUrl;
+        const method = action.apiMethod || 'POST';
+        const headers = this.getHeaders();
+        const body = row ? row : {};
+        this.loading = true;
+        this.http.request(method, url, { body, headers }).pipe(finalize(() => this.loading = false)).subscribe({
+            next: () => {
+                this.loadData(); // reload on success
+                if (row) {
+                    this.action.emit({ action, row });
                 }
                 else {
-                    paramsObj = { ...paramsObj, ...customParams };
-                    params = new HttpParams({ fromObject: paramsObj });
+                    this.topAction.emit(action);
                 }
+            },
+            error: (err) => {
+                console.error('API Action Error', err);
             }
-            else {
-                params = new HttpParams({ fromObject: paramsObj });
+        });
+    }
+    // --- Selection ---
+    onSelectAll(event) {
+        const checked = event.target.checked;
+        this.data.forEach(row => row.selected = checked);
+        this.updateSelectedRows();
+    }
+    onRowSelect(row) {
+        this.updateSelectedRows();
+    }
+    updateSelectedRows() {
+        const idField = this.config.rowIdField || 'id';
+        // 1. Identify rows from the global selection that are NOT on the current page
+        const currentPageIds = new Set(this.data.map(r => r[idField]));
+        const otherPagesSelected = (this.selectedRows || []).filter(r => !currentPageIds.has(r[idField]));
+        // 2. Identify currently selected rows on the current page
+        const currentPageSelected = this.data.filter(row => row.selected);
+        // 3. Merge them to form the new global selection
+        this.selectedRows = [...otherPagesSelected, ...currentPageSelected];
+        this.rowSelect.emit(this.selectedRows);
+    }
+    // --- Helpers ---
+    getCellValue(row, col) {
+        // Support nested properties via labelPath or key
+        const path = col.labelPath || col.key;
+        let val = this.getValueByPath(row, path);
+        // Formatting (Date, etc.)
+        if (col.type === 'date' && val) {
+            if (col.dateFormat) {
+                try {
+                    return formatDate(val, col.dateFormat, this.locale);
+                }
+                catch (e) {
+                    console.warn('Invalid date format or value', val, col.dateFormat);
+                    return val;
+                }
             }
+            return new Date(val).toLocaleDateString();
         }
-        // --- Data Fetching ---
-        // Check for separate count API
-        const totalCountConfig = this.config.pagination?.totalCountConfig;
-        let request$; // Observable
-        if (totalCountConfig?.source === 'separate' && totalCountConfig.apiUrl) {
-            const headers = this.getHeaders();
-            const method = this.config.apiMethod || 'GET';
-            const body = this.config.apiPayload || {};
-            const dataRequest$ = method === 'POST' ? this.http.post(this.config.apiUrl, body, { params, headers }) : this.http.get(this.config.apiUrl, { params, headers });
-            const countRequest$ = method === 'POST' ? this.http.post(totalCountConfig.apiUrl, body, { params, headers }) : this.http.get(totalCountConfig.apiUrl, { params, headers });
-            request$ = forkJoin({
-                data: dataRequest$,
-                count: countRequest$
-            }).pipe(map(({ data, count }) => {
-                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
-                return {
-                    data: this.getValueByPath(data, dataPath),
-                    total: this.getValueByPath(count, totalCountConfig.responsePath || '')
-                };
-            }));
-        }
-        else {
-            const headers = this.getHeaders();
-            const method = this.config.apiMethod || 'GET';
-            const body = this.config.apiPayload || {};
-            const baseRequest$ = method === 'POST' ? this.http.post(this.config.apiUrl, body, { params, headers }) : this.http.get(this.config.apiUrl, { params, headers });
-            request$ = baseRequest$.pipe(map(response => {
-                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
-                const totalPath = totalCountConfig?.responsePath || '';
-                return {
-                    data: this.getValueByPath(response, dataPath),
-                    // If source is 'same', try to get total from response, else default 0
-                    total: totalCountConfig ? this.getValueByPath(response, totalPath) : 0
-                };
-            }));
+        return val;
+    }
+    getBadgeClass(row, col) {
+        const val = this.getCellValue(row, col);
+        const strVal = String(val);
+        // Config approach
+        if (col.badgeConfig && col.badgeConfig[strVal]) {
+            return `badge-${col.badgeConfig[strVal]}`;
         }
-        request$.pipe(finalize(() => this.loading = false), catchError(err => {
-            console.error('Table Data Fetch Error', err);
-            return of({ data: [], total: 0 });
-        }))
-            .subscribe((result) => {
-            this.data = result.data || [];
-            if (this.config.pagination) {
-                this.totalItems = result.total || 0;
-            }
-            // Dynamic Column Generation
-            if (!this.config.columns || this.config.columns.length === 0) {
-                if (this.data.length > 0) {
-                    this.config.columns = Object.keys(this.data[0]).map(key => ({
-                        key: key,
-                        label: this.toTitleCase(key),
-                        type: 'text',
-                        sortable: false,
-                        editable: false
-                    }));
+        // Default Logic
+        const status = strVal.toLowerCase();
+        if (['active', 'completed', 'success', 'approved'].includes(status))
+            return 'badge-success';
+        if (['pending', 'in progress', 'waiting'].includes(status))
+            return 'badge-warning';
+        if (['rejected', 'failed', 'error', 'deleted'].includes(status))
+            return 'badge-danger';
+        if (['draft', 'inactive'].includes(status))
+            return 'badge-neutral';
+        return 'badge-info'; // default
+    }
+    getSortIcon(key) {
+        if (this.activeSort.key !== key)
+            return 'fa-sort';
+        return this.activeSort.direction === 'ASC' ? 'fa-sort-up' : 'fa-sort-down';
+    }
+    replaceParams(template, row) {
+        return template.replace(/:([a-zA-Z0-9_]+)/g, (_, key) => row[key] || '');
+    }
+    loadFilterOptions() {
+        if (!this.config.filters)
+            return;
+        this.config.filters.forEach(filter => {
+            if (filter.apiUrl && !filter.options) {
+                const headers = this.getHeaders();
+                let params = new HttpParams();
+                if (filter.handling === 'nested_string' && filter.nestedStringConfig) {
+                    const { paramName, baseValue } = filter.nestedStringConfig;
+                    if (baseValue) {
+                        params = params.set(paramName, baseValue);
+                    }
                 }
+                const method = filter.apiMethod || 'GET';
+                const body = filter.apiPayload || {};
+                const request$ = method === 'POST'
+                    ? this.http.post(filter.apiUrl, body, { headers, params })
+                    : this.http.get(filter.apiUrl, { headers, params });
+                request$.subscribe({
+                    next: (response) => {
+                        const data = filter.dataPath ? this.getValueByPath(response, filter.dataPath) : response;
+                        if (!Array.isArray(data)) {
+                            console.error(`Filter data for ${filter.key} is not an array`, data);
+                            return;
+                        }
+                        filter.options = data.map((item) => {
+                            const label = filter.labelPath ? this.getValueByPath(item, filter.labelPath) :
+                                (filter.labelKey ? item[filter.labelKey] : item.label || item.name);
+                            const value = filter.valuePath ? this.getValueByPath(item, filter.valuePath) :
+                                (filter.valueKey ? item[filter.valueKey] : item.value || item.code);
+                            return { label, value };
+                        });
+                        // Auto-populate matching column options
+                        if (this.config.columns) {
+                            const matchingColumn = this.config.columns.find(col => col.key === filter.key);
+                            if (matchingColumn && matchingColumn.dataType === 'select' && !matchingColumn.options) {
+                                matchingColumn.options = filter.options;
+                            }
+                        }
+                    },
+                    error: (err) => console.error(`Failed to load filter options for ${filter.key}:`, err)
+                });
             }
         });
     }
-    // --- Actions ---
-    onPageChange(page) {
-        this.currentPage = page;
-        if (this.tableData !== undefined) {
-            this.pageChange.emit(this.buildChangeEvent());
-        }
-        else {
-            this.loadData();
-        }
-    }
-    onPageSizeChange(size) {
-        if (this.config.pagination) {
-            this.config.pagination.pageSize = size;
-            this.currentPage = 1; // Reset to first page
-            if (this.tableData !== undefined) {
-                this.pageChange.emit(this.buildChangeEvent());
-            }
-            else {
-                this.loadData();
+    getValueByPath(obj, path) {
+        if (!path || path === '')
+            return obj;
+        return path.split('.').reduce((acc, part) => {
+            const match = part.match(/(\w+)\[(\d+)\]/);
+            if (match) {
+                return acc?.[match[1]]?.[parseInt(match[2])];
             }
-        }
+            return acc?.[part];
+        }, obj);
     }
-    onSort(col) {
-        if (!col.sortable)
+    calculateStickyPositions() {
+        // We calculate positions based on rendered widths
+        if (!this.stickyHeaders || this.stickyHeaders.length === 0)
             return;
-        if (this.activeSort.key === col.key) {
-            this.activeSort.direction = this.activeSort.direction === 'ASC' ? 'DESC' : 'ASC';
-        }
-        else {
-            this.activeSort.key = col.key;
-            this.activeSort.direction = 'ASC';
-        }
-        this.isSortActive = true; // User has actively sorted, include orderBy in API call
-        if (this.tableData !== undefined) {
-            // External-data mode: let the parent handle the API call
-            this.sortChange.emit(this.buildChangeEvent());
-        }
-        else {
-            this.loadData();
+        this.stickyColumnStyles = {};
+        let leftOffset = 0;
+        this.hasStickyColumns = false;
+        // Default sticky columns count is 3 if not specified
+        const stickyCount = this.config.stickyColumnCount !== undefined ? this.config.stickyColumnCount : 3;
+        // Checkbox width handling
+        if (this.config.selectable) {
+            const firstSticky = this.config.columns.find((c, i) => i < stickyCount || c.sticky);
+            if (firstSticky) {
+                // We can try to measure checkbox col if needed, but usually fixed 40px
+                // Or better, if we have a checkbox col ref, assume 40px for now as it is fixed in CSS
+                leftOffset = 40;
+            }
         }
+        const headerElements = this.stickyHeaders.toArray();
+        this.config.columns.forEach((col, index) => {
+            if (col.sticky || index < stickyCount) {
+                col.sticky = true;
+                this.hasStickyColumns = false; // Reset to true only after we set styles? No, wait. 
+                // Actually property is used in template to add class 'sticky-col'
+                // but we need to update Styles based on previous cols widths
+                // Find corresponding header element
+                // Note: headerElements corresponds to columns indices
+                const headerEl = headerElements[index]?.nativeElement;
+                if (headerEl) {
+                    // Set style for current column
+                    this.stickyColumnStyles[col.key] = {
+                        left: `${leftOffset}px`
+                        // We DO NOT set width here, allowing it to be dynamic/auto
+                    };
+                    // Add THIS column's width to offset for the NEXT column
+                    // use getBoundingClientRect or offsetWidth
+                    leftOffset += headerEl.offsetWidth;
+                }
+                this.hasStickyColumns = true;
+            }
+        });
+        this.cdr.detectChanges();
     }
-    onSearch(event) {
-        const value = event.target.value;
-        this.searchSubject.next(value);
-    }
-    onFilterChange(key, event) {
-        const value = event.target.value;
-        this.activeFilters[key] = value;
-        this.currentPage = 1;
-        this.filterChange.emit({ key, value });
-        if (this.tableData === undefined) {
-            this.loadData();
-        }
+    toTitleCase(str) {
+        return str
+            .replace(/([A-Z])/g, ' $1') // insert space before capital letters
+            .replace(/^./, (str) => str.toUpperCase()) // capitalize the first letter
+            .trim(); // remove any leading/trailing whitespace
     }
-    // --- Private helpers ---
-    /**
-     * Assembles the current table state into a `TableDataChangeEvent` object.
-     * Emitted to the parent in external-data mode so it can fetch and supply new data.
-     */
-    buildChangeEvent() {
-        return {
-            page: this.currentPage,
-            pageSize: this.config.pagination?.pageSize || 10,
-            sortBy: this.activeSort.key || undefined,
-            orderBy: this.isSortActive ? this.activeSort.direction : undefined,
-            searchTerm: this.searchTerm || undefined,
-            filters: { ...this.activeFilters }
-        };
+    get columnCount() {
+        return this.config.columns.length;
     }
-    onAction(action, row) {
-        if (action.type === 'callback' && action.callback) {
-            action.callback(row);
+    onColumnClick(row, col) {
+        if (col.clickAction === 'callback') {
+            this.columnClick.emit({ row, column: col.key });
         }
-        if (action.type === 'route' && action.route) {
-            const url = this.replaceParams(action.route, row);
+        else if (col.clickAction === 'route' && col.clickRoute) {
+            const url = this.replaceParams(col.clickRoute, row);
             this.router.navigateByUrl(url);
-            return;
-        }
-        if (action.type === 'api') {
-            if (action.confirmationNeeded) {
-                const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
-                if (!confirm(message))
-                    return;
-            }
-            if (action.apiUrl) {
-                this.executeApiAction(action, row);
-            }
-            else {
-                this.action.emit({ action, row });
-            }
         }
-        else {
-            this.action.emit({ action, row });
+    }
+    getHeaders() {
+        let headers = new HttpHeaders();
+        if (this.config.token) {
+            const headerName = this.config.tokenHeader || 'Authorization';
+            headers = headers.set(headerName, this.config.token);
         }
+        return headers;
     }
-    onActionItemClick(item, row, event) {
+    toggleDropdown(id, event) {
         event.stopPropagation();
-        if (item.type === 'delete') {
-            this.openDeleteConfirmModal(item, row);
+        if (this.openDropdownId === id) {
+            this.openDropdownId = null;
             return;
         }
-        if (item.type === 'callback' && item.callback) {
-            item.callback(row);
-        }
-        if (item.type === 'route' && item.route) {
-            const url = this.replaceParams(item.route, row);
-            this.router.navigateByUrl(url);
-            return;
-        }
-        if (item.type === 'api') {
-            if (item.confirmationNeeded) {
-                const message = item.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
-                if (!confirm(message))
-                    return;
-            }
-            if (item.apiUrl) {
-                this.executeApiAction(item, row);
-            }
-            else {
-                this.action.emit({ action: item, row });
-            }
-        }
-        else {
-            this.action.emit({ action: item, row });
-        }
-    }
-    openDeleteConfirmModal(item, row) {
-        const cfg = item.deleteConfig || {};
-        this.deleteModalConfig = {
-            title: cfg.modalTitle || 'Confirm Delete',
-            size: 'sm',
-            headerTheme: 'dark',
-            confirmButton: {
-                label: cfg.confirmLabel || 'Delete',
-                type: 'danger'
-            },
-            cancelButton: {
-                label: cfg.cancelLabel || 'Cancel',
-                show: true
-            }
+        // Compute fixed position from the trigger button so the menu escapes
+        // any overflow:auto ancestor (the table container).
+        const btn = event.currentTarget;
+        const rect = btn.getBoundingClientRect();
+        this.dropdownPosition = {
+            top: rect.bottom + 4,
+            right: window.innerWidth - rect.right
         };
-        this.deleteModalMessage = cfg.modalMessage || 'Are you sure you want to delete this item?';
-        this.pendingDeleteAction = { item, row };
-        this.deleteModalOpen = true;
+        this.openDropdownId = id;
     }
-    deleteModalMessage = '';
-    onDeleteConfirm() {
-        this.deleteModalOpen = false;
-        if (!this.pendingDeleteAction)
-            return;
-        const { item, row } = this.pendingDeleteAction;
-        const cfg = item.deleteConfig || {};
-        const idField = cfg.idField || 'id';
-        const url = cfg.apiUrl.replace(`:${idField}`, row[idField]);
-        this.pendingDeleteAction = null;
-        this.loading = true;
-        this.http.delete(url, { headers: this.getHeaders() }).pipe(finalize(() => this.loading = false)).subscribe({
-            next: () => {
-                this.loadData();
-                this.action.emit({ action: item, row });
-            },
-            error: (err) => console.error('[SmartTable] Delete API Error', err)
-        });
+    closeDropdown() {
+        this.openDropdownId = null;
     }
-    onDeleteCancel() {
-        this.deleteModalOpen = false;
-        this.pendingDeleteAction = null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, deps: [{ token: i3.HttpClient }, { token: i1$4.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartTableComponent, isStandalone: false, selector: "lib-smart-table", inputs: { config: "config", tableData: "tableData", totalItemsCount: "totalItemsCount", selectedRows: "selectedRows" }, outputs: { action: "action", topAction: "topAction", filterChange: "filterChange", rowSelect: "rowSelect", columnClick: "columnClick", sortChange: "sortChange", pageChange: "pageChange", searchChange: "searchChange" }, host: { listeners: { "document:click": "closeDropdown()" } }, viewQueries: [{ propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data; let rowIndex = index\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions; let i = index\">\n                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n                            <button class=\"st-dropdown-btn\" (click)=\"toggleDropdown(rowIndex + '-' + i, $event)\">\n                                <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                            </button>\n                            <div class=\"st-dropdown-menu\"\n                                 *ngIf=\"openDropdownId === (rowIndex + '-' + i)\"\n                                 [ngStyle]=\"{\n                                   position: 'fixed',\n                                   top: dropdownPosition.top + 'px',\n                                   right: dropdownPosition.right + 'px',\n                                   left: 'auto'\n                                 }\">\n                                <button class=\"st-dropdown-item\" *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event); closeDropdown()\">\n                                    <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n                                    <span>{{ item.label }}</span>\n                                </button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\n                      <lib-button \n                         [variant]=\"action.btnVariant || 'secondary'\"\n                         [icon]=\"action.icon || ''\"\n                         (click)=\"onAction(action, row)\">\n                         {{ action.label }}\n                     </lib-button>\n                    </ng-container>\n                </ng-container>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n\n  <!-- Built-in Delete Confirmation Modal -->\n  <cc-confirmation-modal\n    [isOpen]=\"deleteModalOpen\"\n    [config]=\"deleteModalConfig\"\n    (confirm)=\"onDeleteConfirm()\"\n    (cancel)=\"onDeleteCancel()\"\n    (close)=\"onDeleteCancel()\">\n    <p>{{ deleteModalMessage }}</p>\n  </cc-confirmation-modal>\n</div>\n\n", styles: [".smart-table-wrapper{font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:visible;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px 8px;color:var(--st-text-color, #333);border-radius:4px}.st-dropdown-btn:hover{background:#0000000d}.st-dropdown-menu{min-width:150px;background:var(--st-card-bg, #fff);border:1px solid var(--border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:9999;display:flex;flex-direction:column;padding:4px 0;margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:8px 16px;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:14px;color:var(--st-text-color, #333);transition:background .2s}.st-dropdown-item:hover{background:#0000000d}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "pageSizeOptions", "theme", "labels"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: ConfirmationModalComponent, selector: "cc-confirmation-modal", inputs: ["config", "isOpen", "confirmDisabled", "confirmLoading"], outputs: ["confirm", "cancel", "close", "showCodeSnippet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-smart-table', standalone: false, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data; let rowIndex = index\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions; let i = index\">\n                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n                            <button class=\"st-dropdown-btn\" (click)=\"toggleDropdown(rowIndex + '-' + i, $event)\">\n                                <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                            </button>\n                            <div class=\"st-dropdown-menu\"\n                                 *ngIf=\"openDropdownId === (rowIndex + '-' + i)\"\n                                 [ngStyle]=\"{\n                                   position: 'fixed',\n                                   top: dropdownPosition.top + 'px',\n                                   right: dropdownPosition.right + 'px',\n                                   left: 'auto'\n                                 }\">\n                                <button class=\"st-dropdown-item\" *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event); closeDropdown()\">\n                                    <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n                                    <span>{{ item.label }}</span>\n                                </button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\n                      <lib-button \n                         [variant]=\"action.btnVariant || 'secondary'\"\n                         [icon]=\"action.icon || ''\"\n                         (click)=\"onAction(action, row)\">\n                         {{ action.label }}\n                     </lib-button>\n                    </ng-container>\n                </ng-container>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n\n  <!-- Built-in Delete Confirmation Modal -->\n  <cc-confirmation-modal\n    [isOpen]=\"deleteModalOpen\"\n    [config]=\"deleteModalConfig\"\n    (confirm)=\"onDeleteConfirm()\"\n    (cancel)=\"onDeleteCancel()\"\n    (close)=\"onDeleteCancel()\">\n    <p>{{ deleteModalMessage }}</p>\n  </cc-confirmation-modal>\n</div>\n\n", styles: [".smart-table-wrapper{font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:visible;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px 8px;color:var(--st-text-color, #333);border-radius:4px}.st-dropdown-btn:hover{background:#0000000d}.st-dropdown-menu{min-width:150px;background:var(--st-card-bg, #fff);border:1px solid var(--border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:9999;display:flex;flex-direction:column;padding:4px 0;margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:8px 16px;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:14px;color:var(--st-text-color, #333);transition:background .2s}.st-dropdown-item:hover{background:#0000000d}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: i3.HttpClient }, { type: i1$4.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { config: [{
+                type: Input
+            }], tableData: [{
+                type: Input
+            }], totalItemsCount: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }], topAction: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], rowSelect: [{
+                type: Output
+            }], columnClick: [{
+                type: Output
+            }], selectedRows: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }], stickyHeaders: [{
+                type: ViewChildren,
+                args: ['stickyHeader']
+            }], closeDropdown: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
+
+class FilterTableSelectorComponent {
+    cdr;
+    ngZone;
+    /** Full config object driven by consuming MFE JSON. */
+    config;
+    /**
+     * Flat i18n labels map from the consuming MFE.
+     * Mirrors the pattern used by SmartFormComponent.
+     */
+    labels = {};
+    /**
+     * Pre-selected row identifiers.
+     * When provided, matching rows are pre-checked on first load and
+     * re-checked after each page navigation.
+     * Must be an array of row objects (the same shape returned by the API).
+     */
+    preSelectedRows = [];
+    /** Emits the array of currently selected row objects on "Add / Submit". */
+    onSubmit = new EventEmitter();
+    /** Emits void on "Back / Cancel". */
+    onCancel = new EventEmitter();
+    // ── Internal state ──────────────────────────────────────────────────────────
+    /** A deep-copy of tableConfig with the current filter params baked-in. */
+    resolvedTableConfig;
+    /** Current active filter params (merged from form submission). */
+    activeFilterParams = {};
+    /** The base API URL without any filter query params. */
+    baseApiUrl = '';
+    /** All rows selected so far, tracked across pagination pages. */
+    selectedRows = [];
+    /** Total rows currently loaded in the table (reported by SmartTable rowSelect). */
+    totalTableItems = 0;
+    /** Serialised SmartForm JSON (with labels translated + disabled fields applied). */
+    resolvedFormJson = '';
+    /**
+     * Default values to prefill the SmartForm.
+     * Updated on each initialize() call and reset to config defaults on Clear Filter.
+     */
+    resolvedInitialValues = {};
+    /**
+     * Version counter — bumping this forces *ngIf to re-create the SmartForm
+     * component with fresh initial values (used by Clear Filter).
+     */
+    formVersion = 0;
+    /** Whether the filter panel is visible (toggled on mobile, always visible on desktop). */
+    filterPanelVisible = true;
+    /**
+     * Tracks the live form values as the user changes fields.
+     * Updated via SmartForm's (valueChange) output.
+     * Used when the user clicks the "Apply Filter" button in the component.
+     */
+    currentFormValues = {};
+    destroy$ = new Subject();
+    constructor(cdr, ngZone) {
+        this.cdr = cdr;
+        this.ngZone = ngZone;
     }
-    onTopAction(action) {
-        if (action.type === 'callback' && action.callback) {
-            action.callback(null); // No row for top action
-        }
-        if (action.type === 'route' && action.route) {
-            // Since it's a top action, replaceParams with an empty object or handle statically 
-            const url = this.replaceParams(action.route, {});
-            this.router.navigateByUrl(url);
-            return;
+    // ── Lifecycle ────────────────────────────────────────────────────────────────
+    ngOnInit() {
+        this.initialize();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && !changes['config'].isFirstChange()) {
+            this.initialize();
         }
-        if (action.type === 'api') {
-            if (action.confirmationNeeded) {
-                const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
-                if (!confirm(message))
-                    return;
-            }
-            if (action.apiUrl) {
-                this.executeApiAction(action, null);
-            }
-            else {
-                this.topAction.emit(action);
-            }
+        if (changes['preSelectedRows'] && !changes['preSelectedRows'].isFirstChange()) {
+            this.syncPreselection();
         }
-        else {
-            this.topAction.emit(action);
+        if (changes['labels'] && !changes['labels'].isFirstChange()) {
+            this.buildFormJson();
+            this.applyFilterParamsToTable();
         }
     }
-    executeApiAction(action, row) {
-        if (!action.apiUrl)
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ── Initialisation ───────────────────────────────────────────────────────────
+    initialize() {
+        if (!this.config)
             return;
-        const url = row ? this.replaceParams(action.apiUrl, row) : action.apiUrl;
-        const method = action.apiMethod || 'POST';
-        const headers = this.getHeaders();
-        const body = row ? row : {};
-        this.loading = true;
-        this.http.request(method, url, { body, headers }).pipe(finalize(() => this.loading = false)).subscribe({
-            next: () => {
-                this.loadData(); // reload on success
-                if (row) {
-                    this.action.emit({ action, row });
-                }
-                else {
-                    this.topAction.emit(action);
+        this.baseApiUrl = this.config.tableConfig.apiUrl || '';
+        this.selectedRows = [...(this.preSelectedRows || [])];
+        const defaults = this.config.filterConfig.defaultValues || {};
+        // Build default filter params from defaultValues for the initial API call
+        this.activeFilterParams = this.buildFilterParams(defaults);
+        // Synchronize currentFormValues so Apply Filter works even if no changes are made yet
+        this.currentFormValues = { ...defaults };
+        this.buildFormJson();
+        this.applyFilterParamsToTable();
+        // Bump version to force SmartForm re-creation with the new defaultValues
+        this.formVersion++;
+    }
+    // ── Form JSON construction ───────────────────────────────────────────────────
+    /**
+     * Serialises the SmartForm config JSON.
+     * Applies disabledFields from filterPanelConfig.
+     */
+    buildFormJson(overrideValues) {
+        if (!this.config?.filterConfig?.smartFormConfig)
+            return;
+        // Deep-clone to avoid mutating the original config
+        const schema = JSON.parse(JSON.stringify(this.config.filterConfig.smartFormConfig));
+        // Apply disabled fields and TRANSLATE LABELS
+        const disabled = this.config.filterConfig.disabledFields || [];
+        if (schema.sectionConfig?.children) {
+            schema.sectionConfig.children = schema.sectionConfig.children.map((field) => {
+                // Translate label and placeholder
+                if (field.label)
+                    field.label = this.translate(field.label);
+                if (field.placeholder)
+                    field.placeholder = this.translate(field.placeholder);
+                if (disabled.includes(field.name)) {
+                    return { ...field, disabled: true };
                 }
-            },
-            error: (err) => {
-                console.error('API Action Error', err);
+                return field;
+            });
+        }
+        this.resolvedFormJson = JSON.stringify(schema);
+        // Use override (e.g. after clear) or fall back to config defaults
+        const values = overrideValues !== undefined
+            ? overrideValues
+            : { ...(this.config.filterConfig.defaultValues || {}) };
+        this.resolvedInitialValues = values;
+    }
+    // ── Table URL resolution ─────────────────────────────────────────────────────
+    /**
+     * Rebuilds resolvedTableConfig with the current activeFilterParams appended
+     * to the base API URL.
+     */
+    applyFilterParamsToTable() {
+        const paramString = Object.entries(this.activeFilterParams)
+            .filter(([, v]) => v !== null && v !== undefined && v !== '')
+            .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+            .join('&');
+        const separator = this.baseApiUrl.includes('?') ? '&' : '?';
+        const newUrl = paramString
+            ? `${this.baseApiUrl}${separator}${paramString}`
+            : this.baseApiUrl;
+        // Translate Column Labels
+        const translatedColumns = (this.config.tableConfig.columns || []).map(col => ({
+            ...col,
+            label: this.translate(col.label)
+        }));
+        // Assign a new object reference so SmartTable's ngOnChanges fires
+        this.resolvedTableConfig = {
+            ...this.config.tableConfig,
+            columns: translatedColumns,
+            apiUrl: newUrl,
+            selectable: true,
+            multiSelect: this.config.selectionConfig.multiSelect,
+        };
+    }
+    // ── Filter param helpers ─────────────────────────────────────────────────────
+    /**
+     * Converts a flat form-value map to API param key/value pairs
+     * using the configured filterParamMapping.
+     */
+    buildFilterParams(formValues) {
+        const mapping = this.config.filterConfig.filterParamMapping || [];
+        const params = {};
+        mapping.forEach((map) => {
+            const rawVal = formValues[map.formFieldName];
+            if (rawVal !== null && rawVal !== undefined && rawVal !== '') {
+                // Support arrays (multiselect) → comma-separated
+                const val = Array.isArray(rawVal) ? rawVal.join(',') : String(rawVal);
+                params[map.apiParamKey] = val;
             }
         });
+        return params;
     }
-    // --- Selection ---
-    onSelectAll(event) {
-        const checked = event.target.checked;
-        this.data.forEach(row => row.selected = checked);
-        this.updateSelectedRows();
-    }
-    onRowSelect(row) {
-        this.updateSelectedRows();
+    // ── SmartForm event handlers ─────────────────────────────────────────────────
+    /**
+     * Called every time a form field value changes (SmartForm valueChange output).
+     * We track the current values so the component-level "Apply Filter" button
+     * can read them without relying on a form submit button inside the JSON config.
+     */
+    onFormValueChange(values) {
+        this.currentFormValues = values || {};
     }
-    updateSelectedRows() {
-        this.selectedRows = this.data.filter(row => row.selected);
-        this.rowSelect.emit(this.selectedRows);
+    /**
+     * Called when the user clicks the "Apply Filter" button rendered by the component.
+     * Builds API params from the tracked form values and reloads the table.
+     */
+    applyCurrentFilter() {
+        this.activeFilterParams = this.buildFilterParams(this.currentFormValues);
+        this.applyFilterParamsToTable();
     }
-    // --- Helpers ---
-    getCellValue(row, col) {
-        // Support nested properties via labelPath or key
-        const path = col.labelPath || col.key;
-        let val = this.getValueByPath(row, path);
-        // Formatting (Date, etc.)
-        if (col.type === 'date' && val) {
-            if (col.dateFormat) {
-                try {
-                    return formatDate(val, col.dateFormat, this.locale);
-                }
-                catch (e) {
-                    console.warn('Invalid date format or value', val, col.dateFormat);
-                    return val;
-                }
+    /**
+     * Clear Filter: resets form to default values (preserving disabled-field values),
+     * reloads the table with default params.
+     * The form is re-created via formVersion bump so SmartForm gets fresh initialValues.
+     */
+    onClearFilter() {
+        const defaults = this.config.filterConfig.defaultValues || {};
+        const disabled = this.config.filterConfig.disabledFields || [];
+        // Build reset values: keep default values for disabled fields, clear the rest
+        const resetValues = {};
+        disabled.forEach(fieldName => {
+            if (defaults[fieldName] !== undefined) {
+                resetValues[fieldName] = defaults[fieldName];
             }
-            return new Date(val).toLocaleDateString();
-        }
-        return val;
+        });
+        this.currentFormValues = { ...resetValues };
+        this.activeFilterParams = this.buildFilterParams(resetValues);
+        // Destroy and recreate SmartForm with clean initial values
+        this.resolvedFormJson = '';
+        this.formVersion++;
+        // Use NgZone + setTimeout to ensure the *ngIf toggles in one tick, then re-renders
+        this.ngZone.run(() => {
+            setTimeout(() => {
+                this.buildFormJson(resetValues);
+                this.applyFilterParamsToTable();
+            }, 0);
+        });
     }
-    getBadgeClass(row, col) {
-        const val = this.getCellValue(row, col);
-        const strVal = String(val);
-        // Config approach
-        if (col.badgeConfig && col.badgeConfig[strVal]) {
-            return `badge-${col.badgeConfig[strVal]}`;
-        }
-        // Default Logic
-        const status = strVal.toLowerCase();
-        if (['active', 'completed', 'success', 'approved'].includes(status))
-            return 'badge-success';
-        if (['pending', 'in progress', 'waiting'].includes(status))
-            return 'badge-warning';
-        if (['rejected', 'failed', 'error', 'deleted'].includes(status))
-            return 'badge-danger';
-        if (['draft', 'inactive'].includes(status))
-            return 'badge-neutral';
-        return 'badge-info'; // default
+    // ── SmartTable event handlers ────────────────────────────────────────────────
+    /**
+     * Called by SmartTable's (rowSelect) output.
+     * Merges page-level selection with the cross-page tracking set.
+     */
+    onRowSelect(globalSelection) {
+        this.selectedRows = globalSelection || [];
     }
-    getSortIcon(key) {
-        if (this.activeSort.key !== key)
-            return 'fa-sort';
-        return this.activeSort.direction === 'ASC' ? 'fa-sort-up' : 'fa-sort-down';
+    /**
+     * Syncs preSelectedRows into the local selectedRows (called when input changes).
+     */
+    syncPreselection() {
+        this.selectedRows = [...(this.preSelectedRows || [])];
     }
-    replaceParams(template, row) {
-        return template.replace(/:([a-zA-Z0-9_]+)/g, (_, key) => row[key] || '');
+    // ── Action handlers ──────────────────────────────────────────────────────────
+    handleSubmit() {
+        this.onSubmit.emit([...this.selectedRows]);
     }
-    loadFilterOptions() {
-        if (!this.config.filters)
-            return;
-        this.config.filters.forEach(filter => {
-            if (filter.apiUrl && !filter.options) {
-                const headers = this.getHeaders();
-                let params = new HttpParams();
-                if (filter.handling === 'nested_string' && filter.nestedStringConfig) {
-                    const { paramName, baseValue } = filter.nestedStringConfig;
-                    if (baseValue) {
-                        params = params.set(paramName, baseValue);
-                    }
-                }
-                const method = filter.apiMethod || 'GET';
-                const body = filter.apiPayload || {};
-                const request$ = method === 'POST'
-                    ? this.http.post(filter.apiUrl, body, { headers, params })
-                    : this.http.get(filter.apiUrl, { headers, params });
-                request$.subscribe({
-                    next: (response) => {
-                        const data = filter.dataPath ? this.getValueByPath(response, filter.dataPath) : response;
-                        if (!Array.isArray(data)) {
-                            console.error(`Filter data for ${filter.key} is not an array`, data);
-                            return;
-                        }
-                        filter.options = data.map((item) => {
-                            const label = filter.labelPath ? this.getValueByPath(item, filter.labelPath) :
-                                (filter.labelKey ? item[filter.labelKey] : item.label || item.name);
-                            const value = filter.valuePath ? this.getValueByPath(item, filter.valuePath) :
-                                (filter.valueKey ? item[filter.valueKey] : item.value || item.code);
-                            return { label, value };
-                        });
-                        // Auto-populate matching column options
-                        if (this.config.columns) {
-                            const matchingColumn = this.config.columns.find(col => col.key === filter.key);
-                            if (matchingColumn && matchingColumn.dataType === 'select' && !matchingColumn.options) {
-                                matchingColumn.options = filter.options;
-                            }
-                        }
-                    },
-                    error: (err) => console.error(`Failed to load filter options for ${filter.key}:`, err)
-                });
-            }
-        });
+    handleCancel() {
+        this.onCancel.emit();
     }
-    getValueByPath(obj, path) {
-        if (!path || path === '')
-            return obj;
-        return path.split('.').reduce((acc, part) => {
-            const match = part.match(/(\w+)\[(\d+)\]/);
-            if (match) {
-                return acc?.[match[1]]?.[parseInt(match[2])];
-            }
-            return acc?.[part];
-        }, obj);
+    // ── Label helpers ─────────────────────────────────────────────────────────────
+    translate(key) {
+        return this.labels[key] || key;
     }
-    calculateStickyPositions() {
-        // We calculate positions based on rendered widths
-        if (!this.stickyHeaders || this.stickyHeaders.length === 0)
-            return;
-        this.stickyColumnStyles = {};
-        let leftOffset = 0;
-        this.hasStickyColumns = false;
-        // Default sticky columns count is 3 if not specified
-        const stickyCount = this.config.stickyColumnCount !== undefined ? this.config.stickyColumnCount : 3;
-        // Checkbox width handling
-        if (this.config.selectable) {
-            const firstSticky = this.config.columns.find((c, i) => i < stickyCount || c.sticky);
-            if (firstSticky) {
-                // We can try to measure checkbox col if needed, but usually fixed 40px
-                // Or better, if we have a checkbox col ref, assume 40px for now as it is fixed in CSS
-                leftOffset = 40;
-            }
+    get titleLabel() {
+        return this.translate(this.config?.title || '');
+    }
+    get submitButtonLabel() {
+        return this.translate(this.config?.selectionConfig?.submitButtonLabel || '');
+    }
+    get cancelButtonLabel() {
+        return this.translate(this.config?.selectionConfig?.cancelButtonLabel || '');
+    }
+    get clearFilterButtonLabel() {
+        const key = this.config?.filterConfig?.clearFilterLabel || 'COMMON.FILTER_TABLE.CLEAR_FILTER';
+        return this.translate(key) || 'Clear Filter';
+    }
+    get applyFilterButtonLabel() {
+        const key = this.config?.filterConfig?.applyFilterLabel || 'COMMON.FILTER_TABLE.APPLY_FILTER';
+        return this.translate(key) || 'Apply Filter';
+    }
+    get selectionCountText() {
+        if (!this.config?.selectionConfig?.selectionCountLabel)
+            return '';
+        const raw = this.translate(this.config.selectionConfig.selectionCountLabel);
+        return raw
+            .replace('{selected}', String(this.selectedRows.length))
+            .replace('{total}', String(this.totalTableItems));
+    }
+    get hasActiveFilters() {
+        return Object.keys(this.activeFilterParams).length > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterTableSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FilterTableSelectorComponent, isStandalone: false, selector: "lib-filter-table-selector", inputs: { config: "config", labels: "labels", preSelectedRows: "preSelectedRows" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fts-container\">\r\n\r\n  <!-- \u2500\u2500 Modal Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"fts-header\" *ngIf=\"config?.title\">\r\n    <h2 class=\"fts-header__title\">{{ titleLabel }}</h2>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 Body: Filter Panel + Table Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"fts-body\" *ngIf=\"config\">\r\n\r\n    <!-- LEFT: Filter Panel -->\r\n    <aside class=\"fts-filter-panel\" [class.fts-filter-panel--hidden]=\"!filterPanelVisible\">\r\n\r\n      <div class=\"fts-filter-panel__header\">\r\n        <span class=\"fts-filter-panel__title\">{{ translate('COMMON.FILTER_TABLE.FILTER_BY') || 'Filter By' }}</span>\r\n      </div>\r\n\r\n      <!-- SmartForm renders the dynamic filter form.\r\n           - No actionBarConfig needed in the JSON \u2014 buttons are rendered below by the component.\r\n           - (valueChange) tracks live values so Apply Filter can read them.\r\n           - formVersion bump forces destroy + re-create on Clear Filter. -->\r\n      <ng-container *ngIf=\"resolvedFormJson && formVersion >= 0\">\r\n        <lib-smart-form\r\n          [formJson]=\"resolvedFormJson\"\r\n          [labels]=\"labels\"\r\n          [initialValues]=\"resolvedInitialValues\"\r\n          (valueChange)=\"onFormValueChange($event)\">\r\n        </lib-smart-form>\r\n      </ng-container>\r\n\r\n      <!-- \u2500\u2500 Filter Action Buttons (Always in component, NOT in JSON config) \u2500\u2500 -->\r\n      <div class=\"fts-filter-panel__actions\">\r\n        <lib-button\r\n          id=\"fts-clear-filter-btn\"\r\n          variant=\"outline\"\r\n          (click)=\"onClearFilter()\">\r\n          {{ clearFilterButtonLabel }}\r\n        </lib-button>\r\n\r\n        <lib-button\r\n          id=\"fts-apply-filter-btn\"\r\n          variant=\"primary\"\r\n          (click)=\"applyCurrentFilter()\">\r\n          {{ applyFilterButtonLabel }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </aside>\r\n\r\n    <!-- RIGHT: Table Panel -->\r\n    <section class=\"fts-table-panel\">\r\n\r\n      <!-- Table toolbar: selection count -->\r\n      <div class=\"fts-table-panel__toolbar\">\r\n        <span class=\"fts-selection-count\" *ngIf=\"config.selectionConfig?.selectionCountLabel\">\r\n          {{ selectionCountText }}\r\n        </span>\r\n      </div>\r\n\r\n      <!-- SmartTable -->\r\n      <lib-smart-table\r\n        *ngIf=\"resolvedTableConfig\"\r\n        [config]=\"resolvedTableConfig\"\r\n        [selectedRows]=\"selectedRows\"\r\n        (rowSelect)=\"onRowSelect($event)\">\r\n      </lib-smart-table>\r\n\r\n    </section>\r\n\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 Footer Action Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"fts-footer\">\r\n    <lib-button\r\n      id=\"fts-cancel-btn\"\r\n      variant=\"outline\"\r\n      (click)=\"handleCancel()\">\r\n      {{ cancelButtonLabel }}\r\n    </lib-button>\r\n\r\n    <lib-button\r\n      id=\"fts-submit-btn\"\r\n      variant=\"primary\"\r\n      [disabled]=\"selectedRows.length === 0\"\r\n      (click)=\"handleSubmit()\">\r\n      {{ submitButtonLabel }}\r\n    </lib-button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{--fts-panel-bg: #ffffff;--fts-filter-panel-width: 300px;--fts-filter-panel-border: 1px solid var(--border-color, #dee2e6);--fts-header-bg: #ffffff;--fts-header-border: 1px solid var(--border-color, #dee2e6);--fts-header-height: 56px;--fts-header-padding: 0 24px;--fts-header-title-color: var(--text-color, #333333);--fts-header-title-font-size: 18px;--fts-header-title-font-weight: 600;--fts-footer-bg: #ffffff;--fts-footer-border: 1px solid var(--border-color, #dee2e6);--fts-footer-height: 64px;--fts-footer-padding: 0 24px;--fts-footer-gap: 12px;--fts-body-bg: #f8f9fb;--fts-filter-section-title-color: var(--text-muted, #666666);--fts-filter-section-title-font-size: 12px;--fts-filter-section-title-font-weight: 600;--fts-selection-count-color: var(--text-muted, #666666);--fts-selection-count-font-size: 14px;--fts-toolbar-border: 1px solid var(--border-color, #dee2e6);display:block;width:100%;height:100%}.fts-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:var(--fts-panel-bg);overflow:hidden}.fts-header{display:flex;align-items:center;min-height:var(--fts-header-height);padding:var(--fts-header-padding);border-bottom:var(--fts-header-border);background-color:var(--fts-header-bg);flex-shrink:0}.fts-header__title{margin:0;font-size:var(--fts-header-title-font-size);font-weight:var(--fts-header-title-font-weight);color:var(--fts-header-title-color);line-height:1.3}.fts-body{display:flex;flex:1;overflow:hidden;background-color:var(--fts-body-bg)}.fts-filter-panel{width:var(--fts-filter-panel-width);min-width:var(--fts-filter-panel-width);display:flex;flex-direction:column;background-color:var(--fts-panel-bg);overflow-y:auto;padding-bottom:16px}.fts-filter-panel--hidden{display:none}.fts-filter-panel__header{padding:16px 16px 0;flex-shrink:0}.fts-filter-panel__title{font-size:var(--fts-filter-section-title-font-size);font-weight:var(--fts-filter-section-title-font-weight);color:var(--fts-filter-section-title-color);text-transform:uppercase;letter-spacing:.5px}.fts-filter-panel__actions{display:flex;justify-content:space-between;gap:8px;padding:12px 16px 0;margin-top:8px;flex-shrink:0}.fts-filter-panel ::ng-deep .smart-form-container{padding:0}.fts-filter-panel ::ng-deep .smart-form-wrapper{padding:0}.fts-filter-panel ::ng-deep .form-header{display:none}.fts-filter-panel ::ng-deep .form-actions{display:none}.fts-filter-panel ::ng-deep .form-field-wrapper{margin-bottom:12px}.fts-filter-panel ::ng-deep .form-section{padding:12px 16px 0}.fts-table-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:var(--fts-panel-bg)}.fts-table-panel__toolbar{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;min-height:48px;background-color:var(--fts-panel-bg)}.fts-selection-count{font-size:var(--fts-selection-count-font-size);color:var(--fts-selection-count-color);white-space:nowrap}.fts-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fts-footer-gap);min-height:var(--fts-footer-height);padding:var(--fts-footer-padding);border-top:var(--fts-footer-border);background-color:var(--fts-footer-bg);flex-shrink:0}.fts-table-panel ::ng-deep .smart-table-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.fts-table-panel ::ng-deep .st-table-container{flex:1;overflow-y:auto}.fts-table-panel ::ng-deep .st-pagination{flex-shrink:0;padding:8px 16px;border-top:var(--fts-filter-panel-border);background-color:var(--fts-panel-bg)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SmartFormComponent, selector: "lib-smart-form", inputs: ["formJson", "initialValues", "enableDraftAutoSave", "labels", "mode", "readOnly"], outputs: ["submit", "draftSave", "actionClick", "valueChange", "fileAdded", "fileUploadFinished", "fileRemoved", "stepChange"] }, { kind: "component", type: SmartTableComponent, selector: "lib-smart-table", inputs: ["config", "tableData", "totalItemsCount", "selectedRows"], outputs: ["action", "topAction", "filterChange", "rowSelect", "columnClick", "sortChange", "pageChange", "searchChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterTableSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-filter-table-selector', standalone: false, template: "<div class=\"fts-container\">\r\n\r\n  <!-- \u2500\u2500 Modal Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"fts-header\" *ngIf=\"config?.title\">\r\n    <h2 class=\"fts-header__title\">{{ titleLabel }}</h2>\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 Body: Filter Panel + Table Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"fts-body\" *ngIf=\"config\">\r\n\r\n    <!-- LEFT: Filter Panel -->\r\n    <aside class=\"fts-filter-panel\" [class.fts-filter-panel--hidden]=\"!filterPanelVisible\">\r\n\r\n      <div class=\"fts-filter-panel__header\">\r\n        <span class=\"fts-filter-panel__title\">{{ translate('COMMON.FILTER_TABLE.FILTER_BY') || 'Filter By' }}</span>\r\n      </div>\r\n\r\n      <!-- SmartForm renders the dynamic filter form.\r\n           - No actionBarConfig needed in the JSON \u2014 buttons are rendered below by the component.\r\n           - (valueChange) tracks live values so Apply Filter can read them.\r\n           - formVersion bump forces destroy + re-create on Clear Filter. -->\r\n      <ng-container *ngIf=\"resolvedFormJson && formVersion >= 0\">\r\n        <lib-smart-form\r\n          [formJson]=\"resolvedFormJson\"\r\n          [labels]=\"labels\"\r\n          [initialValues]=\"resolvedInitialValues\"\r\n          (valueChange)=\"onFormValueChange($event)\">\r\n        </lib-smart-form>\r\n      </ng-container>\r\n\r\n      <!-- \u2500\u2500 Filter Action Buttons (Always in component, NOT in JSON config) \u2500\u2500 -->\r\n      <div class=\"fts-filter-panel__actions\">\r\n        <lib-button\r\n          id=\"fts-clear-filter-btn\"\r\n          variant=\"outline\"\r\n          (click)=\"onClearFilter()\">\r\n          {{ clearFilterButtonLabel }}\r\n        </lib-button>\r\n\r\n        <lib-button\r\n          id=\"fts-apply-filter-btn\"\r\n          variant=\"primary\"\r\n          (click)=\"applyCurrentFilter()\">\r\n          {{ applyFilterButtonLabel }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </aside>\r\n\r\n    <!-- RIGHT: Table Panel -->\r\n    <section class=\"fts-table-panel\">\r\n\r\n      <!-- Table toolbar: selection count -->\r\n      <div class=\"fts-table-panel__toolbar\">\r\n        <span class=\"fts-selection-count\" *ngIf=\"config.selectionConfig?.selectionCountLabel\">\r\n          {{ selectionCountText }}\r\n        </span>\r\n      </div>\r\n\r\n      <!-- SmartTable -->\r\n      <lib-smart-table\r\n        *ngIf=\"resolvedTableConfig\"\r\n        [config]=\"resolvedTableConfig\"\r\n        [selectedRows]=\"selectedRows\"\r\n        (rowSelect)=\"onRowSelect($event)\">\r\n      </lib-smart-table>\r\n\r\n    </section>\r\n\r\n  </div>\r\n\r\n  <!-- \u2500\u2500 Footer Action Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n  <div class=\"fts-footer\">\r\n    <lib-button\r\n      id=\"fts-cancel-btn\"\r\n      variant=\"outline\"\r\n      (click)=\"handleCancel()\">\r\n      {{ cancelButtonLabel }}\r\n    </lib-button>\r\n\r\n    <lib-button\r\n      id=\"fts-submit-btn\"\r\n      variant=\"primary\"\r\n      [disabled]=\"selectedRows.length === 0\"\r\n      (click)=\"handleSubmit()\">\r\n      {{ submitButtonLabel }}\r\n    </lib-button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{--fts-panel-bg: #ffffff;--fts-filter-panel-width: 300px;--fts-filter-panel-border: 1px solid var(--border-color, #dee2e6);--fts-header-bg: #ffffff;--fts-header-border: 1px solid var(--border-color, #dee2e6);--fts-header-height: 56px;--fts-header-padding: 0 24px;--fts-header-title-color: var(--text-color, #333333);--fts-header-title-font-size: 18px;--fts-header-title-font-weight: 600;--fts-footer-bg: #ffffff;--fts-footer-border: 1px solid var(--border-color, #dee2e6);--fts-footer-height: 64px;--fts-footer-padding: 0 24px;--fts-footer-gap: 12px;--fts-body-bg: #f8f9fb;--fts-filter-section-title-color: var(--text-muted, #666666);--fts-filter-section-title-font-size: 12px;--fts-filter-section-title-font-weight: 600;--fts-selection-count-color: var(--text-muted, #666666);--fts-selection-count-font-size: 14px;--fts-toolbar-border: 1px solid var(--border-color, #dee2e6);display:block;width:100%;height:100%}.fts-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:var(--fts-panel-bg);overflow:hidden}.fts-header{display:flex;align-items:center;min-height:var(--fts-header-height);padding:var(--fts-header-padding);border-bottom:var(--fts-header-border);background-color:var(--fts-header-bg);flex-shrink:0}.fts-header__title{margin:0;font-size:var(--fts-header-title-font-size);font-weight:var(--fts-header-title-font-weight);color:var(--fts-header-title-color);line-height:1.3}.fts-body{display:flex;flex:1;overflow:hidden;background-color:var(--fts-body-bg)}.fts-filter-panel{width:var(--fts-filter-panel-width);min-width:var(--fts-filter-panel-width);display:flex;flex-direction:column;background-color:var(--fts-panel-bg);overflow-y:auto;padding-bottom:16px}.fts-filter-panel--hidden{display:none}.fts-filter-panel__header{padding:16px 16px 0;flex-shrink:0}.fts-filter-panel__title{font-size:var(--fts-filter-section-title-font-size);font-weight:var(--fts-filter-section-title-font-weight);color:var(--fts-filter-section-title-color);text-transform:uppercase;letter-spacing:.5px}.fts-filter-panel__actions{display:flex;justify-content:space-between;gap:8px;padding:12px 16px 0;margin-top:8px;flex-shrink:0}.fts-filter-panel ::ng-deep .smart-form-container{padding:0}.fts-filter-panel ::ng-deep .smart-form-wrapper{padding:0}.fts-filter-panel ::ng-deep .form-header{display:none}.fts-filter-panel ::ng-deep .form-actions{display:none}.fts-filter-panel ::ng-deep .form-field-wrapper{margin-bottom:12px}.fts-filter-panel ::ng-deep .form-section{padding:12px 16px 0}.fts-table-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:var(--fts-panel-bg)}.fts-table-panel__toolbar{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;min-height:48px;background-color:var(--fts-panel-bg)}.fts-selection-count{font-size:var(--fts-selection-count-font-size);color:var(--fts-selection-count-color);white-space:nowrap}.fts-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fts-footer-gap);min-height:var(--fts-footer-height);padding:var(--fts-footer-padding);border-top:var(--fts-footer-border);background-color:var(--fts-footer-bg);flex-shrink:0}.fts-table-panel ::ng-deep .smart-table-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.fts-table-panel ::ng-deep .st-table-container{flex:1;overflow-y:auto}.fts-table-panel ::ng-deep .st-pagination{flex-shrink:0;padding:8px 16px;border-top:var(--fts-filter-panel-border);background-color:var(--fts-panel-bg)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { config: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], preSelectedRows: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }], onCancel: [{
+                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 SmartTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, declarations: [SmartTableComponent], imports: [CommonModule,
+            FormsModule,
+            PaginationModule,
+            ButtonModule,
+            MaterialModule,
+            ConfirmationModalModule], exports: [SmartTableComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, imports: [CommonModule,
+            FormsModule,
+            PaginationModule,
+            ButtonModule,
+            MaterialModule,
+            ConfirmationModalModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SmartTableComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        PaginationModule,
+                        ButtonModule,
+                        MaterialModule,
+                        ConfirmationModalModule
+                    ],
+                    exports: [
+                        SmartTableComponent
+                    ]
+                }]
+        }] });
+
+class FilterTableSelectorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterTableSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: FilterTableSelectorModule, declarations: [FilterTableSelectorComponent], imports: [CommonModule,
+            SmartFormModule,
+            SmartTableModule,
+            ButtonModule], exports: [FilterTableSelectorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterTableSelectorModule, imports: [CommonModule,
+            SmartFormModule,
+            SmartTableModule,
+            ButtonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterTableSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FilterTableSelectorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        SmartFormModule,
+                        SmartTableModule,
+                        ButtonModule
+                    ],
+                    exports: [
+                        FilterTableSelectorComponent
+                    ]
+                }]
+        }] });
+
+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,
+            AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+            SummaryCardModule,
+            ConfigurableFormModule,
+            FormComponentsModule,
+            SmartFormModule,
+            SideNavModule,
+            FormBuilderModule,
+            FilterTableSelectorModule], exports: [MaterialModule,
+            AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+            SummaryCardModule,
+            ConfigurableFormModule,
+            FormComponentsModule,
+            SmartFormModule,
+            SideNavModule,
+            FormBuilderModule,
+            FilterTableSelectorModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, imports: [CommonModule,
+            MaterialModule,
+            AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+            SummaryCardModule,
+            ConfigurableFormModule,
+            FormComponentsModule,
+            SmartFormModule,
+            SideNavModule,
+            FormBuilderModule,
+            FilterTableSelectorModule, MaterialModule,
+            AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+            SummaryCardModule,
+            ConfigurableFormModule,
+            FormComponentsModule,
+            SmartFormModule,
+            SideNavModule,
+            FormBuilderModule,
+            FilterTableSelectorModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SharedUiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+                        SummaryCardModule,
+                        ConfigurableFormModule,
+                        FormComponentsModule,
+                        SmartFormModule,
+                        SideNavModule,
+                        FormBuilderModule,
+                        FilterTableSelectorModule
+                    ],
+                    exports: [
+                        MaterialModule,
+                        AlertModule, ButtonModule, ButtonDropdownModule, ConfirmationModalModule, FilterSidebarModule, FilterModule,
+                        SummaryCardModule,
+                        ConfigurableFormModule,
+                        FormComponentsModule,
+                        SmartFormModule,
+                        SideNavModule,
+                        FormBuilderModule,
+                        FilterTableSelectorModule
+                    ],
+                }]
+        }] });
+
+/**
+ * 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'
+                }
+            ]
         }
-        const headerElements = this.stickyHeaders.toArray();
-        this.config.columns.forEach((col, index) => {
-            if (col.sticky || index < stickyCount) {
-                col.sticky = true;
-                this.hasStickyColumns = false; // Reset to true only after we set styles? No, wait. 
-                // Actually property is used in template to add class 'sticky-col'
-                // but we need to update Styles based on previous cols widths
-                // Find corresponding header element
-                // Note: headerElements corresponds to columns indices
-                const headerEl = headerElements[index]?.nativeElement;
-                if (headerEl) {
-                    // Set style for current column
-                    this.stickyColumnStyles[col.key] = {
-                        left: `${leftOffset}px`
-                        // We DO NOT set width here, allowing it to be dynamic/auto
-                    };
-                    // Add THIS column's width to offset for the NEXT column
-                    // use getBoundingClientRect or offsetWidth
-                    leftOffset += headerEl.offsetWidth;
+    ],
+    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'
                 }
-                this.hasStickyColumns = true;
-            }
-        });
-        this.cdr.detectChanges();
-    }
-    toTitleCase(str) {
-        return str
-            .replace(/([A-Z])/g, ' $1') // insert space before capital letters
-            .replace(/^./, (str) => str.toUpperCase()) // capitalize the first letter
-            .trim(); // remove any leading/trailing whitespace
-    }
-    get columnCount() {
-        return this.config.columns.length;
-    }
-    onColumnClick(row, col) {
-        if (col.clickAction === 'callback') {
-            this.columnClick.emit({ row, column: col.key });
+            ]
         }
-        else if (col.clickAction === 'route' && col.clickRoute) {
-            const url = this.replaceParams(col.clickRoute, row);
-            this.router.navigateByUrl(url);
+    ],
+};
+
+var configurableForm_examples = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    EXAMPLE_FORM_CONFIG: EXAMPLE_FORM_CONFIG,
+    TARGET_GROUP_CONFIG: TARGET_GROUP_CONFIG
+});
+
+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);
         }
     }
-    getHeaders() {
-        let headers = new HttpHeaders();
-        if (this.config.token) {
-            const headerName = this.config.tokenHeader || 'Authorization';
-            headers = headers.set(headerName, this.config.token);
-        }
-        return headers;
+    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,
+        };
     }
-    toggleDropdown(id, event) {
-        event.stopPropagation();
-        if (this.openDropdownId === id) {
-            this.openDropdownId = null;
+    onItemClick(item) {
+        if (item.disabled)
             return;
-        }
-        // Compute fixed position from the trigger button so the menu escapes
-        // any overflow:auto ancestor (the table container).
-        const btn = event.currentTarget;
-        const rect = btn.getBoundingClientRect();
-        this.dropdownPosition = {
-            top: rect.bottom + 4,
-            right: window.innerWidth - rect.right
-        };
-        this.openDropdownId = id;
+        if (item.id === this.activeId)
+            return;
+        this.selectionChange.emit(item);
     }
-    closeDropdown() {
-        this.openDropdownId = null;
+    trackById(index, item) {
+        return item.id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, deps: [{ token: i3.HttpClient }, { token: i1$4.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartTableComponent, isStandalone: false, selector: "lib-smart-table", inputs: { config: "config", tableData: "tableData", totalItemsCount: "totalItemsCount" }, outputs: { action: "action", topAction: "topAction", filterChange: "filterChange", rowSelect: "rowSelect", columnClick: "columnClick", sortChange: "sortChange", pageChange: "pageChange", searchChange: "searchChange" }, host: { listeners: { "document:click": "closeDropdown()" } }, viewQueries: [{ propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data; let rowIndex = index\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions; let i = index\">\n                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n                            <button class=\"st-dropdown-btn\" (click)=\"toggleDropdown(rowIndex + '-' + i, $event)\">\n                                <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                            </button>\n                            <div class=\"st-dropdown-menu\"\n                                 *ngIf=\"openDropdownId === (rowIndex + '-' + i)\"\n                                 [ngStyle]=\"{\n                                   position: 'fixed',\n                                   top: dropdownPosition.top + 'px',\n                                   right: dropdownPosition.right + 'px',\n                                   left: 'auto'\n                                 }\">\n                                <button class=\"st-dropdown-item\" *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event); closeDropdown()\">\n                                    <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n                                    <span>{{ item.label }}</span>\n                                </button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\n                      <lib-button \n                         [variant]=\"action.btnVariant || 'secondary'\"\n                         [icon]=\"action.icon || ''\"\n                         (click)=\"onAction(action, row)\">\n                         {{ action.label }}\n                     </lib-button>\n                    </ng-container>\n                </ng-container>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n\n  <!-- Built-in Delete Confirmation Modal -->\n  <cc-confirmation-modal\n    [isOpen]=\"deleteModalOpen\"\n    [config]=\"deleteModalConfig\"\n    (confirm)=\"onDeleteConfirm()\"\n    (cancel)=\"onDeleteCancel()\"\n    (close)=\"onDeleteCancel()\">\n    <p>{{ deleteModalMessage }}</p>\n  </cc-confirmation-modal>\n</div>\n\n", styles: [".smart-table-wrapper{margin:var(--st-margin, 1.5rem 0);font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:visible;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px 8px;color:var(--st-text-color, #333);border-radius:4px}.st-dropdown-btn:hover{background:#0000000d}.st-dropdown-menu{min-width:150px;background:var(--st-card-bg, #fff);border:1px solid var(--border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:9999;display:flex;flex-direction:column;padding:4px 0;margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:8px 16px;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:14px;color:var(--st-text-color, #333);transition:background .2s}.st-dropdown-item:hover{background:#0000000d}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "pageSizeOptions", "theme", "labels"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: ConfirmationModalComponent, selector: "cc-confirmation-modal", inputs: ["config", "isOpen", "confirmDisabled", "confirmLoading"], outputs: ["confirm", "cancel", "close", "showCodeSnippet"] }] });
+    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: SmartTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-smart-table', standalone: false, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data; let rowIndex = index\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions; let i = index\">\n                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n                            <button class=\"st-dropdown-btn\" (click)=\"toggleDropdown(rowIndex + '-' + i, $event)\">\n                                <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                            </button>\n                            <div class=\"st-dropdown-menu\"\n                                 *ngIf=\"openDropdownId === (rowIndex + '-' + i)\"\n                                 [ngStyle]=\"{\n                                   position: 'fixed',\n                                   top: dropdownPosition.top + 'px',\n                                   right: dropdownPosition.right + 'px',\n                                   left: 'auto'\n                                 }\">\n                                <button class=\"st-dropdown-item\" *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event); closeDropdown()\">\n                                    <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n                                    <span>{{ item.label }}</span>\n                                </button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\n                      <lib-button \n                         [variant]=\"action.btnVariant || 'secondary'\"\n                         [icon]=\"action.icon || ''\"\n                         (click)=\"onAction(action, row)\">\n                         {{ action.label }}\n                     </lib-button>\n                    </ng-container>\n                </ng-container>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n\n  <!-- Built-in Delete Confirmation Modal -->\n  <cc-confirmation-modal\n    [isOpen]=\"deleteModalOpen\"\n    [config]=\"deleteModalConfig\"\n    (confirm)=\"onDeleteConfirm()\"\n    (cancel)=\"onDeleteCancel()\"\n    (close)=\"onDeleteCancel()\">\n    <p>{{ deleteModalMessage }}</p>\n  </cc-confirmation-modal>\n</div>\n\n", styles: [".smart-table-wrapper{margin:var(--st-margin, 1.5rem 0);font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:visible;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px 8px;color:var(--st-text-color, #333);border-radius:4px}.st-dropdown-btn:hover{background:#0000000d}.st-dropdown-menu{min-width:150px;background:var(--st-card-bg, #fff);border:1px solid var(--border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:9999;display:flex;flex-direction:column;padding:4px 0;margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:8px 16px;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:14px;color:var(--st-text-color, #333);transition:background .2s}.st-dropdown-item:hover{background:#0000000d}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [{ type: i3.HttpClient }, { type: i1$4.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { config: [{
+            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
-            }], tableData: [{
+            }], activeId: [{
                 type: Input
-            }], totalItemsCount: [{
+            }], variant: [{
                 type: Input
-            }], action: [{
-                type: Output
-            }], topAction: [{
-                type: Output
-            }], filterChange: [{
-                type: Output
-            }], rowSelect: [{
-                type: Output
-            }], columnClick: [{
-                type: Output
-            }], sortChange: [{
-                type: Output
-            }], pageChange: [{
-                type: Output
-            }], searchChange: [{
+            }], orientation: [{
+                type: Input
+            }], styleConfig: [{
+                type: Input
+            }], selectionChange: [{
                 type: Output
-            }], stickyHeaders: [{
-                type: ViewChildren,
-                args: ['stickyHeader']
-            }], closeDropdown: [{
-                type: HostListener,
-                args: ['document:click']
             }] } });
 
-class SmartTableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, declarations: [SmartTableComponent], imports: [CommonModule,
-            FormsModule,
-            PaginationModule,
-            ButtonModule,
-            MaterialModule,
-            ConfirmationModalModule], exports: [SmartTableComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, imports: [CommonModule,
-            FormsModule,
-            PaginationModule,
-            ButtonModule,
-            MaterialModule,
-            ConfirmationModalModule] });
+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: SmartTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        SmartTableComponent
+                        NavComponent
                     ],
                     imports: [
-                        CommonModule,
-                        FormsModule,
-                        PaginationModule,
-                        ButtonModule,
-                        MaterialModule,
-                        ConfirmationModalModule
+                        CommonModule
                     ],
                     exports: [
-                        SmartTableComponent
+                        NavComponent
                     ]
                 }]
         }] });
@@ -11947,5 +12377,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FieldConfiguratorComponent, FieldSelectionComponent, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormBuilderModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, appendBaseUrlRecursively, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
+export { AlertComponent, AlertModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FieldConfiguratorComponent, FieldSelectionComponent, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FilterTableSelectorComponent, FilterTableSelectorModule, FormBuilderModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, appendBaseUrlRecursively, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
 //# sourceMappingURL=commons-shared-web-ui.mjs.map