commons-shared-web-ui 0.0.76 → 0.0.77

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

@@ -1616,6 +1616,12 @@ class FormFieldComponent {
     defaultStateSnapshot = { options: [], currentPage: 0, totalCount: 0, hasMorePages: false };
     /** Tracks whether the current localOptionList is filtered by an active server-side search query */
     _isServerSearchActive = false;
+    /** True from the moment "Select All" is turned on until the user deselects a single option,
+     *  toggles it back off, or starts a new search. While active, each newly-arrived paginated
+     *  page (loadMoreDropdownOptions) is auto-merged into the selection — see loadDropdownOptions
+     *  — so the selected count keeps pace with what's been scrolled into view (e.g. 10 -> 20 -> 34)
+     *  instead of freezing at whatever was loaded the moment "Select All" was clicked. */
+    _selectAllActive = false;
     /** Dedicated cache of currently selected option objects */
     selectedItems = [];
     /** Cache of the latest dependency parameters for server-side autocomplete filtering */
@@ -2854,6 +2860,11 @@ class FormFieldComponent {
                 }
                 if (this.isDropdown) {
                     this.filteredOptionList = [...this.localOptionList];
+                    // Sticky "Select All": a newly-arrived paginated page gets auto-selected too, so
+                    // selection keeps pace with what's been scrolled/loaded into view.
+                    if (isLoadMore) {
+                        this.applySelectAllToLoadedOptions();
+                    }
                 }
             },
             error: err => console.error('Failed to load dropdown options:', err)
