commons-shared-web-ui 0.0.72 → 0.0.74

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

@@ -55,6 +55,8 @@ import * as i1$1 from '@angular/platform-browser';
 import * as i1$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1$5 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 
 class MaterialModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1610,10 +1612,27 @@ class FormFieldComponent {
      * object is reused across multiple allowMulti repeater instances.
      */
     localOptionList = [];
+    /** Snapshot of default (unsearched) options and pagination state for DROPDOWN / AUTOCOMPLETE fields */
+    defaultStateSnapshot = { options: [], currentPage: 0, totalCount: 0, hasMorePages: false };
+    /** Tracks whether the current localOptionList is filtered by an active server-side search query */
+    _isServerSearchActive = false;
     /** Dedicated cache of currently selected option objects */
     selectedItems = [];
     /** Cache of the latest dependency parameters for server-side autocomplete filtering */
     _latestDependencyValues = {};
+    /** True when this field has no optionConfig.dependencies (nothing to satisfy) OR every
+     *  dependency's current value is present — false while waiting on a parent field. Guards every
+     *  opportunistic reload path (dropdown-open, search-reset, search-clear) so a dependent
+     *  dropdown never re-fetches an unfiltered full list just because it was opened/searched before
+     *  its parent was chosen — only setupDependencies()'s own reactive load (which always supplies
+     *  the real dependency params) is allowed to populate it.
+     *  Defaults to true here (fields with no dependencies never get corrected otherwise), but
+     *  ngOnInit flips it to false up front for any field that DOES declare dependencies — closing
+     *  the window between component creation and setupDependencies()'s first (necessarily async,
+     *  via combineLatest) emission, during which a fast dropdown-open would otherwise still see
+     *  this stale `true` default and fire an unfiltered fetch before the parent-unmet state is
+     *  known. */
+    _dependenciesSatisfied = true;
     // ── GROUP / allowMulti support ──────────────────────────────────────────
     /** For GROUP fields with allowMulti = true */
     groupFormArray;
@@ -1707,6 +1726,12 @@ class FormFieldComponent {
         // filteredOptionList mirrors localOptionList and is narrowed by search.
         // Dynamic options loaded via API will replace this array via loadDropdownOptions.
         this.localOptionList = [...(this.config.optionConfig?.optionList || [])];
+        this.defaultStateSnapshot = {
+            options: [...this.localOptionList],
+            currentPage: 0,
+            totalCount: 0,
+            hasMorePages: false
+        };
         this.filteredOptionList = [...this.localOptionList];
         this.registerControl();
         this.setupRequiredExpression();
@@ -1717,6 +1742,11 @@ class FormFieldComponent {
         this.setupMinTimeField();
         this.setupGeneratedField();
         this.setupFormulaValidation(); // Generic formula-based validation
+        // A field with dependencies starts "not satisfied" until setupDependencies()'s own
+        // (async) check proves otherwise — see _dependenciesSatisfied's doc comment. Without this,
+        // a dropdown opened in the brief window before that first emission would still read the
+        // stale `true` class-field default and fetch its full, unfiltered option list.
+        this._dependenciesSatisfied = !this.config.optionConfig?.dependencies;
         this.setupDependencies();
         this.setupMatchValidation(); // cross-field match (e.g. confirmPassword)
         if (!this.config.optionConfig?.dependencies) {
@@ -1793,9 +1823,11 @@ class FormFieldComponent {
     get isSearchableDropdown() {
         return !!this.config.optionConfig?.searchConfig?.enabled;
     }
-    /** Whether the custom single-select dropdown overlay is required (for search OR pagination) */
+    /** Whether the custom single-select dropdown overlay is required — for search, pagination, or
+     *  when optionConfig.customUI opts in to the styled overlay purely for visual consistency with
+     *  sibling dropdowns (no search box, no pagination — just the same panel/chevron treatment). */
     get isCustomSingleDropdown() {
-        return this.isSearchableDropdown || !!this.config.optionConfig?.pagination?.enabled;
+        return this.isSearchableDropdown || !!this.config.optionConfig?.pagination?.enabled || !!this.config.optionConfig?.customUI;
     }
     initGroupField() {
         if (this.config.sectionConfig?.allowMulti) {
@@ -2498,6 +2530,7 @@ class FormFieldComponent {
             const isFirstEmit = prevValues === null;
             const parentChanged = !isFirstEmit && values.some((v, i) => v !== prevValues[i]);
             prevValues = [...values];
+            this._dependenciesSatisfied = allPresent;
             if (allPresent) {
                 if (parentChanged) {
                     // Parent value changed by user interaction — reset child selection so the
@@ -2511,12 +2544,14 @@ class FormFieldComponent {
                 this.dropdownCurrentPage = 0;
                 this.dropdownTotalCount = 0;
                 this.hasMoreDropdownPages = false;
+                this.defaultStateSnapshot = { options: [], currentPage: 0, totalCount: 0, hasMorePages: false };
                 this._latestDependencyValues = dependencyValues;
                 this.loadDropdownOptions(dependencyValues, 0, false);
             }
             else if (this.config.optionConfig) {
                 this._latestDependencyValues = {};
                 this.localOptionList = [];
+                this.defaultStateSnapshot = { options: [], currentPage: 0, totalCount: 0, hasMorePages: false };
                 this.filteredOptionList = [];
                 this.dropdownCurrentPage = 0;
                 this.dropdownTotalCount = 0;
@@ -2784,6 +2819,14 @@ class FormFieldComponent {
                     else {
                         this.hasMoreDropdownPages = mappedOptions.length >= pageSize;
                     }
+                    if (!this._isServerSearchActive) {
+                        this.defaultStateSnapshot = {
+                            options: [...finalOptions],
+                            currentPage: this.dropdownCurrentPage,
+                            totalCount: this.dropdownTotalCount,
+                            hasMorePages: this.hasMoreDropdownPages
+                        };
+                    }
                 }
                 else {
                     // --- Non-paginated behavior (100% backward compatible) ---
@@ -2796,6 +2839,14 @@ class FormFieldComponent {
                     });
                     this.localOptionList = finalOptions;
                     this.hasMoreDropdownPages = false;
+                    if (!this._isServerSearchActive) {
+                        this.defaultStateSnapshot = {
+                            options: [...finalOptions],
+                            currentPage: this.dropdownCurrentPage,
+                            totalCount: this.dropdownTotalCount,
+                            hasMorePages: false
+                        };
+                    }
                 }
                 if (this.isAutocomplete) {
                     this.filteredOptions = [...this.localOptionList];
@@ -3167,17 +3218,28 @@ class FormFieldComponent {
         const searchConfig = this.config.optionConfig?.searchConfig;
         const mode = searchConfig?.mode || 'local';
         if (mode === 'server') {
+            // A dependent field (optionConfig.dependencies) with no parent value yet has nothing to
+            // search against — searching now would fire with the parent filter missing entirely and
+            // come back with an unfiltered full list. Wait for setupDependencies()'s own load instead.
+            if (!this._dependenciesSatisfied)
+                return;
             const searchKey = searchConfig?.searchKey || (searchConfig?.handling === 'nested_string' ? 'SEARCH_TEXT' : 'search');
             const minLen = searchConfig?.minSearchLength ?? 3;
             if (query.length >= minLen) {
+                this._isServerSearchActive = true;
                 const params = { ...this._latestDependencyValues, [searchKey]: query };
                 this.dropdownCurrentPage = 0;
                 this.loadDropdownOptions(params, 0, false);
             }
             else if (query.length === 0) {
-                // Empty query — restore full list
-                this.dropdownCurrentPage = 0;
-                this.loadDropdownOptions(this._latestDependencyValues, 0, false);
+                this._isServerSearchActive = false;
+                if (this.defaultStateSnapshot.options.length > 0) {
+                    this.restoreDefaultOptionList();
+                }
+                else {
+                    this.dropdownCurrentPage = 0;
+                    this.loadDropdownOptions(this._latestDependencyValues, 0, false);
+                }
             }
         }
         else {
@@ -3192,15 +3254,45 @@ class FormFieldComponent {
             }
         }
     }
+    /** Restores localOptionList and pagination metadata from defaultStateSnapshot, preserving selected item(s) */
+    restoreDefaultOptionList() {
+        if (!this.defaultStateSnapshot.options.length)
+            return;
+        // 1. Restore pagination & metadata
+        this.dropdownCurrentPage = this.defaultStateSnapshot.currentPage;
+        this.dropdownTotalCount = this.defaultStateSnapshot.totalCount;
+        this.hasMoreDropdownPages = this.defaultStateSnapshot.hasMorePages;
+        // 2. Restore options array with selected items preserved
+        const defaultCodes = new Set(this.defaultStateSnapshot.options.map(o => o.code));
+        const merged = [...this.defaultStateSnapshot.options];
+        this.selectedItems.forEach(opt => {
+            if (!defaultCodes.has(opt.code)) {
+                merged.push(opt);
+            }
+        });
+        this.localOptionList = merged;
+        this.filteredOptionList = [...this.localOptionList];
+        if (this.isAutocomplete) {
+            this.filteredOptions = [...this.localOptionList];
+        }
+    }
     /** Resets the dropdown search text and filtered list. */
     resetDropdownSearch(forceLoad = true, bypassCache = false) {
+        const wasServerSearch = this._isServerSearchActive;
         this.searchText = '';
+        this._isServerSearchActive = false;
         const searchConfig = this.config.optionConfig?.searchConfig;
-        if (forceLoad && searchConfig?.enabled && searchConfig?.mode === 'server') {
-            if (bypassCache || this.localOptionList.length === 0) {
+        if (searchConfig?.enabled && searchConfig?.mode === 'server') {
+            if (this.defaultStateSnapshot.options.length > 0) {
+                this.restoreDefaultOptionList();
+            }
+            else if (forceLoad && this._dependenciesSatisfied && (bypassCache || wasServerSearch || this.localOptionList.length === 0)) {
                 this.dropdownCurrentPage = 0;
                 this.loadDropdownOptions(this._latestDependencyValues, 0, false);
             }
+            else {
+                this.filteredOptionList = [...this.localOptionList];
+            }
         }
         else {
             this.filteredOptionList = [...this.localOptionList];
@@ -3315,11 +3407,15 @@ class FormFieldComponent {
         options.forEach(opt => {
             const exists = this.localOptionList.some(o => o.code === opt.code);
             if (!exists) {
-                this.localOptionList.push({
+                const item = {
                     label: opt.label,
                     code: opt.code,
                     value: opt.value || opt
-                });
+                };
+                this.localOptionList.push(item);
+                if (!this.defaultStateSnapshot.options.some(o => o.code === opt.code)) {
+                    this.defaultStateSnapshot.options.push(item);
+                }
                 updated = true;
             }
         });
@@ -5718,6 +5814,8 @@ class SmartFormComponent {
                 nodes: fi['nodes'] || {},
                 branchSubType: fi['branchSubType'] || 'SINGLE',
                 showLoader: raw['showLoader'] ?? raw['field']?.['showLoader'] ?? false,
+                searchConfig: fi['searchConfig'],
+                pagination: fi['pagination'],
             };
         }
         // Legacy flat format (backward compatibility with existing geographyConfig JSON)
@@ -5747,6 +5845,8 @@ class SmartFormComponent {
             nodes,
             branchSubType: 'SINGLE',
             showLoader: raw['showLoader'] ?? false,
+            searchConfig: raw['searchConfig'],
+            pagination: raw['pagination'],
         };
     }
     _fetchHierarchyTemplate(cfg) {
@@ -5822,6 +5922,13 @@ class SmartFormComponent {
                 valuePath: cfg.valuePath,
                 showLoader: cfg.showLoader,
             };
+            // Search/pagination are opt-in via geographyConfig.field.searchConfig/pagination — every
+            // generated level (Country/State/District/…) gets the same behavior since they all hit
+            // the same paginated MDM data API, just scoped by a different classCode/parentDataCode.
+            if (cfg.searchConfig)
+                optionConfig['searchConfig'] = cfg.searchConfig;
+            if (cfg.pagination)
+                optionConfig['pagination'] = cfg.pagination;
             if (parentFieldName && !nodeOvr['noDependency']) {
                 optionConfig['dependencies'] = { [cfg.dependencyParam]: parentFieldName };
             }
@@ -5860,7 +5967,10 @@ class SmartFormComponent {
                     subType: cfg.branchSubType,
                     colSpan,
                     isEnabled: true,
-                    optionConfig: { optionList: branchOptions },
+                    // customUI: true renders the same styled overlay/chevron as its sibling MDM-driven
+                    // dropdowns (Country/State/…) for visual consistency, without opting into a search box
+                    // — the branch list (e.g. Urban/Rural) is always short enough not to need one.
+                    optionConfig: { optionList: branchOptions, customUI: true },
                 };
                 if (visibilityExpression)
                     areaTypeField['visibilityExpression'] = visibilityExpression;
@@ -6473,6 +6583,15 @@ class DropdownComponent {
     disabled = false;
     required = false;
     errorMessage = '';
+    serverSearch = false;
+    searchDebounceMs = 300;
+    lazyLoad = false;
+    // Live state for server-search/lazy-load — kept as plain inputs (not part of `config`)
+    // since they change on every keystroke/scroll and shouldn't require replacing the whole
+    // config object each time.
+    loading = false;
+    loadingMore = false;
+    hasMore = false;
     // Configurable styles
     width;
     height;
@@ -6497,6 +6616,8 @@ class DropdownComponent {
     disabledColor;
     boxShadow;
     selectionChange = new EventEmitter();
+    searchTermChange = new EventEmitter();
+    loadMore = new EventEmitter();
     viewport;
     searchInput;
     triggerEl;
@@ -6508,13 +6629,19 @@ class DropdownComponent {
     menuPosition = { top: 0, left: 0, width: 0 };
     onChange = () => { };
     onTouched = () => { };
+    search$ = new Subject();
     constructor(el) {
         this.el = el;
+        this.search$.pipe(debounceTime(this.searchDebounceMs), distinctUntilChanged())
+            .subscribe(term => this.searchTermChange.emit(term));
     }
     ngOnInit() {
         this.updateFromConfig();
         this.updateFromLabels();
-        this.filteredOptions = this.validOptions;
+        this.filteredOptions = this.serverSearch ? this.options : this.validOptions;
+    }
+    ngOnDestroy() {
+        this.search$.complete();
     }
     ngOnChanges(changes) {
         if (changes['config']) {
@@ -6524,7 +6651,7 @@ class DropdownComponent {
             this.updateFromLabels();
         }
         if (changes['config'] || changes['options']) {
-            this.filteredOptions = this.validOptions;
+            this.filteredOptions = this.serverSearch ? this.options : this.validOptions;
         }
         if (changes['selectedValue']) {
             const incoming = changes['selectedValue'].currentValue;
@@ -6543,6 +6670,9 @@ class DropdownComponent {
             this.label = this.config.label ?? this.label;
             this.multiple = this.config.multiple ?? this.multiple;
             this.searchable = this.config.searchable ?? this.searchable;
+            this.serverSearch = this.config.serverSearch ?? this.serverSearch;
+            this.searchDebounceMs = this.config.searchDebounceMs ?? this.searchDebounceMs;
+            this.lazyLoad = this.config.lazyLoad ?? this.lazyLoad;
             this.clearable = this.config.clearable ?? this.clearable;
             this.disabled = this.config.disabled ?? this.disabled;
             this.required = this.config.required ?? this.required;
@@ -6667,6 +6797,11 @@ class DropdownComponent {
     }
     onSearch(term) {
         this.searchTerm = term;
+        if (this.serverSearch) {
+            this.search$.next(term);
+            this.focusedIndex = -1;
+            return;
+        }
         if (!term) {
             this.filteredOptions = this.validOptions;
         }
@@ -6675,6 +6810,14 @@ class DropdownComponent {
         }
         this.focusedIndex = -1;
     }
+    onOptionsScroll(event) {
+        if (!this.lazyLoad || !this.hasMore || this.loading || this.loadingMore)
+            return;
+        const el = event.target;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 24) {
+            this.loadMore.emit();
+        }
+    }
     clearSelection(event) {
         if (event) {
             event.stopPropagation();
@@ -6790,13 +6933,13 @@ class DropdownComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DropdownComponent, isStandalone: false, selector: "lib-dropdown", inputs: { config: "config", labels: "labels", options: "options", selectedValue: "selectedValue", placeholder: "placeholder", label: "label", multiple: "multiple", searchable: "searchable", clearable: "clearable", disabled: "disabled", required: "required", errorMessage: "errorMessage", width: "width", height: "height", borderRadius: "borderRadius", fontSize: "fontSize", gap: "gap", fontFamily: "fontFamily", labelColor: "labelColor", labelFontSize: "labelFontSize", labelFontWeight: "labelFontWeight", backgroundColor: "backgroundColor", borderColor: "borderColor", borderWidth: "borderWidth", padding: "padding", fontWeight: "fontWeight", color: "color", placeholderColor: "placeholderColor", focusBorderColor: "focusBorderColor", errorColor: "errorColor", disabledBackgroundColor: "disabledBackgroundColor", disabledColor: "disabledColor", boxShadow: "boxShadow" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DropdownComponent, isStandalone: false, selector: "lib-dropdown", inputs: { config: "config", labels: "labels", options: "options", selectedValue: "selectedValue", placeholder: "placeholder", label: "label", multiple: "multiple", searchable: "searchable", clearable: "clearable", disabled: "disabled", required: "required", errorMessage: "errorMessage", serverSearch: "serverSearch", searchDebounceMs: "searchDebounceMs", lazyLoad: "lazyLoad", loading: "loading", loadingMore: "loadingMore", hasMore: "hasMore", width: "width", height: "height", borderRadius: "borderRadius", fontSize: "fontSize", gap: "gap", fontFamily: "fontFamily", labelColor: "labelColor", labelFontSize: "labelFontSize", labelFontWeight: "labelFontWeight", backgroundColor: "backgroundColor", borderColor: "borderColor", borderWidth: "borderWidth", padding: "padding", fontWeight: "fontWeight", color: "color", placeholderColor: "placeholderColor", focusBorderColor: "focusBorderColor", errorColor: "errorColor", disabledBackgroundColor: "disabledBackgroundColor", disabledColor: "disabledColor", boxShadow: "boxShadow" }, outputs: { selectionChange: "selectionChange", searchTermChange: "searchTermChange", loadMore: "loadMore" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-dropdown-wrapper\" [ngStyle]=\"wrapperStyles\" libClickOutside (libClickOutside)=\"close()\">\r\n    <!-- Label -->\r\n    <label *ngIf=\"label\" class=\"cc-dropdown-label\" [ngStyle]=\"labelStyles\">\r\n        {{ label }}\r\n        <span *ngIf=\"required\" class=\"cc-required\">{{ resolvedLabels.requiredMarker }}</span>\r\n    </label>\r\n\r\n    <!-- Trigger -->\r\n    <div #triggerEl class=\"cc-dropdown-trigger\" [class.disabled]=\"disabled\" [class.open]=\"isOpen\" [class.error]=\"errorMessage\"\r\n        (click)=\"toggle()\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\" [ngStyle]=\"fieldStyles\">\r\n\r\n        <div class=\"cc-selected-value\" *ngIf=\"hasValue()\">\r\n            {{ multiple ? value.length + ' ' + resolvedLabels.selectedSuffix : getSelectedLabel() }}\r\n        </div>\r\n        <div class=\"cc-placeholder\" *ngIf=\"!hasValue()\">{{ placeholder }}</div>\r\n\r\n        <div class=\"cc-actions\">\r\n            <span *ngIf=\"clearable && hasValue() && !disabled\" class=\"cc-clear-btn\" (click)=\"clearSelection($event)\"\r\n                [attr.aria-label]=\"resolvedLabels.clearAriaLabel\">\r\n                <span class=\"material-icons\">close</span>\r\n            </span>\r\n            <span class=\"cc-arrow material-icons\">expand_more</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Dropdown Menu -->\r\n    <div class=\"cc-dropdown-menu\" *ngIf=\"isOpen\"\r\n         [ngStyle]=\"{ position: 'fixed', top: menuPosition.top + 'px', left: menuPosition.left + 'px', width: menuPosition.width + 'px', 'z-index': '9999' }\"\r\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\r\n        <!-- Search -->\r\n        <div class=\"cc-search-container\" *ngIf=\"searchable\">\r\n            <input type=\"text\" #searchInput [placeholder]=\"resolvedLabels.searchPlaceholder\"\r\n                (input)=\"onSearch($any($event.target).value)\" (click)=\"$event.stopPropagation()\"\r\n                class=\"cc-dropdown-search-input\" />\r\n        </div>\r\n\r\n        <!-- Options Virtual Scroll -->\r\n        <cdk-virtual-scroll-viewport itemSize=\"40\" class=\"cc-virtual-scroll\"\r\n            [style.height.px]=\"filteredOptions.length * 40 > 240 ? 240 : (filteredOptions.length * 40 || 40)\">\r\n\r\n            <div *cdkVirtualFor=\"let option of filteredOptions; let i = index\" class=\"cc-option\"\r\n                [class.selected]=\"isSelected(option)\" [class.focused]=\"i === focusedIndex\"\r\n                [class.disabled]=\"option.disabled\" (click)=\"selectOption(option)\">\r\n\r\n                <!-- Multi-select checkbox visual -->\r\n                <span class=\"cc-multi-check\" *ngIf=\"multiple\">\r\n                    <span class=\"material-icons\" *ngIf=\"isSelected(option)\">check_box</span>\r\n                    <span class=\"material-icons\" *ngIf=\"!isSelected(option)\">check_box_outline_blank</span>\r\n                </span>\r\n\r\n                <!-- Icon -->\r\n                <span class=\"cc-option-icon-wrapper\" *ngIf=\"option.icon\">\r\n                    <span class=\"material-icons\" *ngIf=\"getIconType(option.icon) === 'material'\">{{\r\n                        getIconValue(option.icon) }}</span>\r\n                    <i *ngIf=\"getIconType(option.icon) === 'fontawesome'\" [class]=\"getIconValue(option.icon)\"></i>\r\n                    <img *ngIf=\"getIconType(option.icon) === 'img'\" [src]=\"getIconValue(option.icon)\"\r\n                        class=\"cc-option-img\" alt=\"icon\" />\r\n                </span>\r\n\r\n                <span class=\"cc-option-label\">{{ option.label }}</span>\r\n\r\n                <!-- Single-select check visual -->\r\n                <span class=\"cc-single-check\" *ngIf=\"!multiple && isSelected(option)\">\r\n                    <span class=\"material-icons\">check</span>\r\n                </span>\r\n            </div>\r\n\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"cc-no-results\">{{ resolvedLabels.noResultsFound }}</div>\r\n        </cdk-virtual-scroll-viewport>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    <div class=\"cc-error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n</div>", styles: [".cc-dropdown-wrapper{display:flex;flex-direction:column;width:100%;position:relative;font-family:var(--cc-dropdown-font-family, inherit);gap:var(--cc-dropdown-label-gap, .5rem)}.cc-dropdown-label{font-size:var(--cc-dropdown-font-size, .875rem);font-weight:var(--cc-dropdown-font-weight, 500);color:var(--cc-dropdown-label-color, #202124);margin:0;line-height:1.4}.cc-required{color:var(--cc-dropdown-required-color, #D93025);margin-left:.25rem}.cc-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--cc-dropdown-height, 2.5rem);padding:var(--cc-dropdown-padding, .5rem .75rem);background-color:var(--cc-dropdown-bg, #FEFEFE);border:var(--cc-dropdown-border-width, 1px) solid var(--cc-dropdown-border-color, #BDC1C6);border-radius:var(--cc-dropdown-border-radius, .4375rem);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:all .2s}.cc-dropdown-trigger:focus{outline:none;border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-dropdown-trigger.open{border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-dropdown-trigger.error{border-color:var(--cc-dropdown-error-color, #D93025)}.cc-dropdown-trigger.disabled{background-color:var(--cc-dropdown-disabled-bg, #F1F3F4);cursor:not-allowed;color:var(--cc-dropdown-disabled-color, #80868B)}.cc-dropdown-trigger.disabled .cc-arrow,.cc-dropdown-trigger.disabled .cc-clear-btn{color:var(--cc-dropdown-disabled-color, #80868B)}.cc-selected-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cc-dropdown-color, #202124);font-size:var(--cc-dropdown-font-size, .875rem);font-weight:var(--cc-dropdown-font-weight, 400)}.cc-placeholder{flex:1;color:var(--cc-dropdown-placeholder-color, #80868B);font-size:var(--cc-dropdown-font-size, .875rem)}.cc-actions{display:flex;align-items:center;gap:.5rem}.cc-arrow{color:var(--cc-dropdown-arrow-color, #5F6368);transition:transform .2s;font-size:1.25rem}.cc-dropdown-trigger.open .cc-arrow{transform:rotate(180deg)}.cc-clear-btn{display:flex;align-items:center;justify-content:center;color:var(--cc-dropdown-arrow-color, #5F6368);cursor:pointer}.cc-clear-btn:hover{color:#202124}.cc-clear-btn .material-icons{font-size:1.125rem}.cc-dropdown-menu{position:absolute;top:100%;left:0;width:100%;background-color:#fff;border:1px solid #BDC1C6;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:2px;overflow:hidden;animation:fadeIn .1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.cc-search-container{padding:.5rem;border-bottom:1px solid var(--cc-dropdown-divider-color, #E0E0E0)}.cc-dropdown-search-input{width:100%;padding:.5rem;border:1px solid #BDC1C6;border-radius:4px;outline:none;box-sizing:border-box;font-size:.875rem}.cc-dropdown-search-input:focus{border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-virtual-scroll{width:100%;max-height:240px}.cc-option{display:flex;align-items:center;padding:0 .75rem;height:40px;cursor:pointer;color:var(--cc-dropdown-color, #202124);font-size:var(--cc-dropdown-font-size, .875rem);transition:background-color .1s;box-sizing:border-box}.cc-option:hover,.cc-option.focused{background-color:#f1f3f4}.cc-option.selected{background-color:#e8f0fe;color:#1a73e8}.cc-option.disabled{opacity:.5;cursor:not-allowed;background-color:transparent}.cc-multi-check{margin-right:.5rem;color:var(--cc-dropdown-arrow-color, #5F6368);display:flex;align-items:center}.cc-multi-check .material-icons{font-size:1.25rem}.cc-option.selected .cc-multi-check{color:#1a73e8}.cc-option-icon-wrapper{margin-right:.5rem;display:flex;align-items:center}.cc-option-icon-wrapper .material-icons{font-size:1.25rem}.cc-option-img{width:1.25rem;height:1.25rem;object-fit:contain}.cc-option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-single-check{margin-left:.5rem;color:#1a73e8;display:flex;align-items:center}.cc-single-check .material-icons{font-size:1.125rem}.cc-no-results{padding:.75rem;color:#80868b;text-align:center;font-size:.875rem}.cc-error-message{font-size:.75rem;color:var(--cc-dropdown-error-color, #D93025);margin-top:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[libClickOutside]", outputs: ["libClickOutside"] }] });
+        ], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-dropdown-wrapper\" [ngStyle]=\"wrapperStyles\" libClickOutside (libClickOutside)=\"close()\">\r\n    <!-- Label -->\r\n    <label *ngIf=\"label\" class=\"cc-dropdown-label\" [ngStyle]=\"labelStyles\">\r\n        {{ label }}\r\n        <span *ngIf=\"required\" class=\"cc-required\">{{ resolvedLabels.requiredMarker }}</span>\r\n    </label>\r\n\r\n    <!-- Trigger -->\r\n    <div #triggerEl class=\"cc-dropdown-trigger\" [class.disabled]=\"disabled\" [class.open]=\"isOpen\" [class.error]=\"errorMessage\"\r\n        (click)=\"toggle()\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\" [ngStyle]=\"fieldStyles\">\r\n\r\n        <div class=\"cc-selected-value\" *ngIf=\"hasValue()\">\r\n            {{ multiple ? value.length + ' ' + resolvedLabels.selectedSuffix : getSelectedLabel() }}\r\n        </div>\r\n        <div class=\"cc-placeholder\" *ngIf=\"!hasValue()\">{{ placeholder }}</div>\r\n\r\n        <div class=\"cc-actions\">\r\n            <span *ngIf=\"clearable && hasValue() && !disabled\" class=\"cc-clear-btn\" (click)=\"clearSelection($event)\"\r\n                [attr.aria-label]=\"resolvedLabels.clearAriaLabel\">\r\n                <span class=\"material-icons\">close</span>\r\n            </span>\r\n            <span class=\"cc-arrow material-icons\">expand_more</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Dropdown Menu -->\r\n    <div class=\"cc-dropdown-menu\" *ngIf=\"isOpen\"\r\n         [ngStyle]=\"{ position: 'fixed', top: menuPosition.top + 'px', left: menuPosition.left + 'px', width: menuPosition.width + 'px', 'z-index': '9999' }\"\r\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\r\n        <!-- Search -->\r\n        <div class=\"cc-search-container\" *ngIf=\"searchable\">\r\n            <input type=\"text\" #searchInput [placeholder]=\"resolvedLabels.searchPlaceholder\"\r\n                (input)=\"onSearch($any($event.target).value)\" (click)=\"$event.stopPropagation()\"\r\n                class=\"cc-dropdown-search-input\" />\r\n        </div>\r\n\r\n        <!-- Options Virtual Scroll -->\r\n        <cdk-virtual-scroll-viewport itemSize=\"40\" class=\"cc-virtual-scroll\"\r\n            (scroll)=\"onOptionsScroll($event)\"\r\n            [style.height.px]=\"filteredOptions.length * 40 > 240 ? 240 : (filteredOptions.length * 40 || 40)\">\r\n\r\n            <div *ngIf=\"loading\" class=\"cc-status-row\">Loading...</div>\r\n\r\n            <div *cdkVirtualFor=\"let option of filteredOptions; let i = index\" class=\"cc-option\"\r\n                [class.selected]=\"isSelected(option)\" [class.focused]=\"i === focusedIndex\"\r\n                [class.disabled]=\"option.disabled\" (click)=\"selectOption(option)\">\r\n\r\n                <!-- Multi-select checkbox visual -->\r\n                <span class=\"cc-multi-check\" *ngIf=\"multiple\">\r\n                    <span class=\"material-icons\" *ngIf=\"isSelected(option)\">check_box</span>\r\n                    <span class=\"material-icons\" *ngIf=\"!isSelected(option)\">check_box_outline_blank</span>\r\n                </span>\r\n\r\n                <!-- Icon -->\r\n                <span class=\"cc-option-icon-wrapper\" *ngIf=\"option.icon\">\r\n                    <span class=\"material-icons\" *ngIf=\"getIconType(option.icon) === 'material'\">{{\r\n                        getIconValue(option.icon) }}</span>\r\n                    <i *ngIf=\"getIconType(option.icon) === 'fontawesome'\" [class]=\"getIconValue(option.icon)\"></i>\r\n                    <img *ngIf=\"getIconType(option.icon) === 'img'\" [src]=\"getIconValue(option.icon)\"\r\n                        class=\"cc-option-img\" alt=\"icon\" />\r\n                </span>\r\n\r\n                <span class=\"cc-option-label\">{{ option.label }}</span>\r\n\r\n                <!-- Single-select check visual -->\r\n                <span class=\"cc-single-check\" *ngIf=\"!multiple && isSelected(option)\">\r\n                    <span class=\"material-icons\">check</span>\r\n                </span>\r\n            </div>\r\n\r\n            <div *ngIf=\"!loading && filteredOptions.length === 0\" class=\"cc-no-results\">{{ resolvedLabels.noResultsFound }}</div>\r\n            <div *ngIf=\"loadingMore\" class=\"cc-status-row cc-loading-more\">Loading more...</div>\r\n        </cdk-virtual-scroll-viewport>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    <div class=\"cc-error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n</div>", styles: [".cc-dropdown-wrapper{display:flex;flex-direction:column;width:100%;position:relative;font-family:var(--cc-dropdown-font-family, inherit);gap:var(--cc-dropdown-label-gap, .5rem)}.cc-dropdown-label{font-size:var(--cc-dropdown-font-size, .875rem);font-weight:var(--cc-dropdown-font-weight, 500);color:var(--cc-dropdown-label-color, #202124);margin:0;line-height:1.4}.cc-required{color:var(--cc-dropdown-required-color, #D93025);margin-left:.25rem}.cc-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--cc-dropdown-height, 2.5rem);padding:var(--cc-dropdown-padding, .5rem .75rem);background-color:var(--cc-dropdown-bg, #FEFEFE);border:var(--cc-dropdown-border-width, 1px) solid var(--cc-dropdown-border-color, #BDC1C6);border-radius:var(--cc-dropdown-border-radius, .4375rem);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:all .2s}.cc-dropdown-trigger:focus{outline:none;border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-dropdown-trigger.open{border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-dropdown-trigger.error{border-color:var(--cc-dropdown-error-color, #D93025)}.cc-dropdown-trigger.disabled{background-color:var(--cc-dropdown-disabled-bg, #F1F3F4);cursor:not-allowed;color:var(--cc-dropdown-disabled-color, #80868B)}.cc-dropdown-trigger.disabled .cc-arrow,.cc-dropdown-trigger.disabled .cc-clear-btn{color:var(--cc-dropdown-disabled-color, #80868B)}.cc-selected-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cc-dropdown-color, #202124);font-size:var(--cc-dropdown-font-size, .875rem);font-weight:var(--cc-dropdown-font-weight, 400)}.cc-placeholder{flex:1;color:var(--cc-dropdown-placeholder-color, #80868B);font-size:var(--cc-dropdown-font-size, .875rem)}.cc-actions{display:flex;align-items:center;gap:.5rem}.cc-arrow{color:var(--cc-dropdown-arrow-color, #5F6368);transition:transform .2s;font-size:1.25rem}.cc-dropdown-trigger.open .cc-arrow{transform:rotate(180deg)}.cc-clear-btn{display:flex;align-items:center;justify-content:center;color:var(--cc-dropdown-arrow-color, #5F6368);cursor:pointer}.cc-clear-btn:hover{color:#202124}.cc-clear-btn .material-icons{font-size:1.125rem}.cc-dropdown-menu{position:absolute;top:100%;left:0;width:100%;background-color:#fff;border:1px solid #BDC1C6;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:2px;overflow:hidden;animation:fadeIn .1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.cc-search-container{padding:.5rem;border-bottom:1px solid var(--cc-dropdown-divider-color, #E0E0E0)}.cc-dropdown-search-input{width:100%;padding:.5rem;border:1px solid #BDC1C6;border-radius:4px;outline:none;box-sizing:border-box;font-size:.875rem}.cc-dropdown-search-input:focus{border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-virtual-scroll{width:100%;max-height:240px}.cc-option{display:flex;align-items:center;padding:0 .75rem;height:40px;cursor:pointer;color:var(--cc-dropdown-color, #202124);font-size:var(--cc-dropdown-font-size, .875rem);transition:background-color .1s;box-sizing:border-box}.cc-option:hover,.cc-option.focused{background-color:#f1f3f4}.cc-option.selected{background-color:#e8f0fe;color:#1a73e8}.cc-option.disabled{opacity:.5;cursor:not-allowed;background-color:transparent}.cc-multi-check{margin-right:.5rem;color:var(--cc-dropdown-arrow-color, #5F6368);display:flex;align-items:center}.cc-multi-check .material-icons{font-size:1.25rem}.cc-option.selected .cc-multi-check{color:#1a73e8}.cc-option-icon-wrapper{margin-right:.5rem;display:flex;align-items:center}.cc-option-icon-wrapper .material-icons{font-size:1.25rem}.cc-option-img{width:1.25rem;height:1.25rem;object-fit:contain}.cc-option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-single-check{margin-left:.5rem;color:#1a73e8;display:flex;align-items:center}.cc-single-check .material-icons{font-size:1.125rem}.cc-no-results{padding:.75rem;color:#80868b;text-align:center;font-size:.875rem}.cc-status-row{padding:.5rem .75rem;color:#80868b;text-align:center;font-size:.8125rem}.cc-loading-more{border-top:1px solid var(--cc-dropdown-divider-color, #E0E0E0)}.cc-error-message{font-size:.75rem;color:var(--cc-dropdown-error-color, #D93025);margin-top:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[libClickOutside]", outputs: ["libClickOutside"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -6806,7 +6949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"cc-dropdown-wrapper\" [ngStyle]=\"wrapperStyles\" libClickOutside (libClickOutside)=\"close()\">\r\n    <!-- Label -->\r\n    <label *ngIf=\"label\" class=\"cc-dropdown-label\" [ngStyle]=\"labelStyles\">\r\n        {{ label }}\r\n        <span *ngIf=\"required\" class=\"cc-required\">{{ resolvedLabels.requiredMarker }}</span>\r\n    </label>\r\n\r\n    <!-- Trigger -->\r\n    <div #triggerEl class=\"cc-dropdown-trigger\" [class.disabled]=\"disabled\" [class.open]=\"isOpen\" [class.error]=\"errorMessage\"\r\n        (click)=\"toggle()\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\" [ngStyle]=\"fieldStyles\">\r\n\r\n        <div class=\"cc-selected-value\" *ngIf=\"hasValue()\">\r\n            {{ multiple ? value.length + ' ' + resolvedLabels.selectedSuffix : getSelectedLabel() }}\r\n        </div>\r\n        <div class=\"cc-placeholder\" *ngIf=\"!hasValue()\">{{ placeholder }}</div>\r\n\r\n        <div class=\"cc-actions\">\r\n            <span *ngIf=\"clearable && hasValue() && !disabled\" class=\"cc-clear-btn\" (click)=\"clearSelection($event)\"\r\n                [attr.aria-label]=\"resolvedLabels.clearAriaLabel\">\r\n                <span class=\"material-icons\">close</span>\r\n            </span>\r\n            <span class=\"cc-arrow material-icons\">expand_more</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Dropdown Menu -->\r\n    <div class=\"cc-dropdown-menu\" *ngIf=\"isOpen\"\r\n         [ngStyle]=\"{ position: 'fixed', top: menuPosition.top + 'px', left: menuPosition.left + 'px', width: menuPosition.width + 'px', 'z-index': '9999' }\"\r\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\r\n        <!-- Search -->\r\n        <div class=\"cc-search-container\" *ngIf=\"searchable\">\r\n            <input type=\"text\" #searchInput [placeholder]=\"resolvedLabels.searchPlaceholder\"\r\n                (input)=\"onSearch($any($event.target).value)\" (click)=\"$event.stopPropagation()\"\r\n                class=\"cc-dropdown-search-input\" />\r\n        </div>\r\n\r\n        <!-- Options Virtual Scroll -->\r\n        <cdk-virtual-scroll-viewport itemSize=\"40\" class=\"cc-virtual-scroll\"\r\n            [style.height.px]=\"filteredOptions.length * 40 > 240 ? 240 : (filteredOptions.length * 40 || 40)\">\r\n\r\n            <div *cdkVirtualFor=\"let option of filteredOptions; let i = index\" class=\"cc-option\"\r\n                [class.selected]=\"isSelected(option)\" [class.focused]=\"i === focusedIndex\"\r\n                [class.disabled]=\"option.disabled\" (click)=\"selectOption(option)\">\r\n\r\n                <!-- Multi-select checkbox visual -->\r\n                <span class=\"cc-multi-check\" *ngIf=\"multiple\">\r\n                    <span class=\"material-icons\" *ngIf=\"isSelected(option)\">check_box</span>\r\n                    <span class=\"material-icons\" *ngIf=\"!isSelected(option)\">check_box_outline_blank</span>\r\n                </span>\r\n\r\n                <!-- Icon -->\r\n                <span class=\"cc-option-icon-wrapper\" *ngIf=\"option.icon\">\r\n                    <span class=\"material-icons\" *ngIf=\"getIconType(option.icon) === 'material'\">{{\r\n                        getIconValue(option.icon) }}</span>\r\n                    <i *ngIf=\"getIconType(option.icon) === 'fontawesome'\" [class]=\"getIconValue(option.icon)\"></i>\r\n                    <img *ngIf=\"getIconType(option.icon) === 'img'\" [src]=\"getIconValue(option.icon)\"\r\n                        class=\"cc-option-img\" alt=\"icon\" />\r\n                </span>\r\n\r\n                <span class=\"cc-option-label\">{{ option.label }}</span>\r\n\r\n                <!-- Single-select check visual -->\r\n                <span class=\"cc-single-check\" *ngIf=\"!multiple && isSelected(option)\">\r\n                    <span class=\"material-icons\">check</span>\r\n                </span>\r\n            </div>\r\n\r\n            <div *ngIf=\"filteredOptions.length === 0\" class=\"cc-no-results\">{{ resolvedLabels.noResultsFound }}</div>\r\n        </cdk-virtual-scroll-viewport>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    <div class=\"cc-error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n</div>", styles: [".cc-dropdown-wrapper{display:flex;flex-direction:column;width:100%;position:relative;font-family:var(--cc-dropdown-font-family, inherit);gap:var(--cc-dropdown-label-gap, .5rem)}.cc-dropdown-label{font-size:var(--cc-dropdown-font-size, .875rem);font-weight:var(--cc-dropdown-font-weight, 500);color:var(--cc-dropdown-label-color, #202124);margin:0;line-height:1.4}.cc-required{color:var(--cc-dropdown-required-color, #D93025);margin-left:.25rem}.cc-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--cc-dropdown-height, 2.5rem);padding:var(--cc-dropdown-padding, .5rem .75rem);background-color:var(--cc-dropdown-bg, #FEFEFE);border:var(--cc-dropdown-border-width, 1px) solid var(--cc-dropdown-border-color, #BDC1C6);border-radius:var(--cc-dropdown-border-radius, .4375rem);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:all .2s}.cc-dropdown-trigger:focus{outline:none;border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-dropdown-trigger.open{border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-dropdown-trigger.error{border-color:var(--cc-dropdown-error-color, #D93025)}.cc-dropdown-trigger.disabled{background-color:var(--cc-dropdown-disabled-bg, #F1F3F4);cursor:not-allowed;color:var(--cc-dropdown-disabled-color, #80868B)}.cc-dropdown-trigger.disabled .cc-arrow,.cc-dropdown-trigger.disabled .cc-clear-btn{color:var(--cc-dropdown-disabled-color, #80868B)}.cc-selected-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cc-dropdown-color, #202124);font-size:var(--cc-dropdown-font-size, .875rem);font-weight:var(--cc-dropdown-font-weight, 400)}.cc-placeholder{flex:1;color:var(--cc-dropdown-placeholder-color, #80868B);font-size:var(--cc-dropdown-font-size, .875rem)}.cc-actions{display:flex;align-items:center;gap:.5rem}.cc-arrow{color:var(--cc-dropdown-arrow-color, #5F6368);transition:transform .2s;font-size:1.25rem}.cc-dropdown-trigger.open .cc-arrow{transform:rotate(180deg)}.cc-clear-btn{display:flex;align-items:center;justify-content:center;color:var(--cc-dropdown-arrow-color, #5F6368);cursor:pointer}.cc-clear-btn:hover{color:#202124}.cc-clear-btn .material-icons{font-size:1.125rem}.cc-dropdown-menu{position:absolute;top:100%;left:0;width:100%;background-color:#fff;border:1px solid #BDC1C6;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:2px;overflow:hidden;animation:fadeIn .1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.cc-search-container{padding:.5rem;border-bottom:1px solid var(--cc-dropdown-divider-color, #E0E0E0)}.cc-dropdown-search-input{width:100%;padding:.5rem;border:1px solid #BDC1C6;border-radius:4px;outline:none;box-sizing:border-box;font-size:.875rem}.cc-dropdown-search-input:focus{border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-virtual-scroll{width:100%;max-height:240px}.cc-option{display:flex;align-items:center;padding:0 .75rem;height:40px;cursor:pointer;color:var(--cc-dropdown-color, #202124);font-size:var(--cc-dropdown-font-size, .875rem);transition:background-color .1s;box-sizing:border-box}.cc-option:hover,.cc-option.focused{background-color:#f1f3f4}.cc-option.selected{background-color:#e8f0fe;color:#1a73e8}.cc-option.disabled{opacity:.5;cursor:not-allowed;background-color:transparent}.cc-multi-check{margin-right:.5rem;color:var(--cc-dropdown-arrow-color, #5F6368);display:flex;align-items:center}.cc-multi-check .material-icons{font-size:1.25rem}.cc-option.selected .cc-multi-check{color:#1a73e8}.cc-option-icon-wrapper{margin-right:.5rem;display:flex;align-items:center}.cc-option-icon-wrapper .material-icons{font-size:1.25rem}.cc-option-img{width:1.25rem;height:1.25rem;object-fit:contain}.cc-option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-single-check{margin-left:.5rem;color:#1a73e8;display:flex;align-items:center}.cc-single-check .material-icons{font-size:1.125rem}.cc-no-results{padding:.75rem;color:#80868b;text-align:center;font-size:.875rem}.cc-error-message{font-size:.75rem;color:var(--cc-dropdown-error-color, #D93025);margin-top:.25rem}\n"] }]
+                    ], template: "<div class=\"cc-dropdown-wrapper\" [ngStyle]=\"wrapperStyles\" libClickOutside (libClickOutside)=\"close()\">\r\n    <!-- Label -->\r\n    <label *ngIf=\"label\" class=\"cc-dropdown-label\" [ngStyle]=\"labelStyles\">\r\n        {{ label }}\r\n        <span *ngIf=\"required\" class=\"cc-required\">{{ resolvedLabels.requiredMarker }}</span>\r\n    </label>\r\n\r\n    <!-- Trigger -->\r\n    <div #triggerEl class=\"cc-dropdown-trigger\" [class.disabled]=\"disabled\" [class.open]=\"isOpen\" [class.error]=\"errorMessage\"\r\n        (click)=\"toggle()\" tabindex=\"0\" (keydown)=\"handleKeyboardEvent($event)\" [ngStyle]=\"fieldStyles\">\r\n\r\n        <div class=\"cc-selected-value\" *ngIf=\"hasValue()\">\r\n            {{ multiple ? value.length + ' ' + resolvedLabels.selectedSuffix : getSelectedLabel() }}\r\n        </div>\r\n        <div class=\"cc-placeholder\" *ngIf=\"!hasValue()\">{{ placeholder }}</div>\r\n\r\n        <div class=\"cc-actions\">\r\n            <span *ngIf=\"clearable && hasValue() && !disabled\" class=\"cc-clear-btn\" (click)=\"clearSelection($event)\"\r\n                [attr.aria-label]=\"resolvedLabels.clearAriaLabel\">\r\n                <span class=\"material-icons\">close</span>\r\n            </span>\r\n            <span class=\"cc-arrow material-icons\">expand_more</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Dropdown Menu -->\r\n    <div class=\"cc-dropdown-menu\" *ngIf=\"isOpen\"\r\n         [ngStyle]=\"{ position: 'fixed', top: menuPosition.top + 'px', left: menuPosition.left + 'px', width: menuPosition.width + 'px', 'z-index': '9999' }\"\r\n         (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\r\n        <!-- Search -->\r\n        <div class=\"cc-search-container\" *ngIf=\"searchable\">\r\n            <input type=\"text\" #searchInput [placeholder]=\"resolvedLabels.searchPlaceholder\"\r\n                (input)=\"onSearch($any($event.target).value)\" (click)=\"$event.stopPropagation()\"\r\n                class=\"cc-dropdown-search-input\" />\r\n        </div>\r\n\r\n        <!-- Options Virtual Scroll -->\r\n        <cdk-virtual-scroll-viewport itemSize=\"40\" class=\"cc-virtual-scroll\"\r\n            (scroll)=\"onOptionsScroll($event)\"\r\n            [style.height.px]=\"filteredOptions.length * 40 > 240 ? 240 : (filteredOptions.length * 40 || 40)\">\r\n\r\n            <div *ngIf=\"loading\" class=\"cc-status-row\">Loading...</div>\r\n\r\n            <div *cdkVirtualFor=\"let option of filteredOptions; let i = index\" class=\"cc-option\"\r\n                [class.selected]=\"isSelected(option)\" [class.focused]=\"i === focusedIndex\"\r\n                [class.disabled]=\"option.disabled\" (click)=\"selectOption(option)\">\r\n\r\n                <!-- Multi-select checkbox visual -->\r\n                <span class=\"cc-multi-check\" *ngIf=\"multiple\">\r\n                    <span class=\"material-icons\" *ngIf=\"isSelected(option)\">check_box</span>\r\n                    <span class=\"material-icons\" *ngIf=\"!isSelected(option)\">check_box_outline_blank</span>\r\n                </span>\r\n\r\n                <!-- Icon -->\r\n                <span class=\"cc-option-icon-wrapper\" *ngIf=\"option.icon\">\r\n                    <span class=\"material-icons\" *ngIf=\"getIconType(option.icon) === 'material'\">{{\r\n                        getIconValue(option.icon) }}</span>\r\n                    <i *ngIf=\"getIconType(option.icon) === 'fontawesome'\" [class]=\"getIconValue(option.icon)\"></i>\r\n                    <img *ngIf=\"getIconType(option.icon) === 'img'\" [src]=\"getIconValue(option.icon)\"\r\n                        class=\"cc-option-img\" alt=\"icon\" />\r\n                </span>\r\n\r\n                <span class=\"cc-option-label\">{{ option.label }}</span>\r\n\r\n                <!-- Single-select check visual -->\r\n                <span class=\"cc-single-check\" *ngIf=\"!multiple && isSelected(option)\">\r\n                    <span class=\"material-icons\">check</span>\r\n                </span>\r\n            </div>\r\n\r\n            <div *ngIf=\"!loading && filteredOptions.length === 0\" class=\"cc-no-results\">{{ resolvedLabels.noResultsFound }}</div>\r\n            <div *ngIf=\"loadingMore\" class=\"cc-status-row cc-loading-more\">Loading more...</div>\r\n        </cdk-virtual-scroll-viewport>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    <div class=\"cc-error-message\" *ngIf=\"errorMessage\">{{ errorMessage }}</div>\r\n</div>", styles: [".cc-dropdown-wrapper{display:flex;flex-direction:column;width:100%;position:relative;font-family:var(--cc-dropdown-font-family, inherit);gap:var(--cc-dropdown-label-gap, .5rem)}.cc-dropdown-label{font-size:var(--cc-dropdown-font-size, .875rem);font-weight:var(--cc-dropdown-font-weight, 500);color:var(--cc-dropdown-label-color, #202124);margin:0;line-height:1.4}.cc-required{color:var(--cc-dropdown-required-color, #D93025);margin-left:.25rem}.cc-dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--cc-dropdown-height, 2.5rem);padding:var(--cc-dropdown-padding, .5rem .75rem);background-color:var(--cc-dropdown-bg, #FEFEFE);border:var(--cc-dropdown-border-width, 1px) solid var(--cc-dropdown-border-color, #BDC1C6);border-radius:var(--cc-dropdown-border-radius, .4375rem);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:all .2s}.cc-dropdown-trigger:focus{outline:none;border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-dropdown-trigger.open{border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-dropdown-trigger.error{border-color:var(--cc-dropdown-error-color, #D93025)}.cc-dropdown-trigger.disabled{background-color:var(--cc-dropdown-disabled-bg, #F1F3F4);cursor:not-allowed;color:var(--cc-dropdown-disabled-color, #80868B)}.cc-dropdown-trigger.disabled .cc-arrow,.cc-dropdown-trigger.disabled .cc-clear-btn{color:var(--cc-dropdown-disabled-color, #80868B)}.cc-selected-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cc-dropdown-color, #202124);font-size:var(--cc-dropdown-font-size, .875rem);font-weight:var(--cc-dropdown-font-weight, 400)}.cc-placeholder{flex:1;color:var(--cc-dropdown-placeholder-color, #80868B);font-size:var(--cc-dropdown-font-size, .875rem)}.cc-actions{display:flex;align-items:center;gap:.5rem}.cc-arrow{color:var(--cc-dropdown-arrow-color, #5F6368);transition:transform .2s;font-size:1.25rem}.cc-dropdown-trigger.open .cc-arrow{transform:rotate(180deg)}.cc-clear-btn{display:flex;align-items:center;justify-content:center;color:var(--cc-dropdown-arrow-color, #5F6368);cursor:pointer}.cc-clear-btn:hover{color:#202124}.cc-clear-btn .material-icons{font-size:1.125rem}.cc-dropdown-menu{position:absolute;top:100%;left:0;width:100%;background-color:#fff;border:1px solid #BDC1C6;border-radius:0 0 4px 4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:2px;overflow:hidden;animation:fadeIn .1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.cc-search-container{padding:.5rem;border-bottom:1px solid var(--cc-dropdown-divider-color, #E0E0E0)}.cc-dropdown-search-input{width:100%;padding:.5rem;border:1px solid #BDC1C6;border-radius:4px;outline:none;box-sizing:border-box;font-size:.875rem}.cc-dropdown-search-input:focus{border-color:var(--cc-dropdown-focus-border-color, #1A73E8)}.cc-virtual-scroll{width:100%;max-height:240px}.cc-option{display:flex;align-items:center;padding:0 .75rem;height:40px;cursor:pointer;color:var(--cc-dropdown-color, #202124);font-size:var(--cc-dropdown-font-size, .875rem);transition:background-color .1s;box-sizing:border-box}.cc-option:hover,.cc-option.focused{background-color:#f1f3f4}.cc-option.selected{background-color:#e8f0fe;color:#1a73e8}.cc-option.disabled{opacity:.5;cursor:not-allowed;background-color:transparent}.cc-multi-check{margin-right:.5rem;color:var(--cc-dropdown-arrow-color, #5F6368);display:flex;align-items:center}.cc-multi-check .material-icons{font-size:1.25rem}.cc-option.selected .cc-multi-check{color:#1a73e8}.cc-option-icon-wrapper{margin-right:.5rem;display:flex;align-items:center}.cc-option-icon-wrapper .material-icons{font-size:1.25rem}.cc-option-img{width:1.25rem;height:1.25rem;object-fit:contain}.cc-option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-single-check{margin-left:.5rem;color:#1a73e8;display:flex;align-items:center}.cc-single-check .material-icons{font-size:1.125rem}.cc-no-results{padding:.75rem;color:#80868b;text-align:center;font-size:.875rem}.cc-status-row{padding:.5rem .75rem;color:#80868b;text-align:center;font-size:.8125rem}.cc-loading-more{border-top:1px solid var(--cc-dropdown-divider-color, #E0E0E0)}.cc-error-message{font-size:.75rem;color:var(--cc-dropdown-error-color, #D93025);margin-top:.25rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { config: [{
                 type: Input
             }], labels: [{
@@ -6831,6 +6974,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], errorMessage: [{
                 type: Input
+            }], serverSearch: [{
+                type: Input
+            }], searchDebounceMs: [{
+                type: Input
+            }], lazyLoad: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], loadingMore: [{
+                type: Input
+            }], hasMore: [{
+                type: Input
             }], width: [{
                 type: Input
             }], height: [{
@@ -6875,6 +7030,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], selectionChange: [{
                 type: Output
+            }], searchTermChange: [{
+                type: Output
+            }], loadMore: [{
+                type: Output
             }], viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -10689,6 +10848,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * clone, so `applyTreeToSchema` simply walks the tree and assigns the node state
  * onto those references — there is no positional re-matching, which keeps it robust
  * against ROWs, nested groups, and mixed leaf/section children.
+ *
+ * Field order is a plain property of the schema — there is no separate `sequence`
+ * field. Reordering rewrites the schema's own children array in place, so render
+ * order (which simply follows array order, as it always has) reflects the
+ * configurator's choices with no extra sorting logic anywhere else.
  */
 class ConfigSchemaTreeService {
     // ── Parsing ─────────────────────────────────────────────────────────────────
@@ -10704,8 +10868,9 @@ class ConfigSchemaTreeService {
     }
     /**
      * Write the current tree state back onto the schema the nodes reference.
-     * Sets isEnabled/visible/disabled for visibility and required for mandatory.
-     * Hidden fields always emit required: false ("mandatory only if visible").
+     * Sets isEnabled/visible/disabled for visibility, required for mandatory, and
+     * colSpan; and physically reorders each section's own children array to match
+     * the tree's current field order.
      */
     applyTreeToSchema(sections) {
         for (const section of sections) {
@@ -10715,11 +10880,12 @@ class ConfigSchemaTreeService {
     // ── Private: parsing ──────────────────────────────────────────────────────────
     _buildSections(children) {
         const sections = [];
+        const reorderable = !children.some(c => c.type === 'ROW');
         let leafBundle = [];
         for (const child of children) {
             if (this._isSection(child)) {
                 if (leafBundle.length) {
-                    sections.push(this._createBundleSection(leafBundle));
+                    sections.push(this._createBundleSection(leafBundle, children, reorderable));
                     leafBundle = [];
                 }
                 sections.push(this._buildSection(child));
@@ -10733,11 +10899,12 @@ class ConfigSchemaTreeService {
             }
         }
         if (leafBundle.length)
-            sections.push(this._createBundleSection(leafBundle));
+            sections.push(this._createBundleSection(leafBundle, children, reorderable));
         return sections;
     }
     _buildSection(field) {
         const children = field.sectionConfig?.children ?? field.children ?? [];
+        const reorderable = !children.some(c => c.type === 'ROW');
         const fields = [];
         const subsections = [];
         for (const child of children) {
@@ -10771,9 +10938,11 @@ class ConfigSchemaTreeService {
             expanded: true,
             fields,
             subsections,
+            fieldsSource: children,
+            reorderable,
         };
     }
-    _createBundleSection(fields) {
+    _createBundleSection(fields, fieldsSource, reorderable) {
         return {
             label: 'Fields',
             fieldConfig: null,
@@ -10783,6 +10952,8 @@ class ConfigSchemaTreeService {
             expanded: true,
             fields,
             subsections: [],
+            fieldsSource,
+            reorderable,
         };
     }
     _buildField(field) {
@@ -10793,6 +10964,7 @@ class ConfigSchemaTreeService {
             type: field.type,
             visible,
             mandatory: visible ? field.required === true : false,
+            colSpan: field.colSpan ?? 12,
             lockVisibility: field.lockVisibility === true,
             lockMandatory: field.lockMandatory === true,
             parentName: field.optionConfig?.dependencies?.['parentDataCode'],
@@ -10809,15 +10981,34 @@ class ConfigSchemaTreeService {
             section.fieldConfig.visible = section.visible; // backward compatibility
             section.fieldConfig.disabled = !section.visible;
         }
+        if (section.reorderable && section.fieldsSource) {
+            this._reorderChildren(section.fieldsSource, section.fields);
+        }
         for (const field of section.fields)
             this._applyField(field);
         for (const sub of section.subsections)
             this._applySection(sub);
     }
+    /**
+     * Rewrites `slots` in place so its leaf-field entries follow `fields`' current
+     * order. Section entries (GROUP/SUBFIELDS) keep their original array position —
+     * only the leaf fields move. Safe to call whenever `slots` contains no ROW
+     * (guaranteed by the `reorderable` flag the caller checks).
+     */
+    _reorderChildren(slots, fields) {
+        const orderedLeaves = fields.map(f => f.fieldConfig);
+        let cursor = 0;
+        for (let i = 0; i < slots.length; i++) {
+            if (!this._isSection(slots[i])) {
+                slots[i] = orderedLeaves[cursor++];
+            }
+        }
+    }
     _applyField(field) {
         field.fieldConfig.isEnabled = field.visible;
         field.fieldConfig.visible = field.visible; // backward compatibility
         field.fieldConfig.required = field.visible ? field.mandatory : false;
+        field.fieldConfig.colSpan = field.colSpan;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSchemaTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSchemaTreeService, providedIn: 'root' });
@@ -10894,6 +11085,27 @@ class FieldConfigurationService {
             return { ...f, mandatory: !f.mandatory };
         });
     }
+    /** Set a field's column span, clamped to the 1-12 grid range. */
+    setFieldColSpan(path, fieldIndex, colSpan) {
+        const clamped = Math.min(12, Math.max(1, Math.round(colSpan) || 1));
+        this._updateFieldAtPath(path, fieldIndex, f => ({ ...f, colSpan: clamped }));
+    }
+    /**
+     * Reorder a field within its own section (drag-and-drop). Reordering is scoped to
+     * one section's direct fields — dragging never moves a field across sections.
+     * Rejected (no-op) if the move would place a field above the field it depends on
+     * via `optionConfig.dependencies` (e.g. a "state" field can never sort above the
+     * "country" field it depends on).
+     */
+    reorderField(path, previousIndex, currentIndex) {
+        if (previousIndex === currentIndex)
+            return;
+        this._updateSectionAtPath(path, section => {
+            const fields = [...section.fields];
+            moveItemInArray(fields, previousIndex, currentIndex);
+            return this._isValidFieldOrder(fields) ? { ...section, fields } : section;
+        });
+    }
     // ── Output ──────────────────────────────────────────────────────────────────
     /**
      * Produce the updated schema. Writes the current tree state onto the working
@@ -11001,6 +11213,25 @@ class FieldConfigurationService {
         }));
         return rebuildSections(sections);
     }
+    /**
+     * True when every field with a dependency parent (`parentName`) sorts after that
+     * parent within the given list. Fields whose parent isn't a sibling in this same
+     * list (cross-section dependency, or no such field) are unconstrained here.
+     */
+    _isValidFieldOrder(fields) {
+        const indexByName = new Map();
+        fields.forEach((f, i) => {
+            const name = f.fieldConfig.name;
+            if (name)
+                indexByName.set(name, i);
+        });
+        return fields.every((f, i) => {
+            if (!f.parentName)
+                return true;
+            const parentIndex = indexByName.get(f.parentName);
+            return parentIndex === undefined || parentIndex < i;
+        });
+    }
     /** Recursively set visibility on a section and all its descendants (respecting locks). */
     _cascadeVisibility(section, visible) {
         return {
@@ -11030,16 +11261,23 @@ class ConfigFieldNodeComponent {
     translate;
     toggleVisible = new EventEmitter();
     toggleMandatory = new EventEmitter();
+    colSpanChange = new EventEmitter();
     get displayLabel() {
         const label = this.field.label;
         return this.translate ? this.translate(label) : label;
     }
+    onColSpanInput(value) {
+        const parsed = Number(value);
+        if (!Number.isFinite(parsed))
+            return;
+        this.colSpanChange.emit(parsed);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigFieldNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigFieldNodeComponent, isStandalone: false, selector: "lib-config-field-node", inputs: { field: "field", translate: "translate" }, outputs: { toggleVisible: "toggleVisible", toggleMandatory: "toggleMandatory" }, ngImport: i0, template: "<div\r\n  class=\"ffc-field\"\r\n  [class.ffc-field--hidden]=\"!field.visible\"\r\n  [class.ffc-field--locked]=\"field.lockVisibility\"\r\n>\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"ffc-field__eye\" [class.ffc-field__eye--off]=\"!field.visible\" aria-hidden=\"true\">\r\n    @if (field.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"ffc-field__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Mandatory control (only meaningful when visible) -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"ffc-field__mandatory\"\r\n    [class.ffc-field__mandatory--disabled]=\"!field.visible || field.lockMandatory\"\r\n    [disabled]=\"!field.visible || field.lockMandatory\"\r\n    [attr.aria-pressed]=\"field.mandatory\"\r\n    (click)=\"toggleMandatory.emit()\"\r\n  >\r\n    <span class=\"ffc-check\" [class.ffc-check--on]=\"field.mandatory\">\r\n      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    </span>\r\n    <span class=\"ffc-field__mandatory-text\">Mandatory</span>\r\n  </button>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (field.lockVisibility) {\r\n    <span class=\"ffc-lock\" title=\"This field is always visible\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ffc-toggle\"\r\n      [class.ffc-toggle--on]=\"field.visible\"\r\n      [class.ffc-toggle--disabled]=\"field.visibilityLockedByParent\"\r\n      [disabled]=\"field.visibilityLockedByParent\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"field.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      [attr.title]=\"field.visibilityLockedByParent ? 'Show the field it depends on first' : null\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"ffc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-field{display:flex;align-items:center;gap:var(--ffc-field-gap, 12px);padding:var(--ffc-field-padding, 10px 14px);border-radius:var(--ffc-field-radius, 8px);background:var(--ffc-field-bg, #ffffff);border:1px solid var(--ffc-field-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.ffc-field:hover:not(.ffc-field--locked){background:var(--ffc-field-hover-bg, #f8fafc)}.ffc-field--hidden .ffc-field__eye,.ffc-field--hidden .ffc-field__label,.ffc-field--hidden .ffc-field__mandatory{opacity:.55}.ffc-field--locked{background:var(--ffc-field-locked-bg, #f6f7f8)}.ffc-field__eye{display:flex;align-items:center;color:var(--ffc-eye-color, #6b7280);flex-shrink:0}.ffc-field__eye--off{color:var(--ffc-eye-off-color, #b0b6be)}.ffc-field__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-field-label-size, 14px);color:var(--ffc-field-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-field__mandatory{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit}.ffc-field__mandatory--disabled{cursor:not-allowed}.ffc-field__mandatory-text{font-size:var(--ffc-mandatory-size, 13px);color:var(--ffc-mandatory-color, #52606d);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigFieldNodeComponent, isStandalone: false, selector: "lib-config-field-node", inputs: { field: "field", translate: "translate" }, outputs: { toggleVisible: "toggleVisible", toggleMandatory: "toggleMandatory", colSpanChange: "colSpanChange" }, ngImport: i0, template: "<div\r\n  class=\"ffc-field\"\r\n  [class.ffc-field--hidden]=\"!field.visible\"\r\n  [class.ffc-field--locked]=\"field.lockVisibility\"\r\n>\r\n  <!-- Drag handle (reorder within this section) -->\r\n  <span class=\"ffc-field__grip\" title=\"Drag to reorder within this section\" aria-hidden=\"true\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <circle cx=\"8\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"19\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"19\" r=\"1.6\"></circle>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"ffc-field__eye\" [class.ffc-field__eye--off]=\"!field.visible\" aria-hidden=\"true\">\r\n    @if (field.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"ffc-field__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Column span (1-12 grid) -->\r\n  <label class=\"ffc-field__colspan\" [attr.title]=\"'Column span (1-12)'\">\r\n    <span class=\"ffc-field__colspan-text\">Col</span>\r\n    <input\r\n      type=\"number\"\r\n      min=\"1\"\r\n      max=\"12\"\r\n      step=\"1\"\r\n      class=\"ffc-field__colspan-input\"\r\n      [value]=\"field.colSpan\"\r\n      (change)=\"onColSpanInput($any($event.target).value)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n    />\r\n  </label>\r\n\r\n  <!-- Mandatory control (only meaningful when visible) -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"ffc-field__mandatory\"\r\n    [class.ffc-field__mandatory--disabled]=\"!field.visible || field.lockMandatory\"\r\n    [disabled]=\"!field.visible || field.lockMandatory\"\r\n    [attr.aria-pressed]=\"field.mandatory\"\r\n    (click)=\"toggleMandatory.emit()\"\r\n  >\r\n    <span class=\"ffc-check\" [class.ffc-check--on]=\"field.mandatory\">\r\n      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    </span>\r\n    <span class=\"ffc-field__mandatory-text\">Mandatory</span>\r\n  </button>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (field.lockVisibility) {\r\n    <span class=\"ffc-lock\" title=\"This field is always visible\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ffc-toggle\"\r\n      [class.ffc-toggle--on]=\"field.visible\"\r\n      [class.ffc-toggle--disabled]=\"field.visibilityLockedByParent\"\r\n      [disabled]=\"field.visibilityLockedByParent\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"field.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      [attr.title]=\"field.visibilityLockedByParent ? 'Show the field it depends on first' : null\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"ffc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}:host{display:block;cursor:grab}:host.cdk-drag-dragging,:host.cdk-drag-placeholder{cursor:grabbing}.ffc-field{display:flex;align-items:center;gap:var(--ffc-field-gap, 12px);padding:var(--ffc-field-padding, 10px 14px);border-radius:var(--ffc-field-radius, 8px);background:var(--ffc-field-bg, #ffffff);border:1px solid var(--ffc-field-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.ffc-field:hover:not(.ffc-field--locked){background:var(--ffc-field-hover-bg, #f8fafc)}.ffc-field--hidden .ffc-field__eye,.ffc-field--hidden .ffc-field__label,.ffc-field--hidden .ffc-field__mandatory{opacity:.55}.ffc-field--locked{background:var(--ffc-field-locked-bg, #f6f7f8)}.ffc-field__grip{display:flex;align-items:center;color:var(--ffc-grip-color, #cbd2d9);flex-shrink:0}.ffc-field__eye{display:flex;align-items:center;color:var(--ffc-eye-color, #6b7280);flex-shrink:0}.ffc-field__eye--off{color:var(--ffc-eye-off-color, #b0b6be)}.ffc-field__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-field-label-size, 14px);color:var(--ffc-field-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-field__colspan{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:default}.ffc-field__colspan-text{font-size:var(--ffc-colspan-label-size, 12px);color:var(--ffc-colspan-label-color, #9aa2ab);padding-right:5px}.ffc-field__colspan-input{width:var(--ffc-colspan-input-width, 42px);padding:3px 4px;text-align:center;font-size:var(--ffc-colspan-input-size, 13px);color:var(--ffc-field-label-color, #1f2933);border:1px solid var(--ffc-field-border, #d7dce1);border-radius:5px;background:var(--ffc-colspan-input-bg, #ffffff);cursor:text}.ffc-field__colspan-input:focus{outline:none;border-color:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-field__colspan-input::-webkit-outer-spin-button,.ffc-field__colspan-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ffc-field__colspan-input[type=number]{-moz-appearance:textfield}.ffc-field__mandatory{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit}.ffc-field__mandatory--disabled{cursor:not-allowed}.ffc-field__mandatory-text{font-size:var(--ffc-mandatory-size, 13px);color:var(--ffc-mandatory-color, #52606d);white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigFieldNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-field-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ffc-field\"\r\n  [class.ffc-field--hidden]=\"!field.visible\"\r\n  [class.ffc-field--locked]=\"field.lockVisibility\"\r\n>\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"ffc-field__eye\" [class.ffc-field__eye--off]=\"!field.visible\" aria-hidden=\"true\">\r\n    @if (field.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"ffc-field__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Mandatory control (only meaningful when visible) -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"ffc-field__mandatory\"\r\n    [class.ffc-field__mandatory--disabled]=\"!field.visible || field.lockMandatory\"\r\n    [disabled]=\"!field.visible || field.lockMandatory\"\r\n    [attr.aria-pressed]=\"field.mandatory\"\r\n    (click)=\"toggleMandatory.emit()\"\r\n  >\r\n    <span class=\"ffc-check\" [class.ffc-check--on]=\"field.mandatory\">\r\n      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    </span>\r\n    <span class=\"ffc-field__mandatory-text\">Mandatory</span>\r\n  </button>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (field.lockVisibility) {\r\n    <span class=\"ffc-lock\" title=\"This field is always visible\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ffc-toggle\"\r\n      [class.ffc-toggle--on]=\"field.visible\"\r\n      [class.ffc-toggle--disabled]=\"field.visibilityLockedByParent\"\r\n      [disabled]=\"field.visibilityLockedByParent\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"field.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      [attr.title]=\"field.visibilityLockedByParent ? 'Show the field it depends on first' : null\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"ffc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-field{display:flex;align-items:center;gap:var(--ffc-field-gap, 12px);padding:var(--ffc-field-padding, 10px 14px);border-radius:var(--ffc-field-radius, 8px);background:var(--ffc-field-bg, #ffffff);border:1px solid var(--ffc-field-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.ffc-field:hover:not(.ffc-field--locked){background:var(--ffc-field-hover-bg, #f8fafc)}.ffc-field--hidden .ffc-field__eye,.ffc-field--hidden .ffc-field__label,.ffc-field--hidden .ffc-field__mandatory{opacity:.55}.ffc-field--locked{background:var(--ffc-field-locked-bg, #f6f7f8)}.ffc-field__eye{display:flex;align-items:center;color:var(--ffc-eye-color, #6b7280);flex-shrink:0}.ffc-field__eye--off{color:var(--ffc-eye-off-color, #b0b6be)}.ffc-field__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-field-label-size, 14px);color:var(--ffc-field-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-field__mandatory{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit}.ffc-field__mandatory--disabled{cursor:not-allowed}.ffc-field__mandatory-text{font-size:var(--ffc-mandatory-size, 13px);color:var(--ffc-mandatory-color, #52606d);white-space:nowrap}\n"] }]
+            args: [{ selector: 'lib-config-field-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ffc-field\"\r\n  [class.ffc-field--hidden]=\"!field.visible\"\r\n  [class.ffc-field--locked]=\"field.lockVisibility\"\r\n>\r\n  <!-- Drag handle (reorder within this section) -->\r\n  <span class=\"ffc-field__grip\" title=\"Drag to reorder within this section\" aria-hidden=\"true\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <circle cx=\"8\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"19\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"19\" r=\"1.6\"></circle>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"ffc-field__eye\" [class.ffc-field__eye--off]=\"!field.visible\" aria-hidden=\"true\">\r\n    @if (field.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"ffc-field__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Column span (1-12 grid) -->\r\n  <label class=\"ffc-field__colspan\" [attr.title]=\"'Column span (1-12)'\">\r\n    <span class=\"ffc-field__colspan-text\">Col</span>\r\n    <input\r\n      type=\"number\"\r\n      min=\"1\"\r\n      max=\"12\"\r\n      step=\"1\"\r\n      class=\"ffc-field__colspan-input\"\r\n      [value]=\"field.colSpan\"\r\n      (change)=\"onColSpanInput($any($event.target).value)\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n    />\r\n  </label>\r\n\r\n  <!-- Mandatory control (only meaningful when visible) -->\r\n  <button\r\n    type=\"button\"\r\n    class=\"ffc-field__mandatory\"\r\n    [class.ffc-field__mandatory--disabled]=\"!field.visible || field.lockMandatory\"\r\n    [disabled]=\"!field.visible || field.lockMandatory\"\r\n    [attr.aria-pressed]=\"field.mandatory\"\r\n    (click)=\"toggleMandatory.emit()\"\r\n  >\r\n    <span class=\"ffc-check\" [class.ffc-check--on]=\"field.mandatory\">\r\n      <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n      </svg>\r\n    </span>\r\n    <span class=\"ffc-field__mandatory-text\">Mandatory</span>\r\n  </button>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (field.lockVisibility) {\r\n    <span class=\"ffc-lock\" title=\"This field is always visible\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ffc-toggle\"\r\n      [class.ffc-toggle--on]=\"field.visible\"\r\n      [class.ffc-toggle--disabled]=\"field.visibilityLockedByParent\"\r\n      [disabled]=\"field.visibilityLockedByParent\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"field.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      [attr.title]=\"field.visibilityLockedByParent ? 'Show the field it depends on first' : null\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"ffc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}:host{display:block;cursor:grab}:host.cdk-drag-dragging,:host.cdk-drag-placeholder{cursor:grabbing}.ffc-field{display:flex;align-items:center;gap:var(--ffc-field-gap, 12px);padding:var(--ffc-field-padding, 10px 14px);border-radius:var(--ffc-field-radius, 8px);background:var(--ffc-field-bg, #ffffff);border:1px solid var(--ffc-field-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.ffc-field:hover:not(.ffc-field--locked){background:var(--ffc-field-hover-bg, #f8fafc)}.ffc-field--hidden .ffc-field__eye,.ffc-field--hidden .ffc-field__label,.ffc-field--hidden .ffc-field__mandatory{opacity:.55}.ffc-field--locked{background:var(--ffc-field-locked-bg, #f6f7f8)}.ffc-field__grip{display:flex;align-items:center;color:var(--ffc-grip-color, #cbd2d9);flex-shrink:0}.ffc-field__eye{display:flex;align-items:center;color:var(--ffc-eye-color, #6b7280);flex-shrink:0}.ffc-field__eye--off{color:var(--ffc-eye-off-color, #b0b6be)}.ffc-field__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-field-label-size, 14px);color:var(--ffc-field-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-field__colspan{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:default}.ffc-field__colspan-text{font-size:var(--ffc-colspan-label-size, 12px);color:var(--ffc-colspan-label-color, #9aa2ab);padding-right:5px}.ffc-field__colspan-input{width:var(--ffc-colspan-input-width, 42px);padding:3px 4px;text-align:center;font-size:var(--ffc-colspan-input-size, 13px);color:var(--ffc-field-label-color, #1f2933);border:1px solid var(--ffc-field-border, #d7dce1);border-radius:5px;background:var(--ffc-colspan-input-bg, #ffffff);cursor:text}.ffc-field__colspan-input:focus{outline:none;border-color:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-field__colspan-input::-webkit-outer-spin-button,.ffc-field__colspan-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ffc-field__colspan-input[type=number]{-moz-appearance:textfield}.ffc-field__mandatory{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit}.ffc-field__mandatory--disabled{cursor:not-allowed}.ffc-field__mandatory-text{font-size:var(--ffc-mandatory-size, 13px);color:var(--ffc-mandatory-color, #52606d);white-space:nowrap}\n"] }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11049,6 +11287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], toggleMandatory: [{
                 type: Output
+            }], colSpanChange: [{
+                type: Output
             }] } });
 
 /**
@@ -11065,6 +11305,8 @@ class ConfigSectionNodeComponent {
     toggleExpanded = new EventEmitter();
     fieldToggleVisible = new EventEmitter();
     fieldToggleMandatory = new EventEmitter();
+    fieldColSpanChange = new EventEmitter();
+    fieldReorder = new EventEmitter();
     get displayLabel() {
         return this.translate ? this.translate(this.section.label) : this.section.label;
     }
@@ -11087,6 +11329,18 @@ class ConfigSectionNodeComponent {
     onFieldToggleMandatory(fieldIndex) {
         this.fieldToggleMandatory.emit({ sectionPath: [], fieldIndex });
     }
+    onFieldColSpanChange(fieldIndex, colSpan) {
+        this.fieldColSpanChange.emit({ sectionPath: [], fieldIndex, colSpan });
+    }
+    onFieldDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        this.fieldReorder.emit({
+            sectionPath: [],
+            previousIndex: event.previousIndex,
+            currentIndex: event.currentIndex,
+        });
+    }
     // ── Subsection re-emits (prefix with the subsection index) ───
     onSubToggleVisible(subIndex, subPath) {
         this.toggleVisible.emit([subIndex, ...subPath]);
@@ -11106,15 +11360,29 @@ class ConfigSectionNodeComponent {
             fieldIndex: payload.fieldIndex,
         });
     }
+    onSubFieldColSpanChange(subIndex, payload) {
+        this.fieldColSpanChange.emit({
+            sectionPath: [subIndex, ...payload.sectionPath],
+            fieldIndex: payload.fieldIndex,
+            colSpan: payload.colSpan,
+        });
+    }
+    onSubFieldReorder(subIndex, payload) {
+        this.fieldReorder.emit({
+            sectionPath: [subIndex, ...payload.sectionPath],
+            previousIndex: payload.previousIndex,
+            currentIndex: payload.currentIndex,
+        });
+    }
     trackByIndex(index) {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSectionNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigSectionNodeComponent, isStandalone: false, selector: "lib-config-section-node", inputs: { section: "section", depth: "depth", translate: "translate" }, outputs: { toggleVisible: "toggleVisible", toggleExpanded: "toggleExpanded", fieldToggleVisible: "fieldToggleVisible", fieldToggleMandatory: "fieldToggleMandatory" }, ngImport: i0, template: "<div\r\n  class=\"ffc-section\"\r\n  [class.ffc-section--nested]=\"depth > 0\"\r\n  [class.ffc-section--hidden]=\"hasToggle && !section.visible\"\r\n>\r\n  <div class=\"ffc-section__header\">\r\n    <button\r\n      class=\"ffc-section__expand-btn\"\r\n      type=\"button\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <svg\r\n        class=\"ffc-section__chevron\"\r\n        [class.ffc-section__chevron--open]=\"section.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <span class=\"ffc-section__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n    @if (section.fields.length) {\r\n      <span class=\"ffc-section__count\">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>\r\n    }\r\n\r\n    @if (hasToggle) {\r\n      @if (section.lockVisibility) {\r\n        <span class=\"ffc-lock\" title=\"This section is always visible\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n        </span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ffc-toggle\"\r\n          [class.ffc-toggle--on]=\"section.visible\"\r\n          role=\"switch\"\r\n          [attr.aria-checked]=\"section.visible\"\r\n          [attr.aria-label]=\"'Show ' + displayLabel\"\r\n          (click)=\"onToggleVisible()\"\r\n        >\r\n          <span class=\"ffc-toggle__thumb\"></span>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"ffc-section__body\">\r\n      @for (field of section.fields; track trackByIndex($index); let fi = $index) {\r\n        <lib-config-field-node\r\n          [field]=\"field\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onFieldToggleVisible(fi)\"\r\n          (toggleMandatory)=\"onFieldToggleMandatory(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {\r\n        <lib-config-section-node\r\n          [section]=\"sub\"\r\n          [depth]=\"depth + 1\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onSubToggleVisible(si, $event)\"\r\n          (toggleExpanded)=\"onSubToggleExpanded(si, $event)\"\r\n          (fieldToggleVisible)=\"onSubFieldToggleVisible(si, $event)\"\r\n          (fieldToggleMandatory)=\"onSubFieldToggleMandatory(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-section{border:1px solid var(--ffc-section-border, #e5e7eb);border-radius:var(--ffc-section-radius, 10px);background:var(--ffc-section-bg, #ffffff);overflow:hidden}.ffc-section--nested{border-color:var(--ffc-section-nested-border, #eef0f2);background:var(--ffc-section-nested-bg, #fbfcfd)}.ffc-section--hidden .ffc-section__label,.ffc-section--hidden .ffc-section__count{opacity:.55}.ffc-section__header{display:flex;align-items:center;gap:10px;padding:var(--ffc-section-header-padding, 12px 14px);background:var(--ffc-section-header-bg, #f6f7f8);-webkit-user-select:none;user-select:none}.ffc-section--nested .ffc-section__header{background:var(--ffc-section-nested-header-bg, #f1f3f5)}.ffc-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--ffc-chevron-color, #6b7280);flex-shrink:0}.ffc-section__chevron{transform:rotate(-90deg);transition:transform .2s}.ffc-section__chevron--open{transform:rotate(0)}.ffc-section__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-section-label-size, 14px);font-weight:600;color:var(--ffc-section-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-section__count{flex-shrink:0;font-size:var(--ffc-count-size, 12px);color:var(--ffc-count-color, #7b8794);white-space:nowrap}.ffc-section__body{padding:var(--ffc-section-body-padding, 8px 14px 14px 32px);display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}@media(max-width:640px){.ffc-section__body{padding:8px 10px 10px 18px;gap:6px}}\n"], dependencies: [{ kind: "component", type: ConfigSectionNodeComponent, selector: "lib-config-section-node", inputs: ["section", "depth", "translate"], outputs: ["toggleVisible", "toggleExpanded", "fieldToggleVisible", "fieldToggleMandatory"] }, { kind: "component", type: ConfigFieldNodeComponent, selector: "lib-config-field-node", inputs: ["field", "translate"], outputs: ["toggleVisible", "toggleMandatory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigSectionNodeComponent, isStandalone: false, selector: "lib-config-section-node", inputs: { section: "section", depth: "depth", translate: "translate" }, outputs: { toggleVisible: "toggleVisible", toggleExpanded: "toggleExpanded", fieldToggleVisible: "fieldToggleVisible", fieldToggleMandatory: "fieldToggleMandatory", fieldColSpanChange: "fieldColSpanChange", fieldReorder: "fieldReorder" }, ngImport: i0, template: "<div\r\n  class=\"ffc-section\"\r\n  [class.ffc-section--nested]=\"depth > 0\"\r\n  [class.ffc-section--hidden]=\"hasToggle && !section.visible\"\r\n>\r\n  <div class=\"ffc-section__header\">\r\n    <button\r\n      class=\"ffc-section__expand-btn\"\r\n      type=\"button\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <svg\r\n        class=\"ffc-section__chevron\"\r\n        [class.ffc-section__chevron--open]=\"section.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <span class=\"ffc-section__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n    @if (section.fields.length) {\r\n      <span class=\"ffc-section__count\">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>\r\n    }\r\n\r\n    @if (hasToggle) {\r\n      @if (section.lockVisibility) {\r\n        <span class=\"ffc-lock\" title=\"This section is always visible\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n        </span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ffc-toggle\"\r\n          [class.ffc-toggle--on]=\"section.visible\"\r\n          role=\"switch\"\r\n          [attr.aria-checked]=\"section.visible\"\r\n          [attr.aria-label]=\"'Show ' + displayLabel\"\r\n          (click)=\"onToggleVisible()\"\r\n        >\r\n          <span class=\"ffc-toggle__thumb\"></span>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"ffc-section__body\">\r\n      <div\r\n        class=\"ffc-section__fields\"\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!section.reorderable\"\r\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\r\n      >\r\n        @for (field of section.fields; track trackByIndex($index); let fi = $index) {\r\n          <lib-config-field-node\r\n            cdkDrag\r\n            [cdkDragDisabled]=\"!section.reorderable\"\r\n            [field]=\"field\"\r\n            [translate]=\"translate\"\r\n            (toggleVisible)=\"onFieldToggleVisible(fi)\"\r\n            (toggleMandatory)=\"onFieldToggleMandatory(fi)\"\r\n            (colSpanChange)=\"onFieldColSpanChange(fi, $event)\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {\r\n        <lib-config-section-node\r\n          [section]=\"sub\"\r\n          [depth]=\"depth + 1\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onSubToggleVisible(si, $event)\"\r\n          (toggleExpanded)=\"onSubToggleExpanded(si, $event)\"\r\n          (fieldToggleVisible)=\"onSubFieldToggleVisible(si, $event)\"\r\n          (fieldToggleMandatory)=\"onSubFieldToggleMandatory(si, $event)\"\r\n          (fieldColSpanChange)=\"onSubFieldColSpanChange(si, $event)\"\r\n          (fieldReorder)=\"onSubFieldReorder(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-section{border:1px solid var(--ffc-section-border, #e5e7eb);border-radius:var(--ffc-section-radius, 10px);background:var(--ffc-section-bg, #ffffff);overflow:hidden}.ffc-section--nested{border-color:var(--ffc-section-nested-border, #eef0f2);background:var(--ffc-section-nested-bg, #fbfcfd)}.ffc-section--hidden .ffc-section__label,.ffc-section--hidden .ffc-section__count{opacity:.55}.ffc-section__header{display:flex;align-items:center;gap:10px;padding:var(--ffc-section-header-padding, 12px 14px);background:var(--ffc-section-header-bg, #f6f7f8);-webkit-user-select:none;user-select:none}.ffc-section--nested .ffc-section__header{background:var(--ffc-section-nested-header-bg, #f1f3f5)}.ffc-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--ffc-chevron-color, #6b7280);flex-shrink:0}.ffc-section__chevron{transform:rotate(-90deg);transition:transform .2s}.ffc-section__chevron--open{transform:rotate(0)}.ffc-section__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-section-label-size, 14px);font-weight:600;color:var(--ffc-section-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-section__count{flex-shrink:0;font-size:var(--ffc-count-size, 12px);color:var(--ffc-count-color, #7b8794);white-space:nowrap}.ffc-section__body{padding:var(--ffc-section-body-padding, 8px 14px 14px 14px);display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}@media(max-width:640px){.ffc-section__body{padding:8px 10px 10px 18px;gap:6px}}.ffc-section__fields{display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}\n"], dependencies: [{ kind: "directive", type: i1$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ConfigSectionNodeComponent, selector: "lib-config-section-node", inputs: ["section", "depth", "translate"], outputs: ["toggleVisible", "toggleExpanded", "fieldToggleVisible", "fieldToggleMandatory", "fieldColSpanChange", "fieldReorder"] }, { kind: "component", type: ConfigFieldNodeComponent, selector: "lib-config-field-node", inputs: ["field", "translate"], outputs: ["toggleVisible", "toggleMandatory", "colSpanChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigSectionNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-section-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ffc-section\"\r\n  [class.ffc-section--nested]=\"depth > 0\"\r\n  [class.ffc-section--hidden]=\"hasToggle && !section.visible\"\r\n>\r\n  <div class=\"ffc-section__header\">\r\n    <button\r\n      class=\"ffc-section__expand-btn\"\r\n      type=\"button\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <svg\r\n        class=\"ffc-section__chevron\"\r\n        [class.ffc-section__chevron--open]=\"section.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <span class=\"ffc-section__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n    @if (section.fields.length) {\r\n      <span class=\"ffc-section__count\">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>\r\n    }\r\n\r\n    @if (hasToggle) {\r\n      @if (section.lockVisibility) {\r\n        <span class=\"ffc-lock\" title=\"This section is always visible\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n        </span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ffc-toggle\"\r\n          [class.ffc-toggle--on]=\"section.visible\"\r\n          role=\"switch\"\r\n          [attr.aria-checked]=\"section.visible\"\r\n          [attr.aria-label]=\"'Show ' + displayLabel\"\r\n          (click)=\"onToggleVisible()\"\r\n        >\r\n          <span class=\"ffc-toggle__thumb\"></span>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"ffc-section__body\">\r\n      @for (field of section.fields; track trackByIndex($index); let fi = $index) {\r\n        <lib-config-field-node\r\n          [field]=\"field\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onFieldToggleVisible(fi)\"\r\n          (toggleMandatory)=\"onFieldToggleMandatory(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {\r\n        <lib-config-section-node\r\n          [section]=\"sub\"\r\n          [depth]=\"depth + 1\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onSubToggleVisible(si, $event)\"\r\n          (toggleExpanded)=\"onSubToggleExpanded(si, $event)\"\r\n          (fieldToggleVisible)=\"onSubFieldToggleVisible(si, $event)\"\r\n          (fieldToggleMandatory)=\"onSubFieldToggleMandatory(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-section{border:1px solid var(--ffc-section-border, #e5e7eb);border-radius:var(--ffc-section-radius, 10px);background:var(--ffc-section-bg, #ffffff);overflow:hidden}.ffc-section--nested{border-color:var(--ffc-section-nested-border, #eef0f2);background:var(--ffc-section-nested-bg, #fbfcfd)}.ffc-section--hidden .ffc-section__label,.ffc-section--hidden .ffc-section__count{opacity:.55}.ffc-section__header{display:flex;align-items:center;gap:10px;padding:var(--ffc-section-header-padding, 12px 14px);background:var(--ffc-section-header-bg, #f6f7f8);-webkit-user-select:none;user-select:none}.ffc-section--nested .ffc-section__header{background:var(--ffc-section-nested-header-bg, #f1f3f5)}.ffc-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--ffc-chevron-color, #6b7280);flex-shrink:0}.ffc-section__chevron{transform:rotate(-90deg);transition:transform .2s}.ffc-section__chevron--open{transform:rotate(0)}.ffc-section__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-section-label-size, 14px);font-weight:600;color:var(--ffc-section-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-section__count{flex-shrink:0;font-size:var(--ffc-count-size, 12px);color:var(--ffc-count-color, #7b8794);white-space:nowrap}.ffc-section__body{padding:var(--ffc-section-body-padding, 8px 14px 14px 32px);display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}@media(max-width:640px){.ffc-section__body{padding:8px 10px 10px 18px;gap:6px}}\n"] }]
+            args: [{ selector: 'lib-config-section-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ffc-section\"\r\n  [class.ffc-section--nested]=\"depth > 0\"\r\n  [class.ffc-section--hidden]=\"hasToggle && !section.visible\"\r\n>\r\n  <div class=\"ffc-section__header\">\r\n    <button\r\n      class=\"ffc-section__expand-btn\"\r\n      type=\"button\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      (click)=\"onToggleExpanded()\"\r\n    >\r\n      <svg\r\n        class=\"ffc-section__chevron\"\r\n        [class.ffc-section__chevron--open]=\"section.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <span class=\"ffc-section__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n    @if (section.fields.length) {\r\n      <span class=\"ffc-section__count\">{{ visibleFieldCount }}/{{ section.fields.length }} visible</span>\r\n    }\r\n\r\n    @if (hasToggle) {\r\n      @if (section.lockVisibility) {\r\n        <span class=\"ffc-lock\" title=\"This section is always visible\">\r\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n            <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n            <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n          </svg>\r\n        </span>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ffc-toggle\"\r\n          [class.ffc-toggle--on]=\"section.visible\"\r\n          role=\"switch\"\r\n          [attr.aria-checked]=\"section.visible\"\r\n          [attr.aria-label]=\"'Show ' + displayLabel\"\r\n          (click)=\"onToggleVisible()\"\r\n        >\r\n          <span class=\"ffc-toggle__thumb\"></span>\r\n        </button>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"ffc-section__body\">\r\n      <div\r\n        class=\"ffc-section__fields\"\r\n        cdkDropList\r\n        [cdkDropListDisabled]=\"!section.reorderable\"\r\n        (cdkDropListDropped)=\"onFieldDrop($event)\"\r\n      >\r\n        @for (field of section.fields; track trackByIndex($index); let fi = $index) {\r\n          <lib-config-field-node\r\n            cdkDrag\r\n            [cdkDragDisabled]=\"!section.reorderable\"\r\n            [field]=\"field\"\r\n            [translate]=\"translate\"\r\n            (toggleVisible)=\"onFieldToggleVisible(fi)\"\r\n            (toggleMandatory)=\"onFieldToggleMandatory(fi)\"\r\n            (colSpanChange)=\"onFieldColSpanChange(fi, $event)\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      @for (sub of section.subsections; track trackByIndex($index); let si = $index) {\r\n        <lib-config-section-node\r\n          [section]=\"sub\"\r\n          [depth]=\"depth + 1\"\r\n          [translate]=\"translate\"\r\n          (toggleVisible)=\"onSubToggleVisible(si, $event)\"\r\n          (toggleExpanded)=\"onSubToggleExpanded(si, $event)\"\r\n          (fieldToggleVisible)=\"onSubFieldToggleVisible(si, $event)\"\r\n          (fieldToggleMandatory)=\"onSubFieldToggleMandatory(si, $event)\"\r\n          (fieldColSpanChange)=\"onSubFieldColSpanChange(si, $event)\"\r\n          (fieldReorder)=\"onSubFieldReorder(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".ffc-toggle{position:relative;flex-shrink:0;width:var(--ffc-toggle-width, 38px);height:var(--ffc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--ffc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.ffc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--ffc-toggle-height, 22px) - 4px);height:calc(var(--ffc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--ffc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.ffc-toggle--on{background:var(--ffc-toggle-on-bg, #2f9e6f)}.ffc-toggle--on .ffc-toggle__thumb{left:calc(100% - (var(--ffc-toggle-height, 22px) - 2px))}.ffc-toggle:focus-visible{outline:2px solid var(--ffc-focus-ring, #2f9e6f);outline-offset:2px}.ffc-toggle--disabled{opacity:.45;cursor:not-allowed}.ffc-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-check-size, 18px);height:var(--ffc-check-size, 18px);border-radius:4px;border:2px solid var(--ffc-check-border, #c3c9d0);background:var(--ffc-check-bg, #ffffff);color:transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}.ffc-check svg{opacity:0;transition:opacity .15s ease}.ffc-check--on{background:var(--ffc-check-on-bg, #d97757);border-color:var(--ffc-check-on-bg, #d97757);color:#fff}.ffc-check--on svg{opacity:1}.ffc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ffc-toggle-width, 38px);color:var(--ffc-lock-color, #9aa2ab)}.ffc-section{border:1px solid var(--ffc-section-border, #e5e7eb);border-radius:var(--ffc-section-radius, 10px);background:var(--ffc-section-bg, #ffffff);overflow:hidden}.ffc-section--nested{border-color:var(--ffc-section-nested-border, #eef0f2);background:var(--ffc-section-nested-bg, #fbfcfd)}.ffc-section--hidden .ffc-section__label,.ffc-section--hidden .ffc-section__count{opacity:.55}.ffc-section__header{display:flex;align-items:center;gap:10px;padding:var(--ffc-section-header-padding, 12px 14px);background:var(--ffc-section-header-bg, #f6f7f8);-webkit-user-select:none;user-select:none}.ffc-section--nested .ffc-section__header{background:var(--ffc-section-nested-header-bg, #f1f3f5)}.ffc-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--ffc-chevron-color, #6b7280);flex-shrink:0}.ffc-section__chevron{transform:rotate(-90deg);transition:transform .2s}.ffc-section__chevron--open{transform:rotate(0)}.ffc-section__label{flex:1 1 auto;min-width:0;font-size:var(--ffc-section-label-size, 14px);font-weight:600;color:var(--ffc-section-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ffc-section__count{flex-shrink:0;font-size:var(--ffc-count-size, 12px);color:var(--ffc-count-color, #7b8794);white-space:nowrap}.ffc-section__body{padding:var(--ffc-section-body-padding, 8px 14px 14px 14px);display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}@media(max-width:640px){.ffc-section__body{padding:8px 10px 10px 18px;gap:6px}}.ffc-section__fields{display:flex;flex-direction:column;gap:var(--ffc-field-row-gap, 8px)}\n"] }]
         }], propDecorators: { section: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11130,22 +11398,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], fieldToggleMandatory: [{
                 type: Output
+            }], fieldColSpanChange: [{
+                type: Output
+            }], fieldReorder: [{
+                type: Output
             }] } });
 
 /**
  * Form Field Configuration
  * ------------------------
  * Renders a compact tree of a form schema's sections and fields, each with a
- * **visibility** toggle and a **mandatory** control. Intended to be embedded
- * inside a `cc-confirmation-modal` on a host page ("Configure fields").
+ * **visibility** toggle, a **mandatory** control, an editable **column span**,
+ * and a drag handle to **reorder** fields within their own section. Intended to
+ * be embedded inside a `cc-confirmation-modal` on a host page ("Configure fields").
  *
  * Pass a `FormSchema` via `[schema]`. The input is deep-cloned, so it is never
  * mutated. When the user confirms, call `getUpdatedSchema()` to read back the
- * modified schema (visible/isEnabled/disabled and required flags updated).
+ * modified schema (visible/isEnabled/disabled, required, and colSpan flags
+ * updated, and each section's own children reordered to match the tree).
  *
  * Fields/sections carrying `lockVisibility: true` cannot be hidden, and
  * `lockMandatory: true` freezes their required state.
  *
+ * Reordering is scoped to one section's direct fields — a field can never be
+ * dragged into another section, and a field can never be dragged above a field
+ * it depends on via `optionConfig.dependencies` (e.g. "state" can't sort above
+ * "country"). Sections whose children include a `ROW` wrapper can't be
+ * reordered at all (dragging is disabled) to avoid flattening the row layout.
+ *
  * @example
  * ```html
  * <cc-confirmation-modal [isOpen]="open" (confirm)="save()" (cancel)="open = false">
@@ -11190,15 +11470,21 @@ class FormFieldConfigurationComponent {
     onFieldToggleMandatory(sectionIndex, payload) {
         this.store.toggleFieldMandatory([sectionIndex, ...payload.sectionPath], payload.fieldIndex);
     }
+    onFieldColSpanChange(sectionIndex, payload) {
+        this.store.setFieldColSpan([sectionIndex, ...payload.sectionPath], payload.fieldIndex, payload.colSpan);
+    }
+    onFieldReorder(sectionIndex, payload) {
+        this.store.reorderField([sectionIndex, ...payload.sectionPath], payload.previousIndex, payload.currentIndex);
+    }
     trackByIndex(index) {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FormFieldConfigurationComponent, isStandalone: false, selector: "lib-form-field-configuration", inputs: { schema: "schema", translate: "translate", showLegend: "showLegend" }, providers: [FieldConfigurationService], usesOnChanges: true, ngImport: i0, template: "<div class=\"ffc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"ffc-legend\">\r\n      <span class=\"ffc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n      <span class=\"ffc-legend__item\">\r\n        <span class=\"ffc-legend__asterisk\" aria-hidden=\"true\">&#10033;</span>\r\n        <span>Mandatory (only if visible)</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"ffc-tree\">\r\n    @for (section of store.sections(); track trackByIndex($index); let si = $index) {\r\n      <lib-config-section-node\r\n        [section]=\"section\"\r\n        [depth]=\"0\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(si, $event)\"\r\n        (toggleExpanded)=\"onToggleExpanded(si, $event)\"\r\n        (fieldToggleVisible)=\"onFieldToggleVisible(si, $event)\"\r\n        (fieldToggleMandatory)=\"onFieldToggleMandatory(si, $event)\"\r\n      />\r\n    }\r\n\r\n    @if (store.sections().length === 0) {\r\n      <div class=\"ffc-empty\">\r\n        <p>No sections or fields found in the schema.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".ffc-root{display:flex;flex-direction:column;gap:var(--ffc-root-gap, 12px);font-family:var(--ffc-font-family, inherit)}.ffc-legend{display:flex;align-items:center;gap:var(--ffc-legend-gap, 24px);padding:var(--ffc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--ffc-legend-border, #eef0f2);flex-wrap:wrap}.ffc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--ffc-legend-size, 13px);color:var(--ffc-legend-color, #52606d)}.ffc-legend__asterisk{color:var(--ffc-asterisk-color, #d97757);font-size:14px;line-height:1}.ffc-tree{display:flex;flex-direction:column;gap:var(--ffc-tree-gap, 12px)}.ffc-empty{padding:24px;text-align:center;color:var(--ffc-empty-color, #9aa2ab);font-size:13px}\n"], dependencies: [{ kind: "component", type: ConfigSectionNodeComponent, selector: "lib-config-section-node", inputs: ["section", "depth", "translate"], outputs: ["toggleVisible", "toggleExpanded", "fieldToggleVisible", "fieldToggleMandatory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FormFieldConfigurationComponent, isStandalone: false, selector: "lib-form-field-configuration", inputs: { schema: "schema", translate: "translate", showLegend: "showLegend" }, providers: [FieldConfigurationService], usesOnChanges: true, ngImport: i0, template: "<div class=\"ffc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"ffc-legend\">\r\n      <span class=\"ffc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n      <span class=\"ffc-legend__item\">\r\n        <span class=\"ffc-legend__asterisk\" aria-hidden=\"true\">&#10033;</span>\r\n        <span>Mandatory (only if visible)</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"ffc-tree\">\r\n    @for (section of store.sections(); track trackByIndex($index); let si = $index) {\r\n      <lib-config-section-node\r\n        [section]=\"section\"\r\n        [depth]=\"0\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(si, $event)\"\r\n        (toggleExpanded)=\"onToggleExpanded(si, $event)\"\r\n        (fieldToggleVisible)=\"onFieldToggleVisible(si, $event)\"\r\n        (fieldToggleMandatory)=\"onFieldToggleMandatory(si, $event)\"\r\n        (fieldColSpanChange)=\"onFieldColSpanChange(si, $event)\"\r\n        (fieldReorder)=\"onFieldReorder(si, $event)\"\r\n      />\r\n    }\r\n\r\n    @if (store.sections().length === 0) {\r\n      <div class=\"ffc-empty\">\r\n        <p>No sections or fields found in the schema.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".ffc-root{display:flex;flex-direction:column;gap:var(--ffc-root-gap, 12px);font-family:var(--ffc-font-family, inherit)}.ffc-legend{display:flex;align-items:center;gap:var(--ffc-legend-gap, 24px);padding:var(--ffc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--ffc-legend-border, #eef0f2);flex-wrap:wrap}.ffc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--ffc-legend-size, 13px);color:var(--ffc-legend-color, #52606d)}.ffc-legend__asterisk{color:var(--ffc-asterisk-color, #d97757);font-size:14px;line-height:1}.ffc-tree{display:flex;flex-direction:column;gap:var(--ffc-tree-gap, 12px)}.ffc-empty{padding:24px;text-align:center;color:var(--ffc-empty-color, #9aa2ab);font-size:13px}\n"], dependencies: [{ kind: "component", type: ConfigSectionNodeComponent, selector: "lib-config-section-node", inputs: ["section", "depth", "translate"], outputs: ["toggleVisible", "toggleExpanded", "fieldToggleVisible", "fieldToggleMandatory", "fieldColSpanChange", "fieldReorder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-field-configuration', standalone: false, providers: [FieldConfigurationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ffc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"ffc-legend\">\r\n      <span class=\"ffc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n      <span class=\"ffc-legend__item\">\r\n        <span class=\"ffc-legend__asterisk\" aria-hidden=\"true\">&#10033;</span>\r\n        <span>Mandatory (only if visible)</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"ffc-tree\">\r\n    @for (section of store.sections(); track trackByIndex($index); let si = $index) {\r\n      <lib-config-section-node\r\n        [section]=\"section\"\r\n        [depth]=\"0\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(si, $event)\"\r\n        (toggleExpanded)=\"onToggleExpanded(si, $event)\"\r\n        (fieldToggleVisible)=\"onFieldToggleVisible(si, $event)\"\r\n        (fieldToggleMandatory)=\"onFieldToggleMandatory(si, $event)\"\r\n      />\r\n    }\r\n\r\n    @if (store.sections().length === 0) {\r\n      <div class=\"ffc-empty\">\r\n        <p>No sections or fields found in the schema.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".ffc-root{display:flex;flex-direction:column;gap:var(--ffc-root-gap, 12px);font-family:var(--ffc-font-family, inherit)}.ffc-legend{display:flex;align-items:center;gap:var(--ffc-legend-gap, 24px);padding:var(--ffc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--ffc-legend-border, #eef0f2);flex-wrap:wrap}.ffc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--ffc-legend-size, 13px);color:var(--ffc-legend-color, #52606d)}.ffc-legend__asterisk{color:var(--ffc-asterisk-color, #d97757);font-size:14px;line-height:1}.ffc-tree{display:flex;flex-direction:column;gap:var(--ffc-tree-gap, 12px)}.ffc-empty{padding:24px;text-align:center;color:var(--ffc-empty-color, #9aa2ab);font-size:13px}\n"] }]
+            args: [{ selector: 'lib-form-field-configuration', standalone: false, providers: [FieldConfigurationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ffc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"ffc-legend\">\r\n      <span class=\"ffc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n      <span class=\"ffc-legend__item\">\r\n        <span class=\"ffc-legend__asterisk\" aria-hidden=\"true\">&#10033;</span>\r\n        <span>Mandatory (only if visible)</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"ffc-tree\">\r\n    @for (section of store.sections(); track trackByIndex($index); let si = $index) {\r\n      <lib-config-section-node\r\n        [section]=\"section\"\r\n        [depth]=\"0\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(si, $event)\"\r\n        (toggleExpanded)=\"onToggleExpanded(si, $event)\"\r\n        (fieldToggleVisible)=\"onFieldToggleVisible(si, $event)\"\r\n        (fieldToggleMandatory)=\"onFieldToggleMandatory(si, $event)\"\r\n        (fieldColSpanChange)=\"onFieldColSpanChange(si, $event)\"\r\n        (fieldReorder)=\"onFieldReorder(si, $event)\"\r\n      />\r\n    }\r\n\r\n    @if (store.sections().length === 0) {\r\n      <div class=\"ffc-empty\">\r\n        <p>No sections or fields found in the schema.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".ffc-root{display:flex;flex-direction:column;gap:var(--ffc-root-gap, 12px);font-family:var(--ffc-font-family, inherit)}.ffc-legend{display:flex;align-items:center;gap:var(--ffc-legend-gap, 24px);padding:var(--ffc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--ffc-legend-border, #eef0f2);flex-wrap:wrap}.ffc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--ffc-legend-size, 13px);color:var(--ffc-legend-color, #52606d)}.ffc-legend__asterisk{color:var(--ffc-asterisk-color, #d97757);font-size:14px;line-height:1}.ffc-tree{display:flex;flex-direction:column;gap:var(--ffc-tree-gap, 12px)}.ffc-empty{padding:24px;text-align:center;color:var(--ffc-empty-color, #9aa2ab);font-size:13px}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11217,8 +11503,10 @@ class FormFieldConfigurationModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, declarations: [FormFieldConfigurationComponent,
             ConfigSectionNodeComponent,
-            ConfigFieldNodeComponent], imports: [CommonModule], exports: [FormFieldConfigurationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, imports: [CommonModule] });
+            ConfigFieldNodeComponent], imports: [CommonModule,
+            DragDropModule], exports: [FormFieldConfigurationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, imports: [CommonModule,
+            DragDropModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormFieldConfigurationModule, decorators: [{
             type: NgModule,
@@ -11226,6 +11514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     declarations: [...COMPONENTS$1],
                     imports: [
                         CommonModule,
+                        DragDropModule,
                     ],
                     exports: [
                         FormFieldConfigurationComponent,
@@ -11251,7 +11540,8 @@ class TableColumnConfigurationService {
      */
     loadConfig(config) {
         const workingConfig = JSON.parse(JSON.stringify(config));
-        const columns = (workingConfig.columns ?? []).map(col => this._buildColumn(col));
+        workingConfig.columns = this._sortBySequence(workingConfig.columns ?? []);
+        const columns = workingConfig.columns.map(col => this._buildColumn(col));
         this._state.set({ columns, workingConfig });
     }
     // ── Mutations ─────────────────────────────────────────────────────────────
@@ -11262,6 +11552,14 @@ class TableColumnConfigurationService {
             columns: state.columns.map((c, i) => i === index && !c.lockVisibility ? { ...c, visible: !c.visible } : c),
         }));
     }
+    /** Move a column from `previousIndex` to `currentIndex` (drag-and-drop reorder). */
+    reorderColumn(previousIndex, currentIndex) {
+        this._state.update(state => {
+            const columns = [...state.columns];
+            moveItemInArray(columns, previousIndex, currentIndex);
+            return { ...state, columns };
+        });
+    }
     // ── Output ────────────────────────────────────────────────────────────────
     /**
      * Produce the updated config. Writes the current node state onto the working
@@ -11272,10 +11570,13 @@ class TableColumnConfigurationService {
         const { columns, workingConfig } = this._state();
         if (!workingConfig)
             return null;
-        for (const node of columns) {
+        columns.forEach((node, index) => {
             node.column.isEnabled = node.visible;
             node.column.visible = node.visible; // backward compatibility
-        }
+            node.column.sequence = index;
+        });
+        // Keep the working config's columns array in sync with the (possibly reordered) node list.
+        workingConfig.columns = columns.map(node => node.column);
         return JSON.parse(JSON.stringify(workingConfig));
     }
     // ── Private helpers ─────────────────────────────────────────────────────────
@@ -11288,6 +11589,21 @@ class TableColumnConfigurationService {
             lockVisibility: column.lockVisibility === true,
         };
     }
+    /**
+     * Orders columns by `sequence` (ascending). Columns without a `sequence` keep their
+     * original relative order, placed after any columns that do have one — so configs that
+     * never set `sequence` come back untouched (stable sort).
+     */
+    _sortBySequence(columns) {
+        const hasSequence = columns.some(c => c.sequence !== undefined && c.sequence !== null);
+        if (!hasSequence)
+            return columns;
+        return [...columns].sort((a, b) => {
+            const aSeq = a.sequence ?? Number.MAX_SAFE_INTEGER;
+            const bSeq = b.sequence ?? Number.MAX_SAFE_INTEGER;
+            return aSeq - bSeq;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationService });
 }
@@ -11310,11 +11626,11 @@ class ConfigColumnNodeComponent {
         return this.translate ? this.translate(label) : label;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigColumnNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigColumnNodeComponent, isStandalone: false, selector: "lib-config-column-node", inputs: { column: "column", translate: "translate" }, outputs: { toggleVisible: "toggleVisible" }, ngImport: i0, template: "<div\r\n  class=\"tcc-col\"\r\n  [class.tcc-col--hidden]=\"!column.visible\"\r\n  [class.tcc-col--locked]=\"column.lockVisibility\"\r\n>\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"tcc-col__eye\" [class.tcc-col__eye--off]=\"!column.visible\" aria-hidden=\"true\">\r\n    @if (column.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"tcc-col__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (column.lockVisibility) {\r\n    <span class=\"tcc-lock\" title=\"This column is always visible\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tcc-toggle\"\r\n      [class.tcc-toggle--on]=\"column.visible\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"column.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"tcc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".tcc-toggle{position:relative;flex-shrink:0;width:var(--tcc-toggle-width, 38px);height:var(--tcc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--tcc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.tcc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--tcc-toggle-height, 22px) - 4px);height:calc(var(--tcc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--tcc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.tcc-toggle--on{background:var(--tcc-toggle-on-bg, #2f9e6f)}.tcc-toggle--on .tcc-toggle__thumb{left:calc(100% - (var(--tcc-toggle-height, 22px) - 2px))}.tcc-toggle:focus-visible{outline:2px solid var(--tcc-focus-ring, #2f9e6f);outline-offset:2px}.tcc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tcc-toggle-width, 38px);color:var(--tcc-lock-color, #9aa2ab)}.tcc-col{display:flex;align-items:center;gap:var(--tcc-col-gap, 12px);padding:var(--tcc-col-padding, 10px 14px);border-radius:var(--tcc-col-radius, 8px);background:var(--tcc-col-bg, #ffffff);border:1px solid var(--tcc-col-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.tcc-col:hover:not(.tcc-col--locked){background:var(--tcc-col-hover-bg, #f8fafc)}.tcc-col--hidden .tcc-col__eye,.tcc-col--hidden .tcc-col__label{opacity:.55}.tcc-col--locked{background:var(--tcc-col-locked-bg, #f6f7f8)}.tcc-col__eye{display:flex;align-items:center;color:var(--tcc-eye-color, #6b7280);flex-shrink:0}.tcc-col__eye--off{color:var(--tcc-eye-off-color, #b0b6be)}.tcc-col__label{flex:1 1 auto;min-width:0;font-size:var(--tcc-col-label-size, 14px);color:var(--tcc-col-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfigColumnNodeComponent, isStandalone: false, selector: "lib-config-column-node", inputs: { column: "column", translate: "translate" }, outputs: { toggleVisible: "toggleVisible" }, ngImport: i0, template: "<div\r\n  class=\"tcc-col\"\r\n  [class.tcc-col--hidden]=\"!column.visible\"\r\n  [class.tcc-col--locked]=\"column.lockVisibility\"\r\n>\r\n  <!-- Drag handle (reorder via the sequence field) -->\r\n  <span class=\"tcc-col__grip\" title=\"Drag to reorder\" aria-hidden=\"true\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <circle cx=\"8\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"19\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"19\" r=\"1.6\"></circle>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"tcc-col__eye\" [class.tcc-col__eye--off]=\"!column.visible\" aria-hidden=\"true\">\r\n    @if (column.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"tcc-col__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (column.lockVisibility) {\r\n    <span class=\"tcc-lock\" title=\"This column is always visible\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tcc-toggle\"\r\n      [class.tcc-toggle--on]=\"column.visible\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"column.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"tcc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".tcc-toggle{position:relative;flex-shrink:0;width:var(--tcc-toggle-width, 38px);height:var(--tcc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--tcc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.tcc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--tcc-toggle-height, 22px) - 4px);height:calc(var(--tcc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--tcc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.tcc-toggle--on{background:var(--tcc-toggle-on-bg, #2f9e6f)}.tcc-toggle--on .tcc-toggle__thumb{left:calc(100% - (var(--tcc-toggle-height, 22px) - 2px))}.tcc-toggle:focus-visible{outline:2px solid var(--tcc-focus-ring, #2f9e6f);outline-offset:2px}.tcc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tcc-toggle-width, 38px);color:var(--tcc-lock-color, #9aa2ab)}:host{display:block;cursor:grab}:host.cdk-drag-dragging,:host.cdk-drag-placeholder{cursor:grabbing}.tcc-col{display:flex;align-items:center;gap:var(--tcc-col-gap, 12px);padding:var(--tcc-col-padding, 10px 14px);border-radius:var(--tcc-col-radius, 8px);background:var(--tcc-col-bg, #ffffff);border:1px solid var(--tcc-col-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.tcc-col:hover:not(.tcc-col--locked){background:var(--tcc-col-hover-bg, #f8fafc)}.tcc-col__grip{display:flex;align-items:center;color:var(--tcc-grip-color, #cbd2d9);flex-shrink:0}.tcc-col--hidden .tcc-col__eye,.tcc-col--hidden .tcc-col__label{opacity:.55}.tcc-col--locked{background:var(--tcc-col-locked-bg, #f6f7f8)}.tcc-col__eye{display:flex;align-items:center;color:var(--tcc-eye-color, #6b7280);flex-shrink:0}.tcc-col__eye--off{color:var(--tcc-eye-off-color, #b0b6be)}.tcc-col__label{flex:1 1 auto;min-width:0;font-size:var(--tcc-col-label-size, 14px);color:var(--tcc-col-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfigColumnNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-config-column-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"tcc-col\"\r\n  [class.tcc-col--hidden]=\"!column.visible\"\r\n  [class.tcc-col--locked]=\"column.lockVisibility\"\r\n>\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"tcc-col__eye\" [class.tcc-col__eye--off]=\"!column.visible\" aria-hidden=\"true\">\r\n    @if (column.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"tcc-col__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (column.lockVisibility) {\r\n    <span class=\"tcc-lock\" title=\"This column is always visible\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tcc-toggle\"\r\n      [class.tcc-toggle--on]=\"column.visible\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"column.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"tcc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".tcc-toggle{position:relative;flex-shrink:0;width:var(--tcc-toggle-width, 38px);height:var(--tcc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--tcc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.tcc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--tcc-toggle-height, 22px) - 4px);height:calc(var(--tcc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--tcc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.tcc-toggle--on{background:var(--tcc-toggle-on-bg, #2f9e6f)}.tcc-toggle--on .tcc-toggle__thumb{left:calc(100% - (var(--tcc-toggle-height, 22px) - 2px))}.tcc-toggle:focus-visible{outline:2px solid var(--tcc-focus-ring, #2f9e6f);outline-offset:2px}.tcc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tcc-toggle-width, 38px);color:var(--tcc-lock-color, #9aa2ab)}.tcc-col{display:flex;align-items:center;gap:var(--tcc-col-gap, 12px);padding:var(--tcc-col-padding, 10px 14px);border-radius:var(--tcc-col-radius, 8px);background:var(--tcc-col-bg, #ffffff);border:1px solid var(--tcc-col-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.tcc-col:hover:not(.tcc-col--locked){background:var(--tcc-col-hover-bg, #f8fafc)}.tcc-col--hidden .tcc-col__eye,.tcc-col--hidden .tcc-col__label{opacity:.55}.tcc-col--locked{background:var(--tcc-col-locked-bg, #f6f7f8)}.tcc-col__eye{display:flex;align-items:center;color:var(--tcc-eye-color, #6b7280);flex-shrink:0}.tcc-col__eye--off{color:var(--tcc-eye-off-color, #b0b6be)}.tcc-col__label{flex:1 1 auto;min-width:0;font-size:var(--tcc-col-label-size, 14px);color:var(--tcc-col-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'lib-config-column-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"tcc-col\"\r\n  [class.tcc-col--hidden]=\"!column.visible\"\r\n  [class.tcc-col--locked]=\"column.lockVisibility\"\r\n>\r\n  <!-- Drag handle (reorder via the sequence field) -->\r\n  <span class=\"tcc-col__grip\" title=\"Drag to reorder\" aria-hidden=\"true\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n      <circle cx=\"8\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"5\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"12\" r=\"1.6\"></circle>\r\n      <circle cx=\"8\" cy=\"19\" r=\"1.6\"></circle>\r\n      <circle cx=\"16\" cy=\"19\" r=\"1.6\"></circle>\r\n    </svg>\r\n  </span>\r\n\r\n  <!-- Visibility indicator (eye / eye-off) -->\r\n  <span class=\"tcc-col__eye\" [class.tcc-col__eye--off]=\"!column.visible\" aria-hidden=\"true\">\r\n    @if (column.visible) {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n      </svg>\r\n    } @else {\r\n      <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"></path>\r\n        <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line>\r\n      </svg>\r\n    }\r\n  </span>\r\n\r\n  <span class=\"tcc-col__label\" [title]=\"displayLabel\">{{ displayLabel }}</span>\r\n\r\n  <!-- Visibility toggle / lock -->\r\n  @if (column.lockVisibility) {\r\n    <span class=\"tcc-lock\" title=\"This column is always visible\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <button\r\n      type=\"button\"\r\n      class=\"tcc-toggle\"\r\n      [class.tcc-toggle--on]=\"column.visible\"\r\n      role=\"switch\"\r\n      [attr.aria-checked]=\"column.visible\"\r\n      [attr.aria-label]=\"'Show ' + displayLabel\"\r\n      (click)=\"toggleVisible.emit()\"\r\n    >\r\n      <span class=\"tcc-toggle__thumb\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n", styles: [".tcc-toggle{position:relative;flex-shrink:0;width:var(--tcc-toggle-width, 38px);height:var(--tcc-toggle-height, 22px);padding:0;border:none;border-radius:999px;background:var(--tcc-toggle-off-bg, #cbd2d9);cursor:pointer;transition:background .18s ease}.tcc-toggle__thumb{position:absolute;top:2px;left:2px;width:calc(var(--tcc-toggle-height, 22px) - 4px);height:calc(var(--tcc-toggle-height, 22px) - 4px);border-radius:50%;background:var(--tcc-toggle-thumb, #ffffff);box-shadow:0 1px 2px #00000040;transition:left .18s ease}.tcc-toggle--on{background:var(--tcc-toggle-on-bg, #2f9e6f)}.tcc-toggle--on .tcc-toggle__thumb{left:calc(100% - (var(--tcc-toggle-height, 22px) - 2px))}.tcc-toggle:focus-visible{outline:2px solid var(--tcc-focus-ring, #2f9e6f);outline-offset:2px}.tcc-lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tcc-toggle-width, 38px);color:var(--tcc-lock-color, #9aa2ab)}:host{display:block;cursor:grab}:host.cdk-drag-dragging,:host.cdk-drag-placeholder{cursor:grabbing}.tcc-col{display:flex;align-items:center;gap:var(--tcc-col-gap, 12px);padding:var(--tcc-col-padding, 10px 14px);border-radius:var(--tcc-col-radius, 8px);background:var(--tcc-col-bg, #ffffff);border:1px solid var(--tcc-col-border, #eef0f2);transition:background .15s,border-color .15s,opacity .15s}.tcc-col:hover:not(.tcc-col--locked){background:var(--tcc-col-hover-bg, #f8fafc)}.tcc-col__grip{display:flex;align-items:center;color:var(--tcc-grip-color, #cbd2d9);flex-shrink:0}.tcc-col--hidden .tcc-col__eye,.tcc-col--hidden .tcc-col__label{opacity:.55}.tcc-col--locked{background:var(--tcc-col-locked-bg, #f6f7f8)}.tcc-col__eye{display:flex;align-items:center;color:var(--tcc-eye-color, #6b7280);flex-shrink:0}.tcc-col__eye--off{color:var(--tcc-eye-off-color, #b0b6be)}.tcc-col__label{flex:1 1 auto;min-width:0;font-size:var(--tcc-col-label-size, 14px);color:var(--tcc-col-label-color, #1f2933);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { column: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11328,15 +11644,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Table Column Configuration
  * --------------------------
  * Renders a compact list of a table config's columns, each with a **visibility**
- * toggle. Intended to be embedded inside a `cc-confirmation-modal` on a host page
- * ("Configure columns").
+ * toggle and a drag handle for **reordering**. Intended to be embedded inside a
+ * `cc-confirmation-modal` on a host page ("Configure columns").
  *
  * Pass a `TableConfig` via `[config]`. The input is deep-cloned, so it is never
- * mutated. When the user confirms, call `getUpdatedConfig()` to read back the
- * modified config (isEnabled/visible flags updated per column).
+ * mutated. Columns load pre-sorted by `sequence` (if set); columns without a
+ * `sequence` keep their original relative order. When the user confirms, call
+ * `getUpdatedConfig()` to read back the modified config (isEnabled/visible flags
+ * and `sequence` updated per column, in the new order).
  *
  * Columns carrying `lockVisibility: true` cannot be hidden — their toggle is
- * replaced by a lock icon.
+ * replaced by a lock icon. They can still be dragged to reorder.
  *
  * @example
  * ```html
@@ -11372,15 +11690,21 @@ class TableColumnConfigurationComponent {
     onToggleVisible(index) {
         this.store.toggleColumnVisible(index);
     }
+    /** Drag-and-drop reorder. Written back as `sequence` on each column by `getUpdatedConfig()`. */
+    onDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        this.store.reorderColumn(event.previousIndex, event.currentIndex);
+    }
     trackByIndex(index) {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableColumnConfigurationComponent, isStandalone: false, selector: "lib-table-column-configuration", inputs: { config: "config", translate: "translate", showLegend: "showLegend" }, providers: [TableColumnConfigurationService], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"tcc-legend\">\r\n      <span class=\"tcc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"tcc-list\">\r\n    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {\r\n      <lib-config-column-node\r\n        [column]=\"column\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(ci)\"\r\n      />\r\n    }\r\n\r\n    @if (store.columns().length === 0) {\r\n      <div class=\"tcc-empty\">\r\n        <p>No columns found in the config.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".tcc-root{display:flex;flex-direction:column;gap:var(--tcc-root-gap, 12px);font-family:var(--tcc-font-family, inherit)}.tcc-legend{display:flex;align-items:center;gap:var(--tcc-legend-gap, 24px);padding:var(--tcc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--tcc-legend-border, #eef0f2);flex-wrap:wrap}.tcc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--tcc-legend-size, 13px);color:var(--tcc-legend-color, #52606d)}.tcc-list{display:flex;flex-direction:column;gap:var(--tcc-list-gap, 10px)}.tcc-empty{padding:24px;text-align:center;color:var(--tcc-empty-color, #9aa2ab);font-size:13px}\n"], dependencies: [{ kind: "component", type: ConfigColumnNodeComponent, selector: "lib-config-column-node", inputs: ["column", "translate"], outputs: ["toggleVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TableColumnConfigurationComponent, isStandalone: false, selector: "lib-table-column-configuration", inputs: { config: "config", translate: "translate", showLegend: "showLegend" }, providers: [TableColumnConfigurationService], usesOnChanges: true, ngImport: i0, template: "<div class=\"tcc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"tcc-legend\">\r\n      <span class=\"tcc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"tcc-list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {\r\n      <lib-config-column-node\r\n        cdkDrag\r\n        [column]=\"column\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(ci)\"\r\n      />\r\n    }\r\n\r\n    @if (store.columns().length === 0) {\r\n      <div class=\"tcc-empty\">\r\n        <p>No columns found in the config.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".tcc-root{display:flex;flex-direction:column;gap:var(--tcc-root-gap, 12px);font-family:var(--tcc-font-family, inherit)}.tcc-legend{display:flex;align-items:center;gap:var(--tcc-legend-gap, 24px);padding:var(--tcc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--tcc-legend-border, #eef0f2);flex-wrap:wrap}.tcc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--tcc-legend-size, 13px);color:var(--tcc-legend-color, #52606d)}.tcc-list{display:flex;flex-direction:column;gap:var(--tcc-list-gap, 10px)}.tcc-empty{padding:24px;text-align:center;color:var(--tcc-empty-color, #9aa2ab);font-size:13px}\n"], dependencies: [{ kind: "directive", type: i1$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ConfigColumnNodeComponent, selector: "lib-config-column-node", inputs: ["column", "translate"], outputs: ["toggleVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-column-configuration', standalone: false, providers: [TableColumnConfigurationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tcc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"tcc-legend\">\r\n      <span class=\"tcc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"tcc-list\">\r\n    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {\r\n      <lib-config-column-node\r\n        [column]=\"column\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(ci)\"\r\n      />\r\n    }\r\n\r\n    @if (store.columns().length === 0) {\r\n      <div class=\"tcc-empty\">\r\n        <p>No columns found in the config.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".tcc-root{display:flex;flex-direction:column;gap:var(--tcc-root-gap, 12px);font-family:var(--tcc-font-family, inherit)}.tcc-legend{display:flex;align-items:center;gap:var(--tcc-legend-gap, 24px);padding:var(--tcc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--tcc-legend-border, #eef0f2);flex-wrap:wrap}.tcc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--tcc-legend-size, 13px);color:var(--tcc-legend-color, #52606d)}.tcc-list{display:flex;flex-direction:column;gap:var(--tcc-list-gap, 10px)}.tcc-empty{padding:24px;text-align:center;color:var(--tcc-empty-color, #9aa2ab);font-size:13px}\n"] }]
+            args: [{ selector: 'lib-table-column-configuration', standalone: false, providers: [TableColumnConfigurationService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tcc-root\">\r\n  @if (showLegend) {\r\n    <div class=\"tcc-legend\">\r\n      <span class=\"tcc-legend__item\">\r\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <path d=\"M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z\"></path>\r\n          <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n        </svg>\r\n        <span>Visible</span>\r\n      </span>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"tcc-list\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\r\n    @for (column of store.columns(); track trackByIndex($index); let ci = $index) {\r\n      <lib-config-column-node\r\n        cdkDrag\r\n        [column]=\"column\"\r\n        [translate]=\"translate\"\r\n        (toggleVisible)=\"onToggleVisible(ci)\"\r\n      />\r\n    }\r\n\r\n    @if (store.columns().length === 0) {\r\n      <div class=\"tcc-empty\">\r\n        <p>No columns found in the config.</p>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".tcc-root{display:flex;flex-direction:column;gap:var(--tcc-root-gap, 12px);font-family:var(--tcc-font-family, inherit)}.tcc-legend{display:flex;align-items:center;gap:var(--tcc-legend-gap, 24px);padding:var(--tcc-legend-padding, 4px 2px 8px);border-bottom:1px solid var(--tcc-legend-border, #eef0f2);flex-wrap:wrap}.tcc-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:var(--tcc-legend-size, 13px);color:var(--tcc-legend-color, #52606d)}.tcc-list{display:flex;flex-direction:column;gap:var(--tcc-list-gap, 10px)}.tcc-empty{padding:24px;text-align:center;color:var(--tcc-empty-color, #9aa2ab);font-size:13px}\n"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11397,8 +11721,10 @@ const COMPONENTS = [
 class TableColumnConfigurationModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, declarations: [TableColumnConfigurationComponent,
-            ConfigColumnNodeComponent], imports: [CommonModule], exports: [TableColumnConfigurationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, imports: [CommonModule] });
+            ConfigColumnNodeComponent], imports: [CommonModule,
+            DragDropModule], exports: [TableColumnConfigurationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, imports: [CommonModule,
+            DragDropModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TableColumnConfigurationModule, decorators: [{
             type: NgModule,
@@ -11406,6 +11732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     declarations: [...COMPONENTS],
                     imports: [
                         CommonModule,
+                        DragDropModule,
                     ],
                     exports: [
                         TableColumnConfigurationComponent,
@@ -12015,7 +12342,7 @@ class FilterSidebarComponent {
                 useExisting: forwardRef(() => FilterSidebarComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"cc-filter-sidebar\" [ngStyle]=\"sidebarStyles\" [class.collapsed]=\"isCollapsed\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"cc-filter-header\" *ngIf=\"config.header?.visible !== false\">\r\n        <div class=\"cc-header-content\">\r\n            <span class=\"cc-header-title\" *ngIf=\"config.header?.title\">\r\n                <span *ngIf=\"config.header?.icon\" [class]=\"config.header?.icon\" class=\"cc-header-icon material-icons\">\r\n                    <!-- {{config.header?.icon }} -->\r\n                </span>\r\n                {{ config.header?.title }}\r\n            </span>\r\n            <ng-content select=\"[header-actions]\"></ng-content>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"config.settings?.collapsible\" (click)=\"toggleCollapse()\" class=\"cc-icon-btn\"\r\n            [attr.aria-label]=\"isCollapsed ? config.labels?.expandAriaLabel : config.labels?.collapseAriaLabel\">\r\n            <span class=\"material-icons\">{{ isCollapsed ? 'menu_open' : 'menu' }}</span>\r\n        </button>\r\n        <button type=\"button\" *ngIf=\"config.header?.showClose && !isCollapsed\" (click)=\"onClose()\"\r\n            class=\"cc-icon-btn cc-close-btn\" [attr.aria-label]=\"config.labels?.closeAriaLabel\">\r\n            <span class=\"material-icons\">close</span>\r\n        </button>\r\n        <!-- Code snippet debug (optional) -->\r\n        <button type=\"button\" *ngIf=\"config.settings?.showCodeSnippet\" (click)=\"onShowCodeSnippet()\" class=\"cc-icon-btn\"\r\n            [attr.aria-label]=\"config.labels?.codeSnippetAriaLabel\">\r\n            <span class=\"material-icons\">code</span>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Content (Scrollable) -->\r\n    <div class=\"cc-filter-content\" [class.hidden]=\"isCollapsed\">\r\n        <ng-container *ngFor=\"let item of config.items; trackBy: trackByFn\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"cc-filter-footer\" *ngIf=\"config.footer?.visible !== false && !isCollapsed\">\r\n        <lib-button variant=\"outline\" color=\"warn\" class=\"cc-btn-clear\"\r\n            *ngIf=\"config.footer?.clearButton?.visible !== false\" (click)=\"clearFilters()\">\r\n            {{ config.footer?.clearButton?.label }}\r\n        </lib-button>\r\n        <lib-button variant=\"primary\" color=\"warn\" class=\"cc-btn-apply\"\r\n            *ngIf=\"config.footer?.applyButton?.visible !== false\" [disabled]=\"config.footer?.applyButton?.disabled ?? false\"\r\n            (click)=\"applyFilters()\">\r\n            {{ config.footer?.applyButton?.label }}\r\n        </lib-button>\r\n    </div>\r\n</div>\r\n\r\n<!-- Recursive Template for Items -->\r\n<ng-template #itemTemplate let-item=\"item\">\r\n    <div class=\"cc-filter-item\" [ngClass]=\"['type-' + item.type]\"\r\n        [style.display]=\"item.visible === false ? 'none' : 'block'\" [ngStyle]=\"item.styles\">\r\n\r\n        <ng-container [ngSwitch]=\"item.type\">\r\n\r\n            <!-- Input -->\r\n            <lib-input *ngSwitchCase=\"'input'\" [config]=\"item.inputConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (valueChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-input>\r\n\r\n            <!-- Dropdown -->\r\n            <lib-dropdown *ngSwitchCase=\"'dropdown'\" [config]=\"item.dropdownConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (selectionChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-dropdown>\r\n\r\n            <!-- Checkbox -->\r\n            <lib-checkbox *ngSwitchCase=\"'checkbox'\" [config]=\"item.checkboxConfig\" [label]=\"item.label\"\r\n                [checked]=\"!!filters[item.key]\" (checkedChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-checkbox>\r\n\r\n            <!-- Radio -->\r\n            <lib-radio *ngSwitchCase=\"'radio'\" [config]=\"item.radioConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (selectionChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-radio>\r\n\r\n            <!-- Toggle -->\r\n            <lib-toggle *ngSwitchCase=\"'toggle'\" [config]=\"item.toggleConfig\" [label]=\"item.label\"\r\n                [checked]=\"filters[item.key]\" (toggleChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-toggle>\r\n\r\n            <!-- Datepicker -->\r\n            <lib-datepicker *ngSwitchCase=\"'datepicker'\" [config]=\"item.datepickerConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (dateChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-datepicker>\r\n\r\n            <!-- Search -->\r\n            <lib-search *ngSwitchCase=\"'active-search'\" [config]=\"item.searchConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (search)=\"onValueChange(item.key, $event)\">\r\n            </lib-search>\r\n\r\n            <!-- Group / Accordion -->\r\n            <div *ngSwitchCase=\"'group'\" class=\"cc-accordion-item\" [class.expanded]=\"item.expanded\">\r\n                <button type=\"button\" class=\"cc-accordion-header\" (click)=\"item.expanded = !item.expanded\">\r\n                    <span class=\"cc-accordion-title\">{{ item.label }}</span>\r\n                    <span class=\"material-icons cc-accordion-icon\">{{ item.expanded ? 'expand_less' : 'expand_more'\r\n                        }}</span>\r\n                </button>\r\n\r\n                <div class=\"cc-accordion-body\" *ngIf=\"item.expanded\">\r\n                    <ng-container *ngFor=\"let child of item.children; trackBy: trackByFn\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: child }\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Custom Divider -->\r\n            <div *ngSwitchCase=\"'divider'\" class=\"cc-filter-divider\"></div>\r\n\r\n        </ng-container>\r\n    </div>\r\n</ng-template>", styles: [":host{display:block;height:100%;--cc-filter-sidebar-width: 100%;--cc-filter-sidebar-padding: 1.5rem;--cc-filter-sidebar-gap: 1.5rem;--cc-filter-sidebar-bg: #FEFEFE;--cc-filter-sidebar-border-radius: 0;--cc-filter-header-height: 3rem;--cc-filter-header-title-size: 1.125rem;--cc-filter-header-title-weight: 500;--cc-filter-header-title-color: #202124;--cc-filter-footer-padding: 1rem 0 0 0;--cc-filter-footer-gap: 1rem}.cc-filter-sidebar{display:flex;flex-direction:column;height:100%;width:var(--cc-filter-sidebar-width, 280px);background-color:var(--cc-filter-sidebar-bg, #FEFEFE);padding:var(--cc-filter-sidebar-padding, 1.5rem);box-sizing:border-box;overflow:hidden;border-radius:var(--cc-filter-sidebar-border-radius, 0);transition:width .3s ease,padding .3s ease}.cc-filter-sidebar.collapsed{width:60px!important;padding:1.5rem .5rem}.cc-filter-sidebar.collapsed .cc-filter-header{justify-content:center;margin-bottom:0}.cc-filter-sidebar.collapsed .cc-filter-header .cc-header-content,.cc-filter-sidebar.collapsed .cc-filter-header .cc-close-btn,.cc-filter-sidebar.collapsed .cc-filter-content{display:none}.cc-filter-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--cc-filter-header-height, 3rem);margin-bottom:1rem;flex-shrink:0}.cc-filter-header .cc-header-content{display:flex;align-items:center;gap:.5rem;flex:1}.cc-filter-header .cc-header-title{font-size:var(--cc-filter-header-title-size, 1.125rem);font-weight:var(--cc-filter-header-title-weight, 500);color:var(--cc-filter-header-title-color, #202124);display:flex;align-items:center;gap:.5rem}.cc-filter-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--cc-filter-sidebar-gap, 1.5rem);padding-right:.25rem}.cc-filter-content::-webkit-scrollbar{width:6px}.cc-filter-content::-webkit-scrollbar-thumb{background-color:#e0e0e0;border-radius:3px}.cc-accordion-item{border-bottom:1px solid #E0E0E0}.cc-accordion-item:last-child{border-bottom:none}.cc-accordion-item .cc-accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 0;background:none;border:none;cursor:pointer;text-align:left;outline:none}.cc-accordion-item .cc-accordion-header .cc-accordion-title{font-size:.875rem;font-weight:500;color:#202124}.cc-accordion-item .cc-accordion-header .cc-accordion-icon{color:#5f6368;transition:transform .2s}.cc-accordion-item .cc-accordion-body{padding:0 0 1rem;display:flex;flex-direction:column;gap:1rem;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.cc-group-content{display:flex;flex-direction:column;gap:1rem}.cc-filter-divider{height:1px;background-color:#e0e0e0;margin:.5rem 0}.cc-filter-footer{display:flex;gap:var(--cc-filter-footer-gap, 1rem);padding:var(--cc-filter-footer-padding, 1rem 0 0 0);margin-top:auto;flex-shrink:0}.cc-filter-footer button{flex:1}.cc-icon-btn{background:none;border:none;cursor:pointer;color:#5f6368;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.cc-icon-btn:hover{background-color:#0000000a}.cc-close-btn{margin-right:-.5rem}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "lib-input", inputs: ["config", "labels", "type", "label", "placeholder", "disabled", "required", "readonly", "clearable", "maxLength", "minLength", "min", "max", "pattern", "errorMessage", "helperText", "rows", "prefixIcon", "suffixIcon", "value", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["valueChange", "inputBlur", "inputFocus"] }, { kind: "component", type: DropdownComponent, selector: "lib-dropdown", inputs: ["config", "labels", "options", "selectedValue", "placeholder", "label", "multiple", "searchable", "clearable", "disabled", "required", "errorMessage", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["selectionChange"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["config", "labels", "label", "checked", "disabled", "required", "indeterminate", "options", "labelPosition", "color", "borderRadius", "value", "errorMessage", "width", "height", "fontSize", "fontWeight", "labelColor", "labelFontSize", "labelFontWeight", "gap", "fontFamily", "backgroundColor", "borderColor", "borderWidth", "padding", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow", "size", "checkedColor", "uncheckedColor", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight"], outputs: ["checkedChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["config", "label", "options", "disabled", "required", "labelPosition", "color", "layout", "labels", "gap", "labelColor", "checkedColor", "uncheckedColor", "fontSize", "fontWeight", "fontFamily", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight", "disabledColor", "errorColor", "size", "borderRadius", "labelFontSize", "labelFontWeight"], outputs: ["selectionChange"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["config", "labels", "label", "checked", "disabled", "required", "labelPosition", "color", "labelColor", "uncheckedColor", "checkedColor", "thumbColor", "checkedThumbColor", "fontSize", "fontWeight", "fontFamily", "toggleWidth", "toggleHeight", "gap", "sliderColor", "labelFontSize", "labelFontWeight", "disabledColor"], outputs: ["toggleChange"] }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker", inputs: ["config", "labels", "label", "placeholder", "disabled", "required", "minDate", "maxDate", "isRange", "startView", "value", "startDate", "endDate", "errorMessage", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["dateChange"] }, { kind: "component", type: SearchComponent, selector: "lib-search", inputs: ["config", "labels", "placeholder", "label", "disabled", "debounceMs", "clearable", "value", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "border", "padding", "fontWeight", "color", "textColor", "iconColor", "placeholderColor", "focusBorderColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["search", "clear"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }] });
+        ], ngImport: i0, template: "<div class=\"cc-filter-sidebar\" [ngStyle]=\"sidebarStyles\" [class.collapsed]=\"isCollapsed\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"cc-filter-header\" *ngIf=\"config.header?.visible !== false\">\r\n        <div class=\"cc-header-content\">\r\n            <span class=\"cc-header-title\" *ngIf=\"config.header?.title\">\r\n                <span *ngIf=\"config.header?.icon\" [class]=\"config.header?.icon\" class=\"cc-header-icon material-icons\">\r\n                    <!-- {{config.header?.icon }} -->\r\n                </span>\r\n                {{ config.header?.title }}\r\n            </span>\r\n            <ng-content select=\"[header-actions]\"></ng-content>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"config.settings?.collapsible\" (click)=\"toggleCollapse()\" class=\"cc-icon-btn\"\r\n            [attr.aria-label]=\"isCollapsed ? config.labels?.expandAriaLabel : config.labels?.collapseAriaLabel\">\r\n            <span class=\"material-icons\">{{ isCollapsed ? 'menu_open' : 'menu' }}</span>\r\n        </button>\r\n        <button type=\"button\" *ngIf=\"config.header?.showClose && !isCollapsed\" (click)=\"onClose()\"\r\n            class=\"cc-icon-btn cc-close-btn\" [attr.aria-label]=\"config.labels?.closeAriaLabel\">\r\n            <span class=\"material-icons\">close</span>\r\n        </button>\r\n        <!-- Code snippet debug (optional) -->\r\n        <button type=\"button\" *ngIf=\"config.settings?.showCodeSnippet\" (click)=\"onShowCodeSnippet()\" class=\"cc-icon-btn\"\r\n            [attr.aria-label]=\"config.labels?.codeSnippetAriaLabel\">\r\n            <span class=\"material-icons\">code</span>\r\n        </button>\r\n    </div>\r\n\r\n    <!-- Content (Scrollable) -->\r\n    <div class=\"cc-filter-content\" [class.hidden]=\"isCollapsed\">\r\n        <ng-container *ngFor=\"let item of config.items; trackBy: trackByFn\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"cc-filter-footer\" *ngIf=\"config.footer?.visible !== false && !isCollapsed\">\r\n        <lib-button variant=\"outline\" color=\"warn\" class=\"cc-btn-clear\"\r\n            *ngIf=\"config.footer?.clearButton?.visible !== false\" (click)=\"clearFilters()\">\r\n            {{ config.footer?.clearButton?.label }}\r\n        </lib-button>\r\n        <lib-button variant=\"primary\" color=\"warn\" class=\"cc-btn-apply\"\r\n            *ngIf=\"config.footer?.applyButton?.visible !== false\" [disabled]=\"config.footer?.applyButton?.disabled ?? false\"\r\n            (click)=\"applyFilters()\">\r\n            {{ config.footer?.applyButton?.label }}\r\n        </lib-button>\r\n    </div>\r\n</div>\r\n\r\n<!-- Recursive Template for Items -->\r\n<ng-template #itemTemplate let-item=\"item\">\r\n    <div class=\"cc-filter-item\" [ngClass]=\"['type-' + item.type]\"\r\n        [style.display]=\"item.visible === false ? 'none' : 'block'\" [ngStyle]=\"item.styles\">\r\n\r\n        <ng-container [ngSwitch]=\"item.type\">\r\n\r\n            <!-- Input -->\r\n            <lib-input *ngSwitchCase=\"'input'\" [config]=\"item.inputConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (valueChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-input>\r\n\r\n            <!-- Dropdown -->\r\n            <lib-dropdown *ngSwitchCase=\"'dropdown'\" [config]=\"item.dropdownConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (selectionChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-dropdown>\r\n\r\n            <!-- Checkbox -->\r\n            <lib-checkbox *ngSwitchCase=\"'checkbox'\" [config]=\"item.checkboxConfig\" [label]=\"item.label\"\r\n                [checked]=\"!!filters[item.key]\" (checkedChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-checkbox>\r\n\r\n            <!-- Radio -->\r\n            <lib-radio *ngSwitchCase=\"'radio'\" [config]=\"item.radioConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (selectionChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-radio>\r\n\r\n            <!-- Toggle -->\r\n            <lib-toggle *ngSwitchCase=\"'toggle'\" [config]=\"item.toggleConfig\" [label]=\"item.label\"\r\n                [checked]=\"filters[item.key]\" (toggleChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-toggle>\r\n\r\n            <!-- Datepicker -->\r\n            <lib-datepicker *ngSwitchCase=\"'datepicker'\" [config]=\"item.datepickerConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (dateChange)=\"onValueChange(item.key, $event)\">\r\n            </lib-datepicker>\r\n\r\n            <!-- Search -->\r\n            <lib-search *ngSwitchCase=\"'active-search'\" [config]=\"item.searchConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"filters[item.key]\" (search)=\"onValueChange(item.key, $event)\">\r\n            </lib-search>\r\n\r\n            <!-- Group / Accordion -->\r\n            <div *ngSwitchCase=\"'group'\" class=\"cc-accordion-item\" [class.expanded]=\"item.expanded\">\r\n                <button type=\"button\" class=\"cc-accordion-header\" (click)=\"item.expanded = !item.expanded\">\r\n                    <span class=\"cc-accordion-title\">{{ item.label }}</span>\r\n                    <span class=\"material-icons cc-accordion-icon\">{{ item.expanded ? 'expand_less' : 'expand_more'\r\n                        }}</span>\r\n                </button>\r\n\r\n                <div class=\"cc-accordion-body\" *ngIf=\"item.expanded\">\r\n                    <ng-container *ngFor=\"let child of item.children; trackBy: trackByFn\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: child }\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Custom Divider -->\r\n            <div *ngSwitchCase=\"'divider'\" class=\"cc-filter-divider\"></div>\r\n\r\n        </ng-container>\r\n    </div>\r\n</ng-template>", styles: [":host{display:block;height:100%;--cc-filter-sidebar-width: 100%;--cc-filter-sidebar-padding: 1.5rem;--cc-filter-sidebar-gap: 1.5rem;--cc-filter-sidebar-bg: #FEFEFE;--cc-filter-sidebar-border-radius: 0;--cc-filter-header-height: 3rem;--cc-filter-header-title-size: 1.125rem;--cc-filter-header-title-weight: 500;--cc-filter-header-title-color: #202124;--cc-filter-footer-padding: 1rem 0 0 0;--cc-filter-footer-gap: 1rem}.cc-filter-sidebar{display:flex;flex-direction:column;height:100%;width:var(--cc-filter-sidebar-width, 280px);background-color:var(--cc-filter-sidebar-bg, #FEFEFE);padding:var(--cc-filter-sidebar-padding, 1.5rem);box-sizing:border-box;overflow:hidden;border-radius:var(--cc-filter-sidebar-border-radius, 0);transition:width .3s ease,padding .3s ease}.cc-filter-sidebar.collapsed{width:60px!important;padding:1.5rem .5rem}.cc-filter-sidebar.collapsed .cc-filter-header{justify-content:center;margin-bottom:0}.cc-filter-sidebar.collapsed .cc-filter-header .cc-header-content,.cc-filter-sidebar.collapsed .cc-filter-header .cc-close-btn,.cc-filter-sidebar.collapsed .cc-filter-content{display:none}.cc-filter-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--cc-filter-header-height, 3rem);margin-bottom:1rem;flex-shrink:0}.cc-filter-header .cc-header-content{display:flex;align-items:center;gap:.5rem;flex:1}.cc-filter-header .cc-header-title{font-size:var(--cc-filter-header-title-size, 1.125rem);font-weight:var(--cc-filter-header-title-weight, 500);color:var(--cc-filter-header-title-color, #202124);display:flex;align-items:center;gap:.5rem}.cc-filter-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--cc-filter-sidebar-gap, 1.5rem);padding-right:.25rem}.cc-filter-content::-webkit-scrollbar{width:6px}.cc-filter-content::-webkit-scrollbar-thumb{background-color:#e0e0e0;border-radius:3px}.cc-accordion-item{border-bottom:1px solid #E0E0E0}.cc-accordion-item:last-child{border-bottom:none}.cc-accordion-item .cc-accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 0;background:none;border:none;cursor:pointer;text-align:left;outline:none}.cc-accordion-item .cc-accordion-header .cc-accordion-title{font-size:.875rem;font-weight:500;color:#202124}.cc-accordion-item .cc-accordion-header .cc-accordion-icon{color:#5f6368;transition:transform .2s}.cc-accordion-item .cc-accordion-body{padding:0 0 1rem;display:flex;flex-direction:column;gap:1rem;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.cc-group-content{display:flex;flex-direction:column;gap:1rem}.cc-filter-divider{height:1px;background-color:#e0e0e0;margin:.5rem 0}.cc-filter-footer{display:flex;gap:var(--cc-filter-footer-gap, 1rem);padding:var(--cc-filter-footer-padding, 1rem 0 0 0);margin-top:auto;flex-shrink:0}.cc-filter-footer button{flex:1}.cc-icon-btn{background:none;border:none;cursor:pointer;color:#5f6368;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.cc-icon-btn:hover{background-color:#0000000a}.cc-close-btn{margin-right:-.5rem}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "lib-input", inputs: ["config", "labels", "type", "label", "placeholder", "disabled", "required", "readonly", "clearable", "maxLength", "minLength", "min", "max", "pattern", "errorMessage", "helperText", "rows", "prefixIcon", "suffixIcon", "value", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["valueChange", "inputBlur", "inputFocus"] }, { kind: "component", type: DropdownComponent, selector: "lib-dropdown", inputs: ["config", "labels", "options", "selectedValue", "placeholder", "label", "multiple", "searchable", "clearable", "disabled", "required", "errorMessage", "serverSearch", "searchDebounceMs", "lazyLoad", "loading", "loadingMore", "hasMore", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["selectionChange", "searchTermChange", "loadMore"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["config", "labels", "label", "checked", "disabled", "required", "indeterminate", "options", "labelPosition", "color", "borderRadius", "value", "errorMessage", "width", "height", "fontSize", "fontWeight", "labelColor", "labelFontSize", "labelFontWeight", "gap", "fontFamily", "backgroundColor", "borderColor", "borderWidth", "padding", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow", "size", "checkedColor", "uncheckedColor", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight"], outputs: ["checkedChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["config", "label", "options", "disabled", "required", "labelPosition", "color", "layout", "labels", "gap", "labelColor", "checkedColor", "uncheckedColor", "fontSize", "fontWeight", "fontFamily", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight", "disabledColor", "errorColor", "size", "borderRadius", "labelFontSize", "labelFontWeight"], outputs: ["selectionChange"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["config", "labels", "label", "checked", "disabled", "required", "labelPosition", "color", "labelColor", "uncheckedColor", "checkedColor", "thumbColor", "checkedThumbColor", "fontSize", "fontWeight", "fontFamily", "toggleWidth", "toggleHeight", "gap", "sliderColor", "labelFontSize", "labelFontWeight", "disabledColor"], outputs: ["toggleChange"] }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker", inputs: ["config", "labels", "label", "placeholder", "disabled", "required", "minDate", "maxDate", "isRange", "startView", "value", "startDate", "endDate", "errorMessage", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["dateChange"] }, { kind: "component", type: SearchComponent, selector: "lib-search", inputs: ["config", "labels", "placeholder", "label", "disabled", "debounceMs", "clearable", "value", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "border", "padding", "fontWeight", "color", "textColor", "iconColor", "placeholderColor", "focusBorderColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["search", "clear"] }, { 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: FilterSidebarComponent, decorators: [{
             type: Component,
@@ -13008,7 +13335,7 @@ class FilterComponent {
         return item.key || index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FilterComponent, isStandalone: false, selector: "lib-filter", inputs: { config: "config", activeFilters: "activeFilters", columns: "columns", labels: "labels", theme: "theme" }, outputs: { filterChange: "filterChange", columnChange: "columnChange", toggle: "toggle" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"cc-filter-container\" [class.is-open]=\"isOpen\" [ngStyle]=\"containerStyles\">\r\n\r\n    <!-- Trigger Button -->\r\n    <lib-button variant=\"outline\" (click)=\"togglePanel()\" class=\"cc-filter-trigger\"\r\n        [class.active]=\"activeFilterCount > 0\">\r\n        <span class=\"fas fa-filter\"></span> {{ labels?.filterBtn || 'Filter' }}\r\n        <span *ngIf=\"activeFilterCount > 0\" class=\"cc-badge\">{{ activeFilterCount }}</span>\r\n    </lib-button>\r\n\r\n    <!-- Dropdown Panel -->\r\n    <div class=\"cc-filter-panel mat-elevation-z4\" *ngIf=\"isOpen\" (click)=\"$event.stopPropagation()\">\r\n\r\n        <!-- Header / Tabs -->\r\n        <div class=\"cc-panel-header\">\r\n            <div class=\"cc-tabs\">\r\n                <div class=\"cc-tab\" [class.active]=\"activeTab === 'filters'\" (click)=\"setActiveTab('filters')\">\r\n                    {{ labels.filterBtn }}\r\n                </div>\r\n                <!-- Hide columns tab if no columns config provided -->\r\n                <div class=\"cc-tab\" [class.active]=\"activeTab === 'columns'\" (click)=\"setActiveTab('columns')\"\r\n                    *ngIf=\"columns?.length\">\r\n                    {{ labels.columns }}\r\n                </div>\r\n            </div>\r\n            <button type=\"button\" class=\"cc-icon-btn\" (click)=\"togglePanel()\">\r\n                <span class=\"material-icons\">close</span>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Filters Tab Content -->\r\n        <div class=\"cc-panel-content\" *ngIf=\"activeTab === 'filters'\">\r\n\r\n            <!-- Dynamic Items -->\r\n            <ng-container *ngFor=\"let item of config.items; trackBy: trackByFn\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\"></ng-container>\r\n            </ng-container>\r\n\r\n        </div>\r\n\r\n        <!-- Columns Tab Content -->\r\n        <div class=\"cc-panel-content\" *ngIf=\"activeTab === 'columns'\">\r\n            <div class=\"cc-columns-actions\">\r\n                <lib-button variant=\"outline\" class=\"cc-btn-text\" (click)=\"toggleAllColumns(true)\">{{ labels.showAll\r\n                    }}</lib-button>\r\n                <lib-button variant=\"outline\" class=\"cc-btn-text\" (click)=\"toggleAllColumns(false)\">{{ labels.hideAll\r\n                    }}</lib-button>\r\n            </div>\r\n            <div class=\"cc-columns-list\">\r\n                <div *ngFor=\"let col of tempColumns\" class=\"cc-column-item\">\r\n                    <lib-checkbox [label]=\"col.label\" [checked]=\"col.visible\" (checkedChange)=\"toggleColumn(col.id)\">\r\n                    </lib-checkbox>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Footer Actions -->\r\n        <div class=\"cc-panel-footer\">\r\n            <lib-button variant=\"outline\" color=\"warn\" class=\"cc-btn-text text-danger\" (click)=\"clearAll()\">\r\n                {{ labels.clear }}\r\n            </lib-button>\r\n            <lib-button class=\"ms-2\" variant=\"primary\" (click)=\"apply()\">\r\n                {{ labels.apply }}\r\n            </lib-button>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n\r\n<!-- Recursive Template for Items -->\r\n<ng-template #itemTemplate let-item=\"item\">\r\n    <div class=\"cc-filter-item\" [ngClass]=\"['type-' + item.type]\"\r\n        [style.display]=\"item.visible === false ? 'none' : 'block'\" [ngStyle]=\"item.styles\">\r\n\r\n        <ng-container [ngSwitch]=\"item.type\">\r\n\r\n            <!-- Input -->\r\n            <lib-input *ngSwitchCase=\"'input'\" [config]=\"item.inputConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (valueChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-input>\r\n\r\n            <!-- Dropdown -->\r\n            <lib-dropdown *ngSwitchCase=\"'dropdown'\" [config]=\"item.dropdownConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (selectionChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-dropdown>\r\n\r\n            <!-- Checkbox -->\r\n            <lib-checkbox *ngSwitchCase=\"'checkbox'\" [config]=\"item.checkboxConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (checkedChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-checkbox>\r\n\r\n            <!-- Radio -->\r\n            <lib-radio *ngSwitchCase=\"'radio'\" [config]=\"item.radioConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (selectionChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-radio>\r\n\r\n            <!-- Toggle -->\r\n            <lib-toggle *ngSwitchCase=\"'toggle'\" [config]=\"item.toggleConfig\" [label]=\"item.label\"\r\n                [checked]=\"tempFilters[item.key]\" (toggleChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-toggle>\r\n\r\n            <!-- Datepicker -->\r\n            <lib-datepicker *ngSwitchCase=\"'datepicker'\" [config]=\"item.datepickerConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (dateChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-datepicker>\r\n\r\n            <!-- Search -->\r\n            <lib-search *ngSwitchCase=\"'active-search'\" [config]=\"item.searchConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (search)=\"onFilterChange(item.key, $event)\">\r\n            </lib-search>\r\n\r\n            <!-- Group / Accordion -->\r\n            <div *ngSwitchCase=\"'group'\" class=\"cc-accordion-item\" [class.expanded]=\"item.expanded\">\r\n                <button type=\"button\" class=\"cc-accordion-header\" (click)=\"item.expanded = !item.expanded\">\r\n                    <span class=\"cc-accordion-title\">{{ item.label }}</span>\r\n                    <span class=\"material-icons cc-accordion-icon\">{{ item.expanded ? 'expand_less' : 'expand_more'\r\n                        }}</span>\r\n                </button>\r\n\r\n                <div class=\"cc-accordion-body\" *ngIf=\"item.expanded\">\r\n                    <ng-container *ngFor=\"let child of item.children; trackBy: trackByFn\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: child }\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Custom Divider -->\r\n            <div *ngSwitchCase=\"'divider'\" class=\"cc-filter-divider\"></div>\r\n\r\n        </ng-container>\r\n    </div>\r\n</ng-template>", styles: [".cc-filter-container{position:relative;display:inline-block;font-family:var(--cc-filter-font-family, \"Roboto\", sans-serif)}.cc-filter-container .cc-filter-trigger ::ng-deep button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:var(--cc-filter-btn-width, 103px);height:var(--cc-filter-btn-height, 44px);padding:0 16px;background-color:var(--cc-filter-btn-bg, #FCFCFB);border:var(--cc-filter-btn-border, 1px solid #E8EAED);border-radius:var(--cc-filter-btn-radius, 8px);color:var(--cc-filter-btn-text-color, #5F6368);font-size:14px;font-weight:500;transition:all .2s ease}.cc-filter-container .cc-filter-trigger ::ng-deep button mat-icon,.cc-filter-container .cc-filter-trigger ::ng-deep button .material-icons{color:#5f6368}.cc-filter-container .cc-filter-trigger ::ng-deep button:hover{background-color:var(--cc-filter-btn-hover-bg, #f1f3f4)}.cc-filter-container .cc-filter-trigger.active ::ng-deep button{background-color:var(--cc-filter-btn-active-bg, #e3f2fd);color:var(--cc-filter-btn-active-text, #1976d2);border-color:var(--cc-filter-btn-active-text, #1976d2)}.cc-filter-container .cc-filter-trigger.active ::ng-deep button mat-icon,.cc-filter-container .cc-filter-trigger.active ::ng-deep button .material-icons{color:var(--cc-filter-btn-active-text, #1976d2)}.cc-filter-container .cc-filter-trigger .cc-badge{background-color:var(--cc-filter-btn-badge-bg, #f44336);color:var(--cc-filter-btn-badge-text, #fff);font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px;min-width:16px;text-align:center;margin-left:4px;line-height:1}.cc-filter-container .cc-filter-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:1000;width:var(--cc-filter-panel-width, 320px);min-width:var(--cc-filter-panel-min-width, 480px)!important;padding:var(--cc-filter-panel-padding, 0);background-color:var(--cc-filter-panel-bg, #fff);border:var(--cc-filter-panel-border, 1px solid #e0e0e0);box-shadow:var(--cc-filter-panel-shadow, 0 4px 12px rgba(0, 0, 0, .15));border-radius:var(--cc-filter-panel-radius, 8px);display:flex;flex-direction:column;overflow:hidden}.cc-filter-container .cc-filter-panel.hidden{display:none}.cc-filter-container .cc-filter-panel .cc-panel-header{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:var(--cc-filter-panel-header-height, 48px);border-bottom:1px solid #E0E0E0;background-color:var(--cc-filter-panel-header-bg, #fafafa)}.cc-filter-container .cc-tabs{display:flex;gap:1rem}.cc-filter-container .cc-tabs .cc-tab{cursor:pointer;padding:.5rem 0;font-weight:500;color:#5f6368;border-bottom:2px solid transparent;font-size:14px}.cc-filter-container .cc-tabs .cc-tab.active{color:var(--cc-filter-tab-active-text, #1976d2);border-bottom:var(--cc-filter-tab-border-bottom, 2px solid #1976d2)}.cc-filter-container .cc-icon-btn{background:none;border:none;cursor:pointer;color:#5f6368;padding:.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.cc-filter-container .cc-icon-btn:hover{background-color:#0000000a}.cc-filter-container .cc-panel-content{padding:16px;max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--cc-filter-panel-gap, 1rem)}.cc-filter-container .cc-filter-section{margin-bottom:16px}.cc-filter-container .cc-filter-section .cc-section-title{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--cc-filter-section-title, #333);text-transform:uppercase;letter-spacing:.5px}.cc-filter-container .cc-filter-section .cc-control-group{display:flex;flex-direction:column;gap:8px}.cc-filter-container .cc-filter-section .cc-control-group label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cc-filter-option-text, #555);cursor:pointer}.cc-filter-container .cc-filter-section .cc-control-group label:hover{color:#000}.cc-filter-container .cc-accordion-item{border-bottom:1px solid #E0E0E0}.cc-filter-container .cc-accordion-item:last-child{border-bottom:none}.cc-filter-container .cc-accordion-item .cc-accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 0;background:none;border:none;cursor:pointer;text-align:left;outline:none}.cc-filter-container .cc-accordion-item .cc-accordion-header .cc-accordion-title{font-size:.875rem;font-weight:500;color:#202124}.cc-filter-container .cc-accordion-item .cc-accordion-header .cc-accordion-icon{color:#5f6368;transition:transform .2s}.cc-filter-container .cc-accordion-item .cc-accordion-body{padding:0 0 1rem;display:flex;flex-direction:column;gap:1rem;animation:slideDown .2s ease-out}.cc-filter-container .cc-filter-divider{height:1px;background-color:#e0e0e0;margin:.5rem 0}.cc-filter-container .cc-panel-footer{padding:12px 16px;background-color:var(--cc-filter-footer-bg, #fff);border-top:var(--cc-filter-footer-border-top, 1px solid #e0e0e0);display:flex;justify-content:flex-end;align-items:center;gap:10px}.cc-filter-container .cc-columns-actions{display:flex;gap:.5rem;margin-bottom:.5rem}.cc-filter-container .cc-columns-list{display:flex;flex-direction:column;gap:.5rem}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: InputComponent, selector: "lib-input", inputs: ["config", "labels", "type", "label", "placeholder", "disabled", "required", "readonly", "clearable", "maxLength", "minLength", "min", "max", "pattern", "errorMessage", "helperText", "rows", "prefixIcon", "suffixIcon", "value", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["valueChange", "inputBlur", "inputFocus"] }, { kind: "component", type: DropdownComponent, selector: "lib-dropdown", inputs: ["config", "labels", "options", "selectedValue", "placeholder", "label", "multiple", "searchable", "clearable", "disabled", "required", "errorMessage", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["selectionChange"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["config", "labels", "label", "checked", "disabled", "required", "indeterminate", "options", "labelPosition", "color", "borderRadius", "value", "errorMessage", "width", "height", "fontSize", "fontWeight", "labelColor", "labelFontSize", "labelFontWeight", "gap", "fontFamily", "backgroundColor", "borderColor", "borderWidth", "padding", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow", "size", "checkedColor", "uncheckedColor", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight"], outputs: ["checkedChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["config", "label", "options", "disabled", "required", "labelPosition", "color", "layout", "labels", "gap", "labelColor", "checkedColor", "uncheckedColor", "fontSize", "fontWeight", "fontFamily", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight", "disabledColor", "errorColor", "size", "borderRadius", "labelFontSize", "labelFontWeight"], outputs: ["selectionChange"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["config", "labels", "label", "checked", "disabled", "required", "labelPosition", "color", "labelColor", "uncheckedColor", "checkedColor", "thumbColor", "checkedThumbColor", "fontSize", "fontWeight", "fontFamily", "toggleWidth", "toggleHeight", "gap", "sliderColor", "labelFontSize", "labelFontWeight", "disabledColor"], outputs: ["toggleChange"] }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker", inputs: ["config", "labels", "label", "placeholder", "disabled", "required", "minDate", "maxDate", "isRange", "startView", "value", "startDate", "endDate", "errorMessage", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["dateChange"] }, { kind: "component", type: SearchComponent, selector: "lib-search", inputs: ["config", "labels", "placeholder", "label", "disabled", "debounceMs", "clearable", "value", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "border", "padding", "fontWeight", "color", "textColor", "iconColor", "placeholderColor", "focusBorderColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["search", "clear"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FilterComponent, isStandalone: false, selector: "lib-filter", inputs: { config: "config", activeFilters: "activeFilters", columns: "columns", labels: "labels", theme: "theme" }, outputs: { filterChange: "filterChange", columnChange: "columnChange", toggle: "toggle" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"cc-filter-container\" [class.is-open]=\"isOpen\" [ngStyle]=\"containerStyles\">\r\n\r\n    <!-- Trigger Button -->\r\n    <lib-button variant=\"outline\" (click)=\"togglePanel()\" class=\"cc-filter-trigger\"\r\n        [class.active]=\"activeFilterCount > 0\">\r\n        <span class=\"fas fa-filter\"></span> {{ labels?.filterBtn || 'Filter' }}\r\n        <span *ngIf=\"activeFilterCount > 0\" class=\"cc-badge\">{{ activeFilterCount }}</span>\r\n    </lib-button>\r\n\r\n    <!-- Dropdown Panel -->\r\n    <div class=\"cc-filter-panel mat-elevation-z4\" *ngIf=\"isOpen\" (click)=\"$event.stopPropagation()\">\r\n\r\n        <!-- Header / Tabs -->\r\n        <div class=\"cc-panel-header\">\r\n            <div class=\"cc-tabs\">\r\n                <div class=\"cc-tab\" [class.active]=\"activeTab === 'filters'\" (click)=\"setActiveTab('filters')\">\r\n                    {{ labels.filterBtn }}\r\n                </div>\r\n                <!-- Hide columns tab if no columns config provided -->\r\n                <div class=\"cc-tab\" [class.active]=\"activeTab === 'columns'\" (click)=\"setActiveTab('columns')\"\r\n                    *ngIf=\"columns?.length\">\r\n                    {{ labels.columns }}\r\n                </div>\r\n            </div>\r\n            <button type=\"button\" class=\"cc-icon-btn\" (click)=\"togglePanel()\">\r\n                <span class=\"material-icons\">close</span>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Filters Tab Content -->\r\n        <div class=\"cc-panel-content\" *ngIf=\"activeTab === 'filters'\">\r\n\r\n            <!-- Dynamic Items -->\r\n            <ng-container *ngFor=\"let item of config.items; trackBy: trackByFn\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\"></ng-container>\r\n            </ng-container>\r\n\r\n        </div>\r\n\r\n        <!-- Columns Tab Content -->\r\n        <div class=\"cc-panel-content\" *ngIf=\"activeTab === 'columns'\">\r\n            <div class=\"cc-columns-actions\">\r\n                <lib-button variant=\"outline\" class=\"cc-btn-text\" (click)=\"toggleAllColumns(true)\">{{ labels.showAll\r\n                    }}</lib-button>\r\n                <lib-button variant=\"outline\" class=\"cc-btn-text\" (click)=\"toggleAllColumns(false)\">{{ labels.hideAll\r\n                    }}</lib-button>\r\n            </div>\r\n            <div class=\"cc-columns-list\">\r\n                <div *ngFor=\"let col of tempColumns\" class=\"cc-column-item\">\r\n                    <lib-checkbox [label]=\"col.label\" [checked]=\"col.visible\" (checkedChange)=\"toggleColumn(col.id)\">\r\n                    </lib-checkbox>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Footer Actions -->\r\n        <div class=\"cc-panel-footer\">\r\n            <lib-button variant=\"outline\" color=\"warn\" class=\"cc-btn-text text-danger\" (click)=\"clearAll()\">\r\n                {{ labels.clear }}\r\n            </lib-button>\r\n            <lib-button class=\"ms-2\" variant=\"primary\" (click)=\"apply()\">\r\n                {{ labels.apply }}\r\n            </lib-button>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n\r\n<!-- Recursive Template for Items -->\r\n<ng-template #itemTemplate let-item=\"item\">\r\n    <div class=\"cc-filter-item\" [ngClass]=\"['type-' + item.type]\"\r\n        [style.display]=\"item.visible === false ? 'none' : 'block'\" [ngStyle]=\"item.styles\">\r\n\r\n        <ng-container [ngSwitch]=\"item.type\">\r\n\r\n            <!-- Input -->\r\n            <lib-input *ngSwitchCase=\"'input'\" [config]=\"item.inputConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (valueChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-input>\r\n\r\n            <!-- Dropdown -->\r\n            <lib-dropdown *ngSwitchCase=\"'dropdown'\" [config]=\"item.dropdownConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (selectionChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-dropdown>\r\n\r\n            <!-- Checkbox -->\r\n            <lib-checkbox *ngSwitchCase=\"'checkbox'\" [config]=\"item.checkboxConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (checkedChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-checkbox>\r\n\r\n            <!-- Radio -->\r\n            <lib-radio *ngSwitchCase=\"'radio'\" [config]=\"item.radioConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (selectionChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-radio>\r\n\r\n            <!-- Toggle -->\r\n            <lib-toggle *ngSwitchCase=\"'toggle'\" [config]=\"item.toggleConfig\" [label]=\"item.label\"\r\n                [checked]=\"tempFilters[item.key]\" (toggleChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-toggle>\r\n\r\n            <!-- Datepicker -->\r\n            <lib-datepicker *ngSwitchCase=\"'datepicker'\" [config]=\"item.datepickerConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (dateChange)=\"onFilterChange(item.key, $event)\">\r\n            </lib-datepicker>\r\n\r\n            <!-- Search -->\r\n            <lib-search *ngSwitchCase=\"'active-search'\" [config]=\"item.searchConfig\" [label]=\"item.label\"\r\n                [ngModel]=\"tempFilters[item.key]\" (search)=\"onFilterChange(item.key, $event)\">\r\n            </lib-search>\r\n\r\n            <!-- Group / Accordion -->\r\n            <div *ngSwitchCase=\"'group'\" class=\"cc-accordion-item\" [class.expanded]=\"item.expanded\">\r\n                <button type=\"button\" class=\"cc-accordion-header\" (click)=\"item.expanded = !item.expanded\">\r\n                    <span class=\"cc-accordion-title\">{{ item.label }}</span>\r\n                    <span class=\"material-icons cc-accordion-icon\">{{ item.expanded ? 'expand_less' : 'expand_more'\r\n                        }}</span>\r\n                </button>\r\n\r\n                <div class=\"cc-accordion-body\" *ngIf=\"item.expanded\">\r\n                    <ng-container *ngFor=\"let child of item.children; trackBy: trackByFn\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: child }\"></ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Custom Divider -->\r\n            <div *ngSwitchCase=\"'divider'\" class=\"cc-filter-divider\"></div>\r\n\r\n        </ng-container>\r\n    </div>\r\n</ng-template>", styles: [".cc-filter-container{position:relative;display:inline-block;font-family:var(--cc-filter-font-family, \"Roboto\", sans-serif)}.cc-filter-container .cc-filter-trigger ::ng-deep button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:var(--cc-filter-btn-width, 103px);height:var(--cc-filter-btn-height, 44px);padding:0 16px;background-color:var(--cc-filter-btn-bg, #FCFCFB);border:var(--cc-filter-btn-border, 1px solid #E8EAED);border-radius:var(--cc-filter-btn-radius, 8px);color:var(--cc-filter-btn-text-color, #5F6368);font-size:14px;font-weight:500;transition:all .2s ease}.cc-filter-container .cc-filter-trigger ::ng-deep button mat-icon,.cc-filter-container .cc-filter-trigger ::ng-deep button .material-icons{color:#5f6368}.cc-filter-container .cc-filter-trigger ::ng-deep button:hover{background-color:var(--cc-filter-btn-hover-bg, #f1f3f4)}.cc-filter-container .cc-filter-trigger.active ::ng-deep button{background-color:var(--cc-filter-btn-active-bg, #e3f2fd);color:var(--cc-filter-btn-active-text, #1976d2);border-color:var(--cc-filter-btn-active-text, #1976d2)}.cc-filter-container .cc-filter-trigger.active ::ng-deep button mat-icon,.cc-filter-container .cc-filter-trigger.active ::ng-deep button .material-icons{color:var(--cc-filter-btn-active-text, #1976d2)}.cc-filter-container .cc-filter-trigger .cc-badge{background-color:var(--cc-filter-btn-badge-bg, #f44336);color:var(--cc-filter-btn-badge-text, #fff);font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px;min-width:16px;text-align:center;margin-left:4px;line-height:1}.cc-filter-container .cc-filter-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:1000;width:var(--cc-filter-panel-width, 320px);min-width:var(--cc-filter-panel-min-width, 480px)!important;padding:var(--cc-filter-panel-padding, 0);background-color:var(--cc-filter-panel-bg, #fff);border:var(--cc-filter-panel-border, 1px solid #e0e0e0);box-shadow:var(--cc-filter-panel-shadow, 0 4px 12px rgba(0, 0, 0, .15));border-radius:var(--cc-filter-panel-radius, 8px);display:flex;flex-direction:column;overflow:hidden}.cc-filter-container .cc-filter-panel.hidden{display:none}.cc-filter-container .cc-filter-panel .cc-panel-header{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:var(--cc-filter-panel-header-height, 48px);border-bottom:1px solid #E0E0E0;background-color:var(--cc-filter-panel-header-bg, #fafafa)}.cc-filter-container .cc-tabs{display:flex;gap:1rem}.cc-filter-container .cc-tabs .cc-tab{cursor:pointer;padding:.5rem 0;font-weight:500;color:#5f6368;border-bottom:2px solid transparent;font-size:14px}.cc-filter-container .cc-tabs .cc-tab.active{color:var(--cc-filter-tab-active-text, #1976d2);border-bottom:var(--cc-filter-tab-border-bottom, 2px solid #1976d2)}.cc-filter-container .cc-icon-btn{background:none;border:none;cursor:pointer;color:#5f6368;padding:.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.cc-filter-container .cc-icon-btn:hover{background-color:#0000000a}.cc-filter-container .cc-panel-content{padding:16px;max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--cc-filter-panel-gap, 1rem)}.cc-filter-container .cc-filter-section{margin-bottom:16px}.cc-filter-container .cc-filter-section .cc-section-title{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--cc-filter-section-title, #333);text-transform:uppercase;letter-spacing:.5px}.cc-filter-container .cc-filter-section .cc-control-group{display:flex;flex-direction:column;gap:8px}.cc-filter-container .cc-filter-section .cc-control-group label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cc-filter-option-text, #555);cursor:pointer}.cc-filter-container .cc-filter-section .cc-control-group label:hover{color:#000}.cc-filter-container .cc-accordion-item{border-bottom:1px solid #E0E0E0}.cc-filter-container .cc-accordion-item:last-child{border-bottom:none}.cc-filter-container .cc-accordion-item .cc-accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 0;background:none;border:none;cursor:pointer;text-align:left;outline:none}.cc-filter-container .cc-accordion-item .cc-accordion-header .cc-accordion-title{font-size:.875rem;font-weight:500;color:#202124}.cc-filter-container .cc-accordion-item .cc-accordion-header .cc-accordion-icon{color:#5f6368;transition:transform .2s}.cc-filter-container .cc-accordion-item .cc-accordion-body{padding:0 0 1rem;display:flex;flex-direction:column;gap:1rem;animation:slideDown .2s ease-out}.cc-filter-container .cc-filter-divider{height:1px;background-color:#e0e0e0;margin:.5rem 0}.cc-filter-container .cc-panel-footer{padding:12px 16px;background-color:var(--cc-filter-footer-bg, #fff);border-top:var(--cc-filter-footer-border-top, 1px solid #e0e0e0);display:flex;justify-content:flex-end;align-items:center;gap:10px}.cc-filter-container .cc-columns-actions{display:flex;gap:.5rem;margin-bottom:.5rem}.cc-filter-container .cc-columns-list{display:flex;flex-direction:column;gap:.5rem}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: InputComponent, selector: "lib-input", inputs: ["config", "labels", "type", "label", "placeholder", "disabled", "required", "readonly", "clearable", "maxLength", "minLength", "min", "max", "pattern", "errorMessage", "helperText", "rows", "prefixIcon", "suffixIcon", "value", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["valueChange", "inputBlur", "inputFocus"] }, { kind: "component", type: DropdownComponent, selector: "lib-dropdown", inputs: ["config", "labels", "options", "selectedValue", "placeholder", "label", "multiple", "searchable", "clearable", "disabled", "required", "errorMessage", "serverSearch", "searchDebounceMs", "lazyLoad", "loading", "loadingMore", "hasMore", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["selectionChange", "searchTermChange", "loadMore"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["config", "labels", "label", "checked", "disabled", "required", "indeterminate", "options", "labelPosition", "color", "borderRadius", "value", "errorMessage", "width", "height", "fontSize", "fontWeight", "labelColor", "labelFontSize", "labelFontWeight", "gap", "fontFamily", "backgroundColor", "borderColor", "borderWidth", "padding", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow", "size", "checkedColor", "uncheckedColor", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight"], outputs: ["checkedChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["config", "label", "options", "disabled", "required", "labelPosition", "color", "layout", "labels", "gap", "labelColor", "checkedColor", "uncheckedColor", "fontSize", "fontWeight", "fontFamily", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight", "disabledColor", "errorColor", "size", "borderRadius", "labelFontSize", "labelFontWeight"], outputs: ["selectionChange"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["config", "labels", "label", "checked", "disabled", "required", "labelPosition", "color", "labelColor", "uncheckedColor", "checkedColor", "thumbColor", "checkedThumbColor", "fontSize", "fontWeight", "fontFamily", "toggleWidth", "toggleHeight", "gap", "sliderColor", "labelFontSize", "labelFontWeight", "disabledColor"], outputs: ["toggleChange"] }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker", inputs: ["config", "labels", "label", "placeholder", "disabled", "required", "minDate", "maxDate", "isRange", "startView", "value", "startDate", "endDate", "errorMessage", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "padding", "fontWeight", "color", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["dateChange"] }, { kind: "component", type: SearchComponent, selector: "lib-search", inputs: ["config", "labels", "placeholder", "label", "disabled", "debounceMs", "clearable", "value", "width", "height", "borderRadius", "fontSize", "gap", "fontFamily", "labelColor", "labelFontSize", "labelFontWeight", "backgroundColor", "borderColor", "borderWidth", "border", "padding", "fontWeight", "color", "textColor", "iconColor", "placeholderColor", "focusBorderColor", "disabledBackgroundColor", "disabledColor", "boxShadow"], outputs: ["search", "clear"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -13498,6 +13825,7 @@ class SmartTableComponent {
     ngOnInit() {
         window.addEventListener('scroll', this.onScrollCapture, true);
         if (this.config) {
+            this.sortColumnsBySequence();
             this.applyPaginationDefaults();
             if (this.config.sortBy) {
                 this.activeSort.key = this.config.sortBy;
@@ -13528,8 +13856,9 @@ class SmartTableComponent {
         if (changes['totalItemsCount'] && this.totalItemsCount !== undefined) {
             this.totalItems = this.totalItemsCount;
         }
-        // Config changed (non-first) — reload filter opts; reload data only if NOT in external mode
+        // Config changed — re-apply column ordering whenever a new config object arrives
         if (changes['config'] && !changes['config'].firstChange) {
+            this.sortColumnsBySequence();
             this.applyPaginationDefaults();
             this.loadFilterOptions();
             if (this.tableData === undefined) {
@@ -14260,6 +14589,24 @@ class SmartTableComponent {
     get columnCount() {
         return this.config.columns.length;
     }
+    /**
+     * Orders `config.columns` by their `sequence` value (ascending). Columns without a
+     * `sequence` are left in their original relative order, placed after any columns that
+     * do have one — so configs that never set `sequence` are left untouched (stable sort).
+     */
+    sortColumnsBySequence() {
+        const columns = this.config?.columns;
+        if (!columns || columns.length === 0)
+            return;
+        const hasSequence = columns.some(c => c.sequence !== undefined && c.sequence !== null);
+        if (!hasSequence)
+            return;
+        this.config.columns = [...columns].sort((a, b) => {
+            const aSeq = a.sequence ?? Number.MAX_SAFE_INTEGER;
+            const bSeq = b.sequence ?? Number.MAX_SAFE_INTEGER;
+            return aSeq - bSeq;
+        });
+    }
     /**
      * Filters out actions/action-items that are either explicitly disabled via
      * `isEnabled: false` or hidden for the given row by their `visibleWhen` /