commons-shared-web-ui 0.0.73 → 0.0.75

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

@@ -1612,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;
@@ -1709,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();
@@ -1719,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) {
@@ -1795,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) {
@@ -2500,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
@@ -2513,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;
@@ -2786,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) ---
@@ -2798,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];
@@ -3169,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 {
@@ -3194,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];
@@ -3317,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;
             }
         });
@@ -5720,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)
@@ -5749,6 +5845,8 @@ class SmartFormComponent {
             nodes,
             branchSubType: 'SINGLE',
             showLoader: raw['showLoader'] ?? false,
+            searchConfig: raw['searchConfig'],
+            pagination: raw['pagination'],
         };
     }
     _fetchHierarchyTemplate(cfg) {
@@ -5824,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 };
             }
@@ -5862,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;
@@ -6475,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;
@@ -6499,6 +6616,8 @@ class DropdownComponent {
     disabledColor;
     boxShadow;
     selectionChange = new EventEmitter();
+    searchTermChange = new EventEmitter();
+    loadMore = new EventEmitter();
     viewport;
     searchInput;
     triggerEl;
@@ -6510,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']) {
@@ -6526,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;
@@ -6545,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;
@@ -6669,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;
         }
@@ -6677,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();
@@ -6792,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,
@@ -6808,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: [{
@@ -6833,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: [{
@@ -6877,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]
@@ -12185,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,
@@ -13178,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,
@@ -14749,7 +14906,8 @@ class FilterTableSelectorComponent {
     // ── Internal state ──────────────────────────────────────────────────────────
     /** A deep-copy of tableConfig with the current filter params baked-in. */
     resolvedTableConfig;
-    /** Current active filter params (merged from form submission). */
+    /** Current active filter params (merged from form submission). Array values become repeated
+     *  query-param keys (e.g. roleCodes=1&roleCodes=2), not comma-joined. */
     activeFilterParams = {};
     /** The base API URL without any filter query params. */
     baseApiUrl = '';
@@ -14882,8 +15040,8 @@ class FilterTableSelectorComponent {
         }
         else {
             const paramString = Object.entries(this.activeFilterParams)
-                .filter(([, v]) => v !== null && v !== undefined && v !== '')
-                .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+                .filter(([, v]) => v !== null && v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))
+                .flatMap(([k, v]) => (Array.isArray(v) ? v : [v]).map(val => `${encodeURIComponent(k)}=${encodeURIComponent(val)}`))
                 .join('&');
             const separator = this.baseApiUrl.includes('?') ? '&' : '?';
             newUrl = paramString
@@ -14916,9 +15074,10 @@ class FilterTableSelectorComponent {
         mapping.forEach((map) => {
             const rawVal = formValues[map.formFieldName];
             if (rawVal !== null && rawVal !== undefined && rawVal !== '') {
-                // Support arrays (multiselect) → comma-separated
-                const val = Array.isArray(rawVal) ? rawVal.join(',') : String(rawVal);
-                params[map.apiParamKey] = val;
+                // Multiselect fields become repeated query-param keys (roleCodes=1&roleCodes=2),
+                // not a single comma-joined value — matches how the search-service filter API
+                // (and most other backend filter endpoints) expect multi-value params.
+                params[map.apiParamKey] = Array.isArray(rawVal) ? rawVal.map(String) : String(rawVal);
             }
         });
         return params;