@@ -2951,6 +2962,11 @@ class FormFieldComponent {
     onCheckboxListChange(code, checked) {
         if (!this.config.name)
             return;
+        if (!checked) {
+            // Manually deselecting one item breaks the "everything loaded is selected" invariant —
+            // stop auto-including future paginated pages until Select All is explicitly re-toggled.
+            this._selectAllActive = false;
+        }
         const currentValue = (this.allowMulti
             ? (this.formGroup.get(this.config.name)?.value)
             : this.controller.getFieldValue(this.config.name)) || [];
@@ -3217,6 +3233,9 @@ class FormFieldComponent {
     executeDropdownSearch(query) {
         const searchConfig = this.config.optionConfig?.searchConfig;
         const mode = searchConfig?.mode || 'local';
+        // A new search (server or local) narrows to an unrelated result set — don't carry over a
+        // prior "Select All" and auto-select whatever this new query happens to load/show.
+        this._selectAllActive = false;
         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
@@ -3474,6 +3493,7 @@ class FormFieldComponent {
     toggleSelectAll(checked) {
         if (!this.config.name)
             return;
+        this._selectAllActive = checked;
         const currentValue = Array.isArray(this.value) ? [...this.value] : [];
         const filteredCodes = this.filteredOptionList.map(opt => opt.code);
         let newValue;
@@ -3488,6 +3508,18 @@ class FormFieldComponent {
         }
         this.updateValue(newValue);
     }
+    /** Merges every currently-loaded filtered option into the selection — used to keep an
+     *  already-active "Select All" in sync as more paginated pages arrive (see loadDropdownOptions). */
+    applySelectAllToLoadedOptions() {
+        if (!this.config.name || !this._selectAllActive)
+            return;
+        const currentValue = Array.isArray(this.value) ? this.value : [];
+        const filteredCodes = this.filteredOptionList.map(opt => opt.code);
+        const toAdd = filteredCodes.filter(code => !currentValue.includes(code));
+        if (toAdd.length === 0)
+            return;
+        this.updateValue([...currentValue, ...toAdd]);
+    }
     // ── Type guards ──────────────────────────────────────────────────────────
     get isTextField() { return this.config.type === 'TEXT_INPUT'; }
     get isNumberField() { return this.config.type === 'NUMBER_INPUT'; }
@@ -5816,6 +5848,7 @@ class SmartFormComponent {
                 showLoader: raw['showLoader'] ?? raw['field']?.['showLoader'] ?? false,
                 searchConfig: fi['searchConfig'],
                 pagination: fi['pagination'],
+                sortBy: da['sortBy'],
             };
         }
         // Legacy flat format (backward compatibility with existing geographyConfig JSON)
@@ -5847,6 +5880,7 @@ class SmartFormComponent {
             showLoader: raw['showLoader'] ?? false,
             searchConfig: raw['searchConfig'],
             pagination: raw['pagination'],
+            sortBy: raw['sortBy'],
         };
     }
     _fetchHierarchyTemplate(cfg) {
@@ -5921,6 +5955,16 @@ class SmartFormComponent {
                 labelPath: cfg.labelPath,
                 valuePath: cfg.valuePath,
                 showLoader: cfg.showLoader,
+                // Every GEOGRAPHY_DYNAMIC level (Country/State/District/...) generates its own
+                // optionConfig here rather than being declared in JSON, so a per-field "sortBy" in the
+                // form config can never reach it — form-field.component.ts already supports sortBy for
+                // any optionConfig, this was just never being set for hierarchy-generated fields.
+                // Sorting by the same labelPath used to render the option is a reasonable default for
+                // any geography list; override via geographyConfig.dataApi.sortBy if a specific
+                // template needs different (or no) ordering.
+                // ?? (not ||) so an explicit empty-string sortBy (opt out of sorting) isn't clobbered
+                // back to the labelPath default.
+                sortBy: cfg.sortBy ?? cfg.labelPath,
             };
             // Search/pagination are opt-in via geographyConfig.field.searchConfig/pagination — every
             // generated level (Country/State/District/…) gets the same behavior since they all hit
@@ -6618,6 +6662,11 @@ class DropdownComponent {
     selectionChange = new EventEmitter();
     searchTermChange = new EventEmitter();
     loadMore = new EventEmitter();
+    // Fires every time the panel opens — lets a serverSearch consumer know it should reset
+    // back to the unfiltered/first page, since reopening after a search otherwise keeps
+    // showing that search's narrowed result set forever (this component doesn't own `options`
+    // in serverSearch mode, so it can't refetch that on its own).
+    opened = new EventEmitter();
     viewport;
     searchInput;
     triggerEl;
@@ -6629,6 +6678,12 @@ class DropdownComponent {
     menuPosition = { top: 0, left: 0, width: 0 };
     onChange = () => { };
     onTouched = () => { };
+    // True from the moment "Select All" is turned on until the user either turns it back off
+    // or manually deselects a single option. While active, every newly lazy-loaded page is
+    // auto-merged into the selection (see ngOnChanges) so the count of selected items keeps
+    // matching what's on screen (10 -> 20 -> ... -> 34) instead of freezing at whatever was
+    // loaded at the moment "Select All" was clicked.
+    selectAllActive = false;
     search$ = new Subject();
     constructor(el) {
         this.el = el;
@@ -6652,6 +6707,11 @@ class DropdownComponent {
         }
         if (changes['config'] || changes['options']) {
             this.filteredOptions = this.serverSearch ? this.options : this.validOptions;
+            // Sticky "Select All": a newly-arrived lazy-loaded page gets auto-selected too,
+            // so selection keeps pace with what's been scrolled into view.
+            if (changes['options'] && !changes['options'].isFirstChange() && this.selectAllActive) {
+                this.applySelectAllToLoadedOptions();
+            }
         }
         if (changes['selectedValue']) {
             const incoming = changes['selectedValue'].currentValue;
@@ -6749,6 +6809,15 @@ class DropdownComponent {
         this.isOpen = !this.isOpen;
         if (this.isOpen) {
             this.focusedIndex = -1;
+            // Reset any previous search so reopening shows the full/unfiltered list again
+            // rather than whatever narrowed result was last searched for.
+            if (this.searchTerm) {
+                this.searchTerm = '';
+                if (this.searchInput)
+                    this.searchInput.nativeElement.value = '';
+                if (!this.serverSearch)
+                    this.filteredOptions = this.validOptions;
+            }
             setTimeout(() => {
                 if (this.searchable && this.searchInput) {
                     this.searchInput.nativeElement.focus();
@@ -6757,6 +6826,7 @@ class DropdownComponent {
                     this.viewport.elementRef.nativeElement.focus();
                 }
             });
+            this.opened.emit();
         }
         else {
             this.onTouched();
@@ -6784,9 +6854,28 @@ class DropdownComponent {
         if (selectable.length === 0)
             return;
         const currentValues = Array.isArray(this.value) ? this.value : [];
-        this.value = this.isAllFilteredSelected
-            ? currentValues.filter(v => !selectable.includes(v))
-            : [...currentValues, ...selectable.filter(v => !currentValues.includes(v))];
+        if (this.isAllFilteredSelected) {
+            this.selectAllActive = false;
+            this.value = currentValues.filter(v => !selectable.includes(v));
+        }
+        else {
+            this.selectAllActive = true;
+            this.value = [...currentValues, ...selectable.filter(v => !currentValues.includes(v))];
+        }
+        this.onChange(this.value);
+        this.selectionChange.emit(this.value);
+    }
+    /** Merges every currently-loaded selectable option into the selection — used to keep a
+     *  "Select All" that's already active in sync as more lazy-loaded pages arrive. */
+    applySelectAllToLoadedOptions() {
+        const selectable = this.filteredOptions.filter(o => !o.disabled).map(o => o.value);
+        if (selectable.length === 0)
+            return;
+        const currentValues = Array.isArray(this.value) ? this.value : [];
+        const merged = [...currentValues, ...selectable.filter(v => !currentValues.includes(v))];
+        if (merged.length === currentValues.length)
+            return;
+        this.value = merged;
         this.onChange(this.value);
         this.selectionChange.emit(this.value);
     }
@@ -6798,6 +6887,10 @@ class DropdownComponent {
             const index = currentValues.indexOf(option.value);
             if (index > -1) {
                 currentValues.splice(index, 1);
+                // Manually deselecting one item breaks the "everything loaded is selected"
+                // invariant — stop auto-including future lazy-loaded pages until Select All
+                // is explicitly re-toggled.
+                this.selectAllActive = false;
             }
             else {
                 currentValues.push(option.value);
@@ -6820,6 +6913,9 @@ class DropdownComponent {
     onSearch(term) {
         this.searchTerm = term;
         if (this.serverSearch) {
+            // A new server search yields an unrelated result set — don't carry over a prior
+            // "Select All" and auto-select whatever this new query happens to load.
+            this.selectAllActive = false;
             this.search$.next(term);
             this.focusedIndex = -1;
             return;
@@ -6955,7 +7051,7 @@ 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", 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: [
+    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", opened: "opened" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
@@ -7056,6 +7152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], loadMore: [{
                 type: Output
+            }], opened: [{
+                type: Output
             }], viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -8833,16 +8931,35 @@ class FormSchemaTreeService {
             }
         }
         const isVisible = field.isEnabled ?? field.visible ?? true;
+        const enabled = isVisible && field.disabled !== true;
+        // A section acts as a true parent checkbox: when it's off, none of its descendants can be
+        // "on" in the UI, no matter what the raw schema says for them individually. Backend data can
+        // disagree (e.g. a prior save wrote the section's own isEnabled=false but never cascaded that
+        // down to every leaf field's isEnabled) — that's exactly the state that made Field
+        // Configuration silently drop selected-looking fields, since the build step below prunes the
+        // whole disabled branch regardless of children. Normalizing here keeps what the checkboxes
+        // show in sync with what will actually survive into the next step.
+        const normalizedFields = enabled ? fields : fields.map(f => ({ ...f, selected: false }));
+        const normalizedSubsections = enabled ? subsections : this._disableSectionsDeep(subsections);
         return {
             label: field.sectionConfig?.label || field.label || field.name || 'Section',
             sectionConfig: field.sectionConfig ?? null,
             parentFieldConfig: field,
-            enabled: isVisible && field.disabled !== true,
+            enabled,
             expanded: false, // Collapse by default for better UX - user can expand as needed
-            fields,
-            subsections,
+            fields: normalizedFields,
+            subsections: normalizedSubsections,
         };
     }
+    /** Recursively forces enabled=false and selected=false through an already-built subtree. */
+    _disableSectionsDeep(sections) {
+        return sections.map(s => ({
+            ...s,
+            enabled: false,
+            fields: s.fields.map(f => ({ ...f, selected: false })),
+            subsections: this._disableSectionsDeep(s.subsections),
+        }));
+    }
     _createDefaultSection(fields) {
         return {
             label: 'Fields',
@@ -8880,7 +8997,8 @@ class FormSchemaTreeService {
      *  on the parent GEOGRAPHY_DYNAMIC field, so they carry a distinguishing `name` for name-keyed
      *  matching in _applyGeographyNodeSelections rather than object identity. */
     _buildGeographyFieldNodes(field) {
-        const nodes = [this._buildFieldNode(field)];
+        const masterNode = this._buildFieldNode(field);
+        const nodes = [masterNode];
         const geoNodes = field.geographyConfig?.field?.nodes ?? {};
         for (const classCode of Object.keys(geoNodes)) {
             const cfg = geoNodes[classCode] ?? {};
@@ -8889,7 +9007,19 @@ class FormSchemaTreeService {
                 label: cfg.label ?? classCode,
                 type: 'GEOGRAPHY_NODE',
             };
-            nodes.push({ fieldConfig: synthetic, selected: cfg.hidden !== true, isLocked: false });
+            nodes.push({
+                fieldConfig: synthetic,
+                // A level can't be meaningfully selected while its master field is off — the
+                // Configurator tree/actual form prune the whole GEOGRAPHY_DYNAMIC field, children
+                // included, the moment the master is disabled. Live toggling already enforces this
+                // (see FieldSelectionService._toggleFieldAtPath's nodePrefix cascade), but a schema
+                // parsed straight from persisted data (page load, not a toggle) has to enforce it here
+                // too, or a level whose own `hidden` flag was left `false` from before the master was
+                // turned off would show checked under an unchecked parent.
+                selected: masterNode.selected && cfg.hidden !== true,
+                isLocked: false,
+                isGeographyLevel: true,
+            });
         }
         return nodes;
     }
@@ -9238,7 +9368,7 @@ class FieldSelectionService {
      * Initialize the store from a FormSchema.
      */
     loadSchema(schema) {
-        const groups = this.treeService.parseSchemaToSelectionGroups(schema);
+        const groups = this._reconcileGroupsFromChildren(this.treeService.parseSchemaToSelectionGroups(schema));
         this._state.set({ groups, originalSchema: schema });
     }
     /**
@@ -9248,7 +9378,7 @@ class FieldSelectionService {
      */
     loadSchemaPreservingExpanded(schema) {
         const oldGroups = this._state().groups;
-        const newGroups = this.treeService.parseSchemaToSelectionGroups(schema);
+        const newGroups = this._reconcileGroupsFromChildren(this.treeService.parseSchemaToSelectionGroups(schema));
         // Merge old expansion states into new groups
         const mergedGroups = newGroups.map((newGroup, gi) => ({
             ...newGroup,
@@ -9257,6 +9387,28 @@ class FieldSelectionService {
         }));
         this._state.set({ groups: mergedGroups, originalSchema: schema });
     }
+    /**
+     * A freshly-parsed group/section's `enabled` comes straight from its persisted
+     * FieldConfig.isEnabled — unlike toggleField()/toggleSection(), which always follow a mutation
+     * with `_recomputeEnabledFromChildren()` to keep the section/group toggle in sync with its
+     * children's actual selected state. Without this, a schema saved with e.g. Address.isEnabled:
+     * false but its Country/State/District checkboxes individually selected (a state that toggling
+     * from within the UI can never itself produce, but stale/pre-fix persisted data can) loads with
+     * checked child boxes sitting under a section toggle that shows OFF — contradicting what the
+     * checkboxes say and, worse, matching what the Configurator tree/actual form use to prune the
+     * whole section. Runs the same reconciliation parse-time gets on every load, so the toggle
+     * always reflects reality regardless of how the persisted schema got into this state.
+     */
+    _reconcileGroupsFromChildren(groups) {
+        return groups.map(g => {
+            const sections = this._recomputeEnabledFromChildren(g.sections);
+            return {
+                ...g,
+                sections,
+                enabled: sections.length === 0 ? g.enabled : (sections.some(s => s.enabled) || g.enabled),
+            };
+        });
+    }
     /**
      * Toggle a group's enabled state. Disabling cascades to all sections + fields.
      * When enabling, all fields are selected (unless locked).
@@ -9286,9 +9438,11 @@ class FieldSelectionService {
             groups: s.groups.map((g, gi) => {
                 if (gi !== groupIndex)
                     return g;
+                const sections = this._recomputeEnabledFromChildren(this._toggleSectionAtPath(g.sections, sectionPath, 0));
                 return {
                     ...g,
-                    sections: this._toggleSectionAtPath(g.sections, sectionPath, 0),
+                    sections,
+                    enabled: sections.some(sec => sec.enabled),
                 };
             }),
         }));
@@ -9327,9 +9481,11 @@ class FieldSelectionService {
             groups: s.groups.map((g, gi) => {
                 if (gi !== groupIndex)
                     return g;
+                const sections = this._recomputeEnabledFromChildren(this._toggleFieldAtPath(g.sections, sectionPath, 0, fieldIndex));
                 return {
                     ...g,
-                    sections: this._toggleFieldAtPath(g.sections, sectionPath, 0, fieldIndex),
+                    sections,
+                    enabled: sections.some(sec => sec.enabled),
                 };
             }),
         }));
@@ -9364,6 +9520,30 @@ class FieldSelectionService {
             subsections: this._enableAllSections(s.subsections),
         }));
     }
+    /**
+     * Re-derives `enabled` bottom-up for every section in the list, from its own current
+     * fields/subsections — mirroring "Master Toggle Reflects Children" (already true for the
+     * GROUP toggle vs. its sections) at every level: a section is ON as long as at least one of
+     * its fields is selected or a subsection is ON. Without this, re-selecting a single field
+     * after its parent section was switched off left the section's own toggle stuck OFF even
+     * though a child was visibly selected again.
+     */
+    _recomputeEnabledFromChildren(sections) {
+        return sections.map(s => {
+            const subsections = this._recomputeEnabledFromChildren(s.subsections);
+            // A locked field can't be deselected by the user and is always effectively active
+            // regardless of its raw `selected` value — see _toggleSectionAtPath's enable branch,
+            // which sets `selected: !f.isLocked` (locked fields keep `selected: false` but still
+            // render, so they must still count here or their section would wrongly derive as OFF).
+            const anyFieldActive = s.fields.some(f => f.selected || f.isLocked);
+            const anySubsectionEnabled = subsections.some(sub => sub.enabled);
+            return {
+                ...s,
+                enabled: anyFieldActive || anySubsectionEnabled,
+                subsections,
+            };
+        });
+    }
     _toggleSectionAtPath(sections, path, depth) {
         return sections.map((s, i) => {
             if (i !== path[depth])
@@ -9405,11 +9585,49 @@ class FieldSelectionService {
             if (i !== sectionPath[depth])
                 return s;
             if (depth === sectionPath.length - 1) {
+                const target = s.fields[fieldIndex];
+                if (!target || target.isLocked)
+                    return s;
+                const newSelected = !target.selected;
+                const masterName = target.fieldConfig?.type === 'GEOGRAPHY_DYNAMIC'
+                    ? target.fieldConfig.name
+                    : null;
+                const nodePrefix = masterName ? `${masterName}__node__` : null;
+                // If the toggled field is itself a synthetic per-level node (name pattern
+                // `${master}__node__${classCode}`), find its master so it can be auto-selected
+                // below — a level can't be meaningfully "on" while its parent field is off.
+                // classCode itself commonly contains underscores (e.g. "GREF.REGION_COUNTRY"), so the
+                // suffix after "__node__" can't be restricted to a no-underscore character class — that
+                // previously made this match fail for every real geography level, silently breaking the
+                // master-field cascade below (Country/State/District showed checked in Field Selection
+                // but the whole Address field stayed disabled and got pruned from the Configurator tree
+                // and the actual form).
+                const ownNodeMatch = /^(.*)__node__.+$/.exec(target.fieldConfig.name ?? '');
+                const ownMasterName = ownNodeMatch ? ownNodeMatch[1] : null;
                 return {
                     ...s,
-                    fields: s.fields.map((f, fi) => fi === fieldIndex && !f.isLocked
-                        ? { ...f, selected: !f.selected }
-                        : f),
+                    fields: s.fields.map((f, fi) => {
+                        if (fi === fieldIndex) {
+                            return { ...f, selected: newSelected };
+                        }
+                        // Toggling the GEOGRAPHY_DYNAMIC master field cascades to its synthetic
+                        // per-level children so a level can never be left "selected" while the
+                        // parent field it belongs to is disabled (which the Configurator tree
+                        // treats as pruning the whole field, children included).
+                        if (nodePrefix && f.fieldConfig.name?.startsWith(nodePrefix) && !f.isLocked) {
+                            return { ...f, selected: newSelected };
+                        }
+                        // Turning a per-level node ON re-enables its (currently off) master field
+                        // for the same reason, in the opposite direction.
+                        if (ownMasterName &&
+                            newSelected &&
+                            f.fieldConfig.name === ownMasterName &&
+                            !f.selected &&
+                            !f.isLocked) {
+                            return { ...f, selected: true };
+                        }
+                        return f;
+                    }),
                 };
             }
             return {
@@ -9490,15 +9708,27 @@ class SelectionFieldNodeComponent {
      * pre-configured by the developer and shouldn't be toggled by business users.
      */
     hideToggleForOptionTypes = false;
+    /**
+     * Set when the enclosing section is off. A field can never be meaningfully "selected" while
+     * its parent section is disabled — the Field Configuration step prunes the whole disabled
+     * branch regardless of individual field state — so the checkbox is locked out here to make
+     * that constraint visible instead of letting the user set a checked state that won't survive.
+     */
+    disabled = false;
+    onCheckedChange() {
+        if (this.disabled)
+            return;
+        this.toggleSelected.emit();
+    }
     get isOptionDrivenType() {
         return OPTION_DRIVEN_FIELD_TYPES.has((this.field?.fieldConfig?.type ?? '').toUpperCase());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectionFieldNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectionFieldNodeComponent, isStandalone: false, selector: "lib-selection-field-node", inputs: { field: "field", hideToggleForOptionTypes: "hideToggleForOptionTypes" }, outputs: { toggleSelected: "toggleSelected" }, ngImport: i0, template: "<div\r\n  class=\"fb-selection-field\"\r\n  [class.fb-selection-field--selected]=\"field.selected\"\r\n  [class.fb-selection-field--locked]=\"field.isLocked\"\r\n  [class.fb-selection-field--option-type]=\"hideToggleForOptionTypes && isOptionDrivenType\"\r\n>\r\n  <span class=\"fb-selection-field__label\">\r\n    {{ field.fieldConfig.label || field.fieldConfig.name }}\r\n  </span>\r\n\r\n  @if (field.isLocked) {\r\n    <span class=\"fb-selection-field__lock\" title=\"This field is locked\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else if (hideToggleForOptionTypes && isOptionDrivenType) {\r\n    <!-- Option-driven type: toggle hidden by config, show a badge instead -->\r\n    <span class=\"fb-selection-field__option-badge\" title=\"Options are pre-configured\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n        <polyline points=\"12 8 12 12 14 14\"></polyline>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <lib-checkbox\r\n      [checked]=\"field.selected\"\r\n      [disabled]=\"false\"\r\n      (checkedChange)=\"toggleSelected.emit()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".fb-selection-field{display:flex;align-items:center;justify-content:space-between;padding:var(--fb-fs-field-padding, 8px 12px);margin-bottom:var(--fb-fs-field-gap, 2px);border-radius:var(--fb-fs-field-radius, 6px);background:var(--fb-fs-field-bg, #ffffff);border:1px solid var(--fb-fs-field-border, #e5e7eb);transition:all .15s}.fb-selection-field:hover:not(.fb-selection-field--locked):not(.fb-selection-field--option-type){border-color:var(--fb-fs-field-hover-border, #3b82f6);background:var(--fb-fs-field-hover-bg, #f8fafc)}.fb-selection-field--selected{background:var(--fb-fs-field-selected-bg, #eff6ff);border-color:var(--fb-fs-field-selected-border, #bfdbfe)}.fb-selection-field--locked{background:var(--fb-fs-field-locked-bg, #f3f4f6);cursor:not-allowed}.fb-selection-field--locked .fb-selection-field__label{color:var(--fb-fs-field-locked-color, #6b7280);font-weight:500}.fb-selection-field--option-type{background:var(--fb-fs-field-option-type-bg, #f9fafb);border-color:var(--fb-fs-field-option-type-border, #e5e7eb);cursor:default}.fb-selection-field--option-type .fb-selection-field__label{color:var(--fb-fs-field-option-type-color, #374151)}.fb-selection-field__label{font-size:var(--fb-fs-field-label-size, 13px);color:var(--fb-fs-field-label-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-field__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-field__option-badge{display:flex;align-items:center;color:var(--fb-fs-option-badge-color, #9ca3af);padding:2px;flex-shrink:0}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectionFieldNodeComponent, isStandalone: false, selector: "lib-selection-field-node", inputs: { field: "field", hideToggleForOptionTypes: "hideToggleForOptionTypes", disabled: "disabled" }, outputs: { toggleSelected: "toggleSelected" }, ngImport: i0, template: "<div\r\n  class=\"fb-selection-field\"\r\n  [class.fb-selection-field--selected]=\"field.selected\"\r\n  [class.fb-selection-field--locked]=\"field.isLocked\"\r\n  [class.fb-selection-field--option-type]=\"hideToggleForOptionTypes && isOptionDrivenType\"\r\n  [class.fb-selection-field--parent-disabled]=\"disabled\"\r\n>\r\n  <span class=\"fb-selection-field__label\">\r\n    {{ field.fieldConfig.label || field.fieldConfig.name }}\r\n  </span>\r\n\r\n  @if (field.isLocked) {\r\n    <span class=\"fb-selection-field__lock\" title=\"This field is locked\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else if (hideToggleForOptionTypes && isOptionDrivenType) {\r\n    <!-- Option-driven type: toggle hidden by config, show a badge instead -->\r\n    <span class=\"fb-selection-field__option-badge\" title=\"Options are pre-configured\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n        <polyline points=\"12 8 12 12 14 14\"></polyline>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <lib-checkbox\r\n      [checked]=\"field.selected\"\r\n      [disabled]=\"disabled\"\r\n      (checkedChange)=\"onCheckedChange()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".fb-selection-field{display:flex;align-items:center;justify-content:space-between;padding:var(--fb-fs-field-padding, 8px 12px);margin-bottom:var(--fb-fs-field-gap, 2px);border-radius:var(--fb-fs-field-radius, 6px);background:var(--fb-fs-field-bg, #ffffff);border:1px solid var(--fb-fs-field-border, #e5e7eb);transition:all .15s}.fb-selection-field:hover:not(.fb-selection-field--locked):not(.fb-selection-field--option-type){border-color:var(--fb-fs-field-hover-border, #3b82f6);background:var(--fb-fs-field-hover-bg, #f8fafc)}.fb-selection-field--selected{background:var(--fb-fs-field-selected-bg, #eff6ff);border-color:var(--fb-fs-field-selected-border, #bfdbfe)}.fb-selection-field--locked{background:var(--fb-fs-field-locked-bg, #f3f4f6);cursor:not-allowed}.fb-selection-field--locked .fb-selection-field__label{color:var(--fb-fs-field-locked-color, #6b7280);font-weight:500}.fb-selection-field--parent-disabled{opacity:.55;cursor:not-allowed}.fb-selection-field--option-type{background:var(--fb-fs-field-option-type-bg, #f9fafb);border-color:var(--fb-fs-field-option-type-border, #e5e7eb);cursor:default}.fb-selection-field--option-type .fb-selection-field__label{color:var(--fb-fs-field-option-type-color, #374151)}.fb-selection-field__label{font-size:var(--fb-fs-field-label-size, 13px);color:var(--fb-fs-field-label-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-field__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-field__option-badge{display:flex;align-items:center;color:var(--fb-fs-option-badge-color, #9ca3af);padding:2px;flex-shrink:0}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectionFieldNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-selection-field-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fb-selection-field\"\r\n  [class.fb-selection-field--selected]=\"field.selected\"\r\n  [class.fb-selection-field--locked]=\"field.isLocked\"\r\n  [class.fb-selection-field--option-type]=\"hideToggleForOptionTypes && isOptionDrivenType\"\r\n>\r\n  <span class=\"fb-selection-field__label\">\r\n    {{ field.fieldConfig.label || field.fieldConfig.name }}\r\n  </span>\r\n\r\n  @if (field.isLocked) {\r\n    <span class=\"fb-selection-field__lock\" title=\"This field is locked\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else if (hideToggleForOptionTypes && isOptionDrivenType) {\r\n    <!-- Option-driven type: toggle hidden by config, show a badge instead -->\r\n    <span class=\"fb-selection-field__option-badge\" title=\"Options are pre-configured\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n        <polyline points=\"12 8 12 12 14 14\"></polyline>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <lib-checkbox\r\n      [checked]=\"field.selected\"\r\n      [disabled]=\"false\"\r\n      (checkedChange)=\"toggleSelected.emit()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".fb-selection-field{display:flex;align-items:center;justify-content:space-between;padding:var(--fb-fs-field-padding, 8px 12px);margin-bottom:var(--fb-fs-field-gap, 2px);border-radius:var(--fb-fs-field-radius, 6px);background:var(--fb-fs-field-bg, #ffffff);border:1px solid var(--fb-fs-field-border, #e5e7eb);transition:all .15s}.fb-selection-field:hover:not(.fb-selection-field--locked):not(.fb-selection-field--option-type){border-color:var(--fb-fs-field-hover-border, #3b82f6);background:var(--fb-fs-field-hover-bg, #f8fafc)}.fb-selection-field--selected{background:var(--fb-fs-field-selected-bg, #eff6ff);border-color:var(--fb-fs-field-selected-border, #bfdbfe)}.fb-selection-field--locked{background:var(--fb-fs-field-locked-bg, #f3f4f6);cursor:not-allowed}.fb-selection-field--locked .fb-selection-field__label{color:var(--fb-fs-field-locked-color, #6b7280);font-weight:500}.fb-selection-field--option-type{background:var(--fb-fs-field-option-type-bg, #f9fafb);border-color:var(--fb-fs-field-option-type-border, #e5e7eb);cursor:default}.fb-selection-field--option-type .fb-selection-field__label{color:var(--fb-fs-field-option-type-color, #374151)}.fb-selection-field__label{font-size:var(--fb-fs-field-label-size, 13px);color:var(--fb-fs-field-label-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-field__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-field__option-badge{display:flex;align-items:center;color:var(--fb-fs-option-badge-color, #9ca3af);padding:2px;flex-shrink:0}\n"] }]
+            args: [{ selector: 'lib-selection-field-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fb-selection-field\"\r\n  [class.fb-selection-field--selected]=\"field.selected\"\r\n  [class.fb-selection-field--locked]=\"field.isLocked\"\r\n  [class.fb-selection-field--option-type]=\"hideToggleForOptionTypes && isOptionDrivenType\"\r\n  [class.fb-selection-field--parent-disabled]=\"disabled\"\r\n>\r\n  <span class=\"fb-selection-field__label\">\r\n    {{ field.fieldConfig.label || field.fieldConfig.name }}\r\n  </span>\r\n\r\n  @if (field.isLocked) {\r\n    <span class=\"fb-selection-field__lock\" title=\"This field is locked\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else if (hideToggleForOptionTypes && isOptionDrivenType) {\r\n    <!-- Option-driven type: toggle hidden by config, show a badge instead -->\r\n    <span class=\"fb-selection-field__option-badge\" title=\"Options are pre-configured\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n        <polyline points=\"12 8 12 12 14 14\"></polyline>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <lib-checkbox\r\n      [checked]=\"field.selected\"\r\n      [disabled]=\"disabled\"\r\n      (checkedChange)=\"onCheckedChange()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".fb-selection-field{display:flex;align-items:center;justify-content:space-between;padding:var(--fb-fs-field-padding, 8px 12px);margin-bottom:var(--fb-fs-field-gap, 2px);border-radius:var(--fb-fs-field-radius, 6px);background:var(--fb-fs-field-bg, #ffffff);border:1px solid var(--fb-fs-field-border, #e5e7eb);transition:all .15s}.fb-selection-field:hover:not(.fb-selection-field--locked):not(.fb-selection-field--option-type){border-color:var(--fb-fs-field-hover-border, #3b82f6);background:var(--fb-fs-field-hover-bg, #f8fafc)}.fb-selection-field--selected{background:var(--fb-fs-field-selected-bg, #eff6ff);border-color:var(--fb-fs-field-selected-border, #bfdbfe)}.fb-selection-field--locked{background:var(--fb-fs-field-locked-bg, #f3f4f6);cursor:not-allowed}.fb-selection-field--locked .fb-selection-field__label{color:var(--fb-fs-field-locked-color, #6b7280);font-weight:500}.fb-selection-field--parent-disabled{opacity:.55;cursor:not-allowed}.fb-selection-field--option-type{background:var(--fb-fs-field-option-type-bg, #f9fafb);border-color:var(--fb-fs-field-option-type-border, #e5e7eb);cursor:default}.fb-selection-field--option-type .fb-selection-field__label{color:var(--fb-fs-field-option-type-color, #374151)}.fb-selection-field__label{font-size:var(--fb-fs-field-label-size, 13px);color:var(--fb-fs-field-label-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-field__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-field__option-badge{display:flex;align-items:center;color:var(--fb-fs-option-badge-color, #9ca3af);padding:2px;flex-shrink:0}\n"] }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
@@ -9506,6 +9736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], hideToggleForOptionTypes: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 class SelectionSectionNodeComponent {
@@ -9548,15 +9780,38 @@ class SelectionSectionNodeComponent {
     trackByFieldIndex(index) {
         return index;
     }
+    /**
+     * A GEOGRAPHY_DYNAMIC field's per-level nodes (Country/State/District/...) are built as flat
+     * entries immediately following their master in `section.fields` (see
+     * FormSchemaTreeService._buildGeographyFieldNodes) — there's no real nested schema structure
+     * to walk, so "master" here just means the nearest preceding non-level field.
+     */
+    masterFieldFor(index) {
+        for (let i = index - 1; i >= 0; i--) {
+            const candidate = this.section.fields[i];
+            if (!candidate.isGeographyLevel)
+                return candidate;
+        }
+        return null;
+    }
+    /** True for a geography level whose master field is currently unselected — locked out so the
+     *  user can't leave an individually-checked level under an unchecked (and therefore pruned)
+     *  master; see masterFieldFor(). */
+    isFieldDisabled(field, index) {
+        if (!field.isGeographyLevel)
+            return false;
+        const master = this.masterFieldFor(index);
+        return !!master && !master.selected;
+    }
     trackBySubsectionIndex(index) {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectionSectionNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectionSectionNodeComponent, isStandalone: false, selector: "lib-selection-section-node", inputs: { section: "section", sectionIndex: "sectionIndex", depth: "depth", hideToggleForOptionTypes: "hideToggleForOptionTypes" }, outputs: { toggleEnabled: "toggleEnabled", toggleExpanded: "toggleExpanded", fieldToggle: "fieldToggle" }, ngImport: i0, template: "<div\r\n  class=\"fb-selection-section\"\r\n  [class.fb-selection-section--disabled]=\"!section.enabled\"\r\n  [class.fb-selection-section--nested]=\"depth > 0\"\r\n>\r\n  <div class=\"fb-selection-section__header\">\r\n    <button\r\n      class=\"fb-selection-section__expand-btn\"\r\n      (click)=\"onToggleExpanded()\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-selection-section__chevron\"\r\n        [class.fb-selection-section__chevron--open]=\"section.expanded\"\r\n        width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-selection-section__meta\">\r\n      <span class=\"fb-selection-section__label\">{{ section.label }}</span>\r\n    </div>\r\n\r\n    @if (isLocked) {\r\n      <span class=\"fb-selection-section__lock\" title=\"This section is locked\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n          <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n        </svg>\r\n      </span>\r\n    } @else {\r\n      <lib-toggle\r\n        [checked]=\"section.enabled\"\r\n        [disabled]=\"false\"\r\n        [attr.aria-label]=\"'Enable ' + section.label\"\r\n        (toggleChange)=\"onToggleEnabled()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"fb-selection-section__body\">\r\n      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {\r\n        <lib-selection-field-node\r\n          [field]=\"field\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleSelected)=\"onFieldToggle(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"sub\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"depth + 1\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleEnabled)=\"onSubsectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSubsectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onSubsectionFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-selection-section{border:1px solid var(--fb-fs-section-border, #e5e7eb);border-radius:var(--fb-fs-section-radius, 10px);background:var(--fb-fs-section-bg, #ffffff);overflow:hidden}@media(max-width:640px){.fb-selection-section{border-radius:6px}}.fb-selection-section--disabled .fb-selection-section__label{opacity:.55}.fb-selection-section--nested{border-color:var(--fb-fs-section-nested-border, #f3f4f6);background:var(--fb-fs-section-nested-bg, #fafafa)}.fb-selection-section__header{display:flex;align-items:center;gap:8px;padding:var(--fb-fs-section-header-padding, 10px 14px);cursor:pointer;-webkit-user-select:none;user-select:none}@media(max-width:640px){.fb-selection-section__header{padding:8px 10px;gap:6px}}.fb-selection-section__header:hover{background:var(--fb-fs-section-header-hover, #f9fafb)}.fb-selection-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}@media(max-width:640px){.fb-selection-section__expand-btn{padding:0}}.fb-selection-section__chevron{transition:transform .2s}.fb-selection-section__chevron--open{transform:rotate(180deg)}.fb-selection-section__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}@media(max-width:640px){.fb-selection-section__meta{gap:6px}}.fb-selection-section__label{font-size:var(--fb-fs-section-label-size, 13px);font-weight:600;color:var(--fb-fs-section-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:640px){.fb-selection-section__label{font-size:12px}}.fb-selection-section__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-section__body{padding:var(--fb-fs-section-body-padding, 4px 14px 14px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-field-gap, 6px)}@media(max-width:768px){.fb-selection-section__body{padding:4px 12px 12px 24px;gap:5px}}@media(max-width:640px){.fb-selection-section__body{padding:4px 10px 10px 20px;gap:4px}}\n"], dependencies: [{ 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: SelectionSectionNodeComponent, selector: "lib-selection-section-node", inputs: ["section", "sectionIndex", "depth", "hideToggleForOptionTypes"], outputs: ["toggleEnabled", "toggleExpanded", "fieldToggle"] }, { kind: "component", type: SelectionFieldNodeComponent, selector: "lib-selection-field-node", inputs: ["field", "hideToggleForOptionTypes"], outputs: ["toggleSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectionSectionNodeComponent, isStandalone: false, selector: "lib-selection-section-node", inputs: { section: "section", sectionIndex: "sectionIndex", depth: "depth", hideToggleForOptionTypes: "hideToggleForOptionTypes" }, outputs: { toggleEnabled: "toggleEnabled", toggleExpanded: "toggleExpanded", fieldToggle: "fieldToggle" }, ngImport: i0, template: "<div\r\n  class=\"fb-selection-section\"\r\n  [class.fb-selection-section--disabled]=\"!section.enabled\"\r\n  [class.fb-selection-section--nested]=\"depth > 0\"\r\n>\r\n  <div class=\"fb-selection-section__header\">\r\n    <button\r\n      class=\"fb-selection-section__expand-btn\"\r\n      (click)=\"onToggleExpanded()\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-selection-section__chevron\"\r\n        [class.fb-selection-section__chevron--open]=\"section.expanded\"\r\n        width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-selection-section__meta\">\r\n      <span class=\"fb-selection-section__label\">{{ section.label }}</span>\r\n    </div>\r\n\r\n    @if (isLocked) {\r\n      <span class=\"fb-selection-section__lock\" title=\"This section is locked\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n          <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n        </svg>\r\n      </span>\r\n    } @else {\r\n      <lib-toggle\r\n        [checked]=\"section.enabled\"\r\n        [disabled]=\"false\"\r\n        [attr.aria-label]=\"'Enable ' + section.label\"\r\n        (toggleChange)=\"onToggleEnabled()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"fb-selection-section__body\">\r\n      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {\r\n        <lib-selection-field-node\r\n          [field]=\"field\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          [disabled]=\"isFieldDisabled(field, fi)\"\r\n          [class.fb-selection-section__field--geo-level]=\"field.isGeographyLevel\"\r\n          (toggleSelected)=\"onFieldToggle(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"sub\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"depth + 1\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleEnabled)=\"onSubsectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSubsectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onSubsectionFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-selection-section{border:1px solid var(--fb-fs-section-border, #e5e7eb);border-radius:var(--fb-fs-section-radius, 10px);background:var(--fb-fs-section-bg, #ffffff);overflow:hidden}@media(max-width:640px){.fb-selection-section{border-radius:6px}}.fb-selection-section--disabled .fb-selection-section__label{opacity:.55}.fb-selection-section--nested{border-color:var(--fb-fs-section-nested-border, #f3f4f6);background:var(--fb-fs-section-nested-bg, #fafafa)}.fb-selection-section__header{display:flex;align-items:center;gap:8px;padding:var(--fb-fs-section-header-padding, 10px 14px);cursor:pointer;-webkit-user-select:none;user-select:none}@media(max-width:640px){.fb-selection-section__header{padding:8px 10px;gap:6px}}.fb-selection-section__header:hover{background:var(--fb-fs-section-header-hover, #f9fafb)}.fb-selection-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}@media(max-width:640px){.fb-selection-section__expand-btn{padding:0}}.fb-selection-section__chevron{transition:transform .2s}.fb-selection-section__chevron--open{transform:rotate(180deg)}.fb-selection-section__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}@media(max-width:640px){.fb-selection-section__meta{gap:6px}}.fb-selection-section__label{font-size:var(--fb-fs-section-label-size, 13px);font-weight:600;color:var(--fb-fs-section-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:640px){.fb-selection-section__label{font-size:12px}}.fb-selection-section__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-section__body{padding:var(--fb-fs-section-body-padding, 4px 14px 14px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-field-gap, 6px)}@media(max-width:768px){.fb-selection-section__body{padding:4px 12px 12px 24px;gap:5px}}@media(max-width:640px){.fb-selection-section__body{padding:4px 10px 10px 20px;gap:4px}}.fb-selection-section__body ::ng-deep .fb-selection-section__field--geo-level{margin-left:var(--fb-fs-geo-level-indent, 20px);position:relative}.fb-selection-section__body ::ng-deep .fb-selection-section__field--geo-level:before{content:\"\";position:absolute;left:-12px;top:50%;width:8px;height:1px;background:var(--fb-fs-section-nested-border, #d1d5db)}\n"], dependencies: [{ 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: SelectionSectionNodeComponent, selector: "lib-selection-section-node", inputs: ["section", "sectionIndex", "depth", "hideToggleForOptionTypes"], outputs: ["toggleEnabled", "toggleExpanded", "fieldToggle"] }, { kind: "component", type: SelectionFieldNodeComponent, selector: "lib-selection-field-node", inputs: ["field", "hideToggleForOptionTypes", "disabled"], outputs: ["toggleSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectionSectionNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-selection-section-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fb-selection-section\"\r\n  [class.fb-selection-section--disabled]=\"!section.enabled\"\r\n  [class.fb-selection-section--nested]=\"depth > 0\"\r\n>\r\n  <div class=\"fb-selection-section__header\">\r\n    <button\r\n      class=\"fb-selection-section__expand-btn\"\r\n      (click)=\"onToggleExpanded()\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-selection-section__chevron\"\r\n        [class.fb-selection-section__chevron--open]=\"section.expanded\"\r\n        width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-selection-section__meta\">\r\n      <span class=\"fb-selection-section__label\">{{ section.label }}</span>\r\n    </div>\r\n\r\n    @if (isLocked) {\r\n      <span class=\"fb-selection-section__lock\" title=\"This section is locked\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n          <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n        </svg>\r\n      </span>\r\n    } @else {\r\n      <lib-toggle\r\n        [checked]=\"section.enabled\"\r\n        [disabled]=\"false\"\r\n        [attr.aria-label]=\"'Enable ' + section.label\"\r\n        (toggleChange)=\"onToggleEnabled()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"fb-selection-section__body\">\r\n      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {\r\n        <lib-selection-field-node\r\n          [field]=\"field\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleSelected)=\"onFieldToggle(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"sub\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"depth + 1\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleEnabled)=\"onSubsectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSubsectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onSubsectionFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-selection-section{border:1px solid var(--fb-fs-section-border, #e5e7eb);border-radius:var(--fb-fs-section-radius, 10px);background:var(--fb-fs-section-bg, #ffffff);overflow:hidden}@media(max-width:640px){.fb-selection-section{border-radius:6px}}.fb-selection-section--disabled .fb-selection-section__label{opacity:.55}.fb-selection-section--nested{border-color:var(--fb-fs-section-nested-border, #f3f4f6);background:var(--fb-fs-section-nested-bg, #fafafa)}.fb-selection-section__header{display:flex;align-items:center;gap:8px;padding:var(--fb-fs-section-header-padding, 10px 14px);cursor:pointer;-webkit-user-select:none;user-select:none}@media(max-width:640px){.fb-selection-section__header{padding:8px 10px;gap:6px}}.fb-selection-section__header:hover{background:var(--fb-fs-section-header-hover, #f9fafb)}.fb-selection-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}@media(max-width:640px){.fb-selection-section__expand-btn{padding:0}}.fb-selection-section__chevron{transition:transform .2s}.fb-selection-section__chevron--open{transform:rotate(180deg)}.fb-selection-section__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}@media(max-width:640px){.fb-selection-section__meta{gap:6px}}.fb-selection-section__label{font-size:var(--fb-fs-section-label-size, 13px);font-weight:600;color:var(--fb-fs-section-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:640px){.fb-selection-section__label{font-size:12px}}.fb-selection-section__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-section__body{padding:var(--fb-fs-section-body-padding, 4px 14px 14px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-field-gap, 6px)}@media(max-width:768px){.fb-selection-section__body{padding:4px 12px 12px 24px;gap:5px}}@media(max-width:640px){.fb-selection-section__body{padding:4px 10px 10px 20px;gap:4px}}\n"] }]
+            args: [{ selector: 'lib-selection-section-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fb-selection-section\"\r\n  [class.fb-selection-section--disabled]=\"!section.enabled\"\r\n  [class.fb-selection-section--nested]=\"depth > 0\"\r\n>\r\n  <div class=\"fb-selection-section__header\">\r\n    <button\r\n      class=\"fb-selection-section__expand-btn\"\r\n      (click)=\"onToggleExpanded()\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-selection-section__chevron\"\r\n        [class.fb-selection-section__chevron--open]=\"section.expanded\"\r\n        width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-selection-section__meta\">\r\n      <span class=\"fb-selection-section__label\">{{ section.label }}</span>\r\n    </div>\r\n\r\n    @if (isLocked) {\r\n      <span class=\"fb-selection-section__lock\" title=\"This section is locked\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n          <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n        </svg>\r\n      </span>\r\n    } @else {\r\n      <lib-toggle\r\n        [checked]=\"section.enabled\"\r\n        [disabled]=\"false\"\r\n        [attr.aria-label]=\"'Enable ' + section.label\"\r\n        (toggleChange)=\"onToggleEnabled()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded) {\r\n    <div class=\"fb-selection-section__body\">\r\n      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {\r\n        <lib-selection-field-node\r\n          [field]=\"field\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          [disabled]=\"isFieldDisabled(field, fi)\"\r\n          [class.fb-selection-section__field--geo-level]=\"field.isGeographyLevel\"\r\n          (toggleSelected)=\"onFieldToggle(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"sub\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"depth + 1\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleEnabled)=\"onSubsectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSubsectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onSubsectionFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-selection-section{border:1px solid var(--fb-fs-section-border, #e5e7eb);border-radius:var(--fb-fs-section-radius, 10px);background:var(--fb-fs-section-bg, #ffffff);overflow:hidden}@media(max-width:640px){.fb-selection-section{border-radius:6px}}.fb-selection-section--disabled .fb-selection-section__label{opacity:.55}.fb-selection-section--nested{border-color:var(--fb-fs-section-nested-border, #f3f4f6);background:var(--fb-fs-section-nested-bg, #fafafa)}.fb-selection-section__header{display:flex;align-items:center;gap:8px;padding:var(--fb-fs-section-header-padding, 10px 14px);cursor:pointer;-webkit-user-select:none;user-select:none}@media(max-width:640px){.fb-selection-section__header{padding:8px 10px;gap:6px}}.fb-selection-section__header:hover{background:var(--fb-fs-section-header-hover, #f9fafb)}.fb-selection-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}@media(max-width:640px){.fb-selection-section__expand-btn{padding:0}}.fb-selection-section__chevron{transition:transform .2s}.fb-selection-section__chevron--open{transform:rotate(180deg)}.fb-selection-section__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}@media(max-width:640px){.fb-selection-section__meta{gap:6px}}.fb-selection-section__label{font-size:var(--fb-fs-section-label-size, 13px);font-weight:600;color:var(--fb-fs-section-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:640px){.fb-selection-section__label{font-size:12px}}.fb-selection-section__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-section__body{padding:var(--fb-fs-section-body-padding, 4px 14px 14px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-field-gap, 6px)}@media(max-width:768px){.fb-selection-section__body{padding:4px 12px 12px 24px;gap:5px}}@media(max-width:640px){.fb-selection-section__body{padding:4px 10px 10px 20px;gap:4px}}.fb-selection-section__body ::ng-deep .fb-selection-section__field--geo-level{margin-left:var(--fb-fs-geo-level-indent, 20px);position:relative}.fb-selection-section__body ::ng-deep .fb-selection-section__field--geo-level:before{content:\"\";position:absolute;left:-12px;top:50%;width:8px;height:1px;background:var(--fb-fs-section-nested-border, #d1d5db)}\n"] }]
         }], propDecorators: { section: [{
                 type: Input,
                 args: [{ required: true }]
@@ -12364,7 +12619,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", "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"] }] });
+        ], 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", "opened"] }, { 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,
@@ -13357,7 +13612,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", "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"] }] });
+    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", "opened"] }, { 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,