commons-shared-web-ui 0.0.84 → 0.0.85

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

@@ -255,6 +255,39 @@ class SmartFormController {
     suffixActionClick$ = new Subject();
     /** Selected options details passed dynamically from parent component */
     selectedOptionsData = {};
+    /**
+     * Repeater sections register themselves here so SmartFormComponent can reach them
+     * at submit time. A @ViewChildren query can't: the fields are rendered inside
+     * FormSectionComponent's template, which is a separate view, so the query never
+     * matches them.
+     */
+    repeaters = new Set();
+    /**
+     * Set on the per-row controllers a repeater creates for its instances. Registrations
+     * walk up this chain so a repeater nested inside another repeater's row is still
+     * visible to the root form.
+     */
+    parent;
+    /** The controller the root SmartFormComponent owns — this one unless it is a row controller. */
+    get rootController() {
+        let node = this;
+        const seen = new Set();
+        while (node.parent && !seen.has(node)) {
+            seen.add(node);
+            node = node.parent;
+        }
+        return node;
+    }
+    registerRepeater(host) {
+        this.rootController.repeaters.add(host);
+    }
+    unregisterRepeater(host) {
+        this.rootController.repeaters.delete(host);
+    }
+    /** Every repeater currently rendered under the root form. */
+    get repeaterHosts() {
+        return Array.from(this.rootController.repeaters);
+    }
     initialize(initialData) {
         this.formData = { ...initialData };
         this.fieldSubjects.forEach((subject, key) => {
@@ -289,6 +322,7 @@ class SmartFormController {
     destroy() {
         this.fieldSubjects.forEach(subject => subject.complete());
         this.fieldSubjects.clear();
+        this.repeaters.clear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormController });
@@ -1842,6 +1876,8 @@ class FormFieldComponent {
         if (this.config.sectionConfig?.allowMulti) {
             this.groupFormArray = this.fb.array([]);
             this.formGroup.addControl(this.groupKey, this.groupFormArray);
+            // Let the root form find this repeater at submit time (see SmartFormController.registerRepeater).
+            this.controller.registerRepeater(this);
             const initialData = this.controller.getFieldValue(this.groupKey);
             if (Array.isArray(initialData) && initialData.length > 0) {
                 initialData.forEach((item) => {
@@ -1907,6 +1943,9 @@ class FormFieldComponent {
         // This allows cascading dropdowns (dependencies) to work within each repeater row
         // without cross-row data collisions.
         const rowController = new SmartFormController();
+        // Keeps the chain to the root controller intact so a repeater nested inside this
+        // row still registers where SmartFormComponent looks for it.
+        rowController.parent = this.controller;
         rowController.token = this.controller.token;
         rowController.tokenHeader = this.controller.tokenHeader;
         rowController.labels = this.controller.labels;
@@ -1968,6 +2007,67 @@ class FormFieldComponent {
             }
         }
     }
+    /**
+     * Saves any multi-save entry the user filled in but never pressed Save on.
+     *
+     * The card UI only pushes an entry into `groupFormArray` once Save is clicked, so an
+     * entry left open in the editor is invisible to the root form: its values never reach
+     * the payload and its required fields can't block the submit. SmartForm calls this
+     * before validating, which makes an open entry behave exactly as if Save had been
+     * pressed — complete entries are committed, incomplete ones stop the submit.
+     *
+     * Entries the user never touched are skipped: every multi-save section renders one
+     * blank editor by default, and that blank must not make the whole form unsubmittable.
+     *
+     * @returns true when an entry has content but is still invalid — it stays open with
+     *          its field errors and the section-level message on screen.
+     */
+    commitPendingInstances() {
+        if (!this.isGroup || !this.config.sectionConfig?.multiSaveConfig?.active)
+            return false;
+        let blocked = false;
+        // Snapshot: saveGroupInstance() mutates instanceList entries in place, and a commit
+        // must not be skipped because the list was re-assigned mid-iteration.
+        [...this.instanceList].forEach(instance => {
+            if (!instance.isEditing || this.isIgnorableBlank(instance))
+                return;
+            instance.fg.markAllAsTouched();
+            if (instance.fg.invalid) {
+                this.multiSaveError =
+                    this.controller.labels?.['ERR_MSG_EMPTY_MULTI'] || 'Please fill the required fields before saving.';
+                blocked = true;
+                return;
+            }
+            this.saveGroupInstance(this.instanceList.indexOf(instance));
+        });
+        // Still short of the minimum with no editor open — the user saved then deleted every
+        // entry. Re-open one so the requirement lands on actual fields instead of a message
+        // pointing at an empty section.
+        if (this.groupFormArray.length < this.minEntries && !this.instanceList.some(i => i.isEditing)) {
+            this.addGroupInstance();
+            this.instanceList[this.instanceList.length - 1].fg.markAllAsTouched();
+            this.multiSaveError =
+                this.controller.labels?.['ERR_MSG_EMPTY_MULTI'] || 'Please fill the required fields before saving.';
+            blocked = true;
+        }
+        return blocked;
+    }
+    /** Saved entries this section must hold before the form can be submitted (0 = optional). */
+    get minEntries() {
+        return this.config.sectionConfig?.multiSaveConfig?.minEntries ?? 0;
+    }
+    /**
+     * True when a blank editor can be passed over at submit time.
+     *
+     * Every multi-save section renders one blank editor, so an optional section (the
+     * default) must ignore it — otherwise its required fields would make the whole form
+     * permanently unsubmittable. A section with `minEntries` set that hasn't reached its
+     * quota is the opposite case: the blank editor IS the entry the user still owes, so
+     * it gets validated and lights up like any other incomplete entry.
+     */
+    isIgnorableBlank(instance) {
+        return this.isInstanceBlank(instance) && this.groupFormArray.length >= this.minEntries;
+    }
     /**
      * Re-opens any repeater instance (multiSave card or standard accordion panel)
      * whose nested FormGroup is invalid, so errors hidden by a collapsed card/panel
@@ -1980,6 +2080,12 @@ class FormFieldComponent {
         const isMultiSave = !!this.config.sectionConfig?.multiSaveConfig?.active;
         let foundInvalid = false;
         this.instanceList.forEach((instance, i) => {
+            // An untouched blank editor in an optional section is not an error — the section
+            // always renders one, and flagging it would paint a red "required" on an entry the
+            // user never opened whenever the submit was blocked by some unrelated field
+            // elsewhere on the form. A section still short of its minEntries is exempt.
+            if (isMultiSave && this.isIgnorableBlank(instance))
+                return;
             instance.fg.markAllAsTouched();
             if (instance.fg.invalid) {
                 foundInvalid = true;
@@ -1993,6 +2099,38 @@ class FormFieldComponent {
         });
         return foundInvalid;
     }
+    /**
+     * True when the user has put nothing into this repeater entry.
+     *
+     * Value-based rather than `fg.pristine`, because several fields here (date picker,
+     * rich text, the custom dropdown overlays) write through `setValue`, which never
+     * marks the control dirty. `dirty` is still honoured as a second signal so a field
+     * whose value round-trips back to blank still counts as touched.
+     */
+    isInstanceBlank(instance) {
+        if (instance.isSaved)
+            return false;
+        if (instance.fg.dirty)
+            return false;
+        return Object.values(instance.fg.value ?? {}).every(v => FormFieldComponent.isBlankValue(v));
+    }
+    /** Blank = nothing a user could have entered. `false` counts as blank so an unchecked
+     *  CHECKBOX (or one defaulted to false) doesn't make an otherwise empty entry look filled. */
+    static isBlankValue(value) {
+        if (value === null || value === undefined || value === false)
+            return true;
+        if (typeof value === 'string') {
+            // Strip markup so an "empty" rich text editor (Quill leaves <p><br></p>) reads as blank.
+            return value.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').trim() === '';
+        }
+        if (Array.isArray(value))
+            return value.length === 0;
+        if (value instanceof Date)
+            return false;
+        if (typeof value === 'object')
+            return Object.values(value).every(v => FormFieldComponent.isBlankValue(v));
+        return false;
+    }
     cancelGroupInstance(index) {
         const instance = this.instanceList[index];
         if (!instance.isSaved) {
@@ -2083,6 +2221,7 @@ class FormFieldComponent {
         this.destroy$.complete();
         if (this.isGroup) {
             if (this.config.sectionConfig?.allowMulti) {
+                this.controller.unregisterRepeater(this);
                 this.instanceList.forEach(inst => inst.rowController?.destroy());
             }
             if (this.formGroup?.contains(this.groupKey)) {
@@ -5387,6 +5526,9 @@ class SmartFormComponent {
                 this.handleSubmit();
                 break;
             case 'draft':
+                // Pick up any repeater entry the user filled in but left open, so the draft keeps
+                // it. An incomplete one stays open — a draft shouldn't be blocked on it.
+                this.commitOpenEntries();
                 this.submitToApi(this.collectFormData(), 'draft', btn);
                 break;
             case 'navigate':
@@ -5600,14 +5742,37 @@ class SmartFormComponent {
         });
         return result;
     }
+    /**
+     * Saves every multi-save repeater entry (Event Agenda, FAQs, …) that the user filled in
+     * but left open in its editor, so those values are part of `collectFormData()` even
+     * though the entry's own Save button was never clicked. An entry still missing a
+     * required field is left open with its errors showing rather than committed half-done.
+     *
+     * `validate()` calls this already. Hosts that collect form data on their own — a
+     * "Save as draft" button in an external footer, say — should call it first.
+     *
+     * @returns true when an open entry is incomplete.
+     */
+    commitOpenEntries() {
+        let blocked = false;
+        this.controller.repeaterHosts.forEach(host => {
+            if (host.commitPendingInstances())
+                blocked = true;
+        });
+        return blocked;
+    }
     validate() {
-        if (this.formGroup.invalid) {
+        // A multi-save repeater entry the user typed into but never pressed Save on is not
+        // part of formGroup yet. Commit the complete ones so their values reach the payload,
+        // and let an incomplete one block the submit with its own errors on screen.
+        const blockedByOpenEntry = this.commitOpenEntries();
+        if (this.formGroup.invalid || blockedByOpenEntry) {
             this.formGroup.markAllAsTouched();
             // Re-open any repeater card/accordion entry whose nested fields are invalid,
             // so its error messages (otherwise hidden behind a collapsed panel) become visible.
             let hadHiddenInvalidEntry = false;
-            this.formFieldComponents?.forEach(field => {
-                if (field.revealInvalidInstances())
+            this.controller.repeaterHosts.forEach(host => {
+                if (host.revealInvalidInstances())
                     hadHiddenInvalidEntry = true;
             });
             const message = hadHiddenInvalidEntry
@@ -12159,6 +12324,10 @@ class FilterSidebarComponent {
         }
         return styles;
     }
+    /** `cc-filter-header cc-filter-header--light|--dark` — light (white bar, black title) is the default. */
+    get headerClass() {
+        return `cc-filter-header cc-filter-header--${this.config?.header?.theme || 'light'}`;
+    }
     trackByFn(index, item) {
         return item.key || index;
     }
@@ -12169,7 +12338,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", "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"] }] });
+        ], ngImport: i0, template: "<div class=\"cc-filter-sidebar\" [ngStyle]=\"sidebarStyles\" [class.collapsed]=\"isCollapsed\">\r\n\r\n    <!-- Header -->\r\n    <div [ngClass]=\"headerClass\" *ngIf=\"config.header?.visible !== false\"\r\n        [style.background-color]=\"config.header?.backgroundColor\" [style.border-bottom]=\"config.header?.borderBottom\">\r\n        <div class=\"cc-header-content\">\r\n            <span class=\"cc-header-title\" *ngIf=\"config.header?.title\" [style.color]=\"config.header?.textColor\">\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-padding: .5rem 1.5rem;--cc-filter-header-title-size: 1.125rem;--cc-filter-header-title-weight: 500;--cc-filter-header-title-color: #202124;--cc-filter-header-bg-dark: #262125;--cc-filter-header-title-color-dark: #FFFFFF;--cc-filter-header-icon-color-dark: rgba(255, 255, 255, .7);--cc-filter-header-bg-light: #FFFFFF;--cc-filter-header-border-bottom-light: 1px solid #E0E0E0;--cc-filter-footer-padding: 1rem 1.5rem 1.5rem;--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);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}.cc-filter-sidebar.collapsed .cc-filter-header{justify-content:center;padding:1rem .5rem}.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);padding:var(--cc-filter-header-padding, .5rem 1.5rem);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-header--dark{background-color:var(--cc-filter-header-bg-dark, #262125);border-bottom:none}.cc-filter-header--dark .cc-header-title{color:var(--cc-filter-header-title-color-dark, #FFFFFF)}.cc-filter-header--dark .cc-icon-btn{color:var(--cc-filter-header-icon-color-dark, rgba(255, 255, 255, .7))}.cc-filter-header--dark .cc-icon-btn:hover{color:#fff;background-color:#ffffff1f}.cc-filter-header--light{background-color:var(--cc-filter-header-bg-light, #FFFFFF);border-bottom:var(--cc-filter-header-border-bottom-light, 1px solid #E0E0E0)}.cc-filter-header--light .cc-header-title{color:var(--cc-filter-header-title-color, #202124)}.cc-filter-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--cc-filter-sidebar-gap, 1.5rem);padding:var(--cc-filter-sidebar-padding, 1.5rem)}.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;align-items:center;justify-content:space-between;gap:var(--cc-filter-footer-gap, 1rem);padding:var(--cc-filter-footer-padding, 1rem 1.5rem 1.5rem);margin-top:auto;flex-shrink:0}.cc-filter-footer .cc-btn-apply{margin-left:auto}.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,
@@ -12179,7 +12348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => FilterSidebarComponent),
                             multi: true
                         }
-                    ], 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"] }]
+                    ], template: "<div class=\"cc-filter-sidebar\" [ngStyle]=\"sidebarStyles\" [class.collapsed]=\"isCollapsed\">\r\n\r\n    <!-- Header -->\r\n    <div [ngClass]=\"headerClass\" *ngIf=\"config.header?.visible !== false\"\r\n        [style.background-color]=\"config.header?.backgroundColor\" [style.border-bottom]=\"config.header?.borderBottom\">\r\n        <div class=\"cc-header-content\">\r\n            <span class=\"cc-header-title\" *ngIf=\"config.header?.title\" [style.color]=\"config.header?.textColor\">\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-padding: .5rem 1.5rem;--cc-filter-header-title-size: 1.125rem;--cc-filter-header-title-weight: 500;--cc-filter-header-title-color: #202124;--cc-filter-header-bg-dark: #262125;--cc-filter-header-title-color-dark: #FFFFFF;--cc-filter-header-icon-color-dark: rgba(255, 255, 255, .7);--cc-filter-header-bg-light: #FFFFFF;--cc-filter-header-border-bottom-light: 1px solid #E0E0E0;--cc-filter-footer-padding: 1rem 1.5rem 1.5rem;--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);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}.cc-filter-sidebar.collapsed .cc-filter-header{justify-content:center;padding:1rem .5rem}.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);padding:var(--cc-filter-header-padding, .5rem 1.5rem);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-header--dark{background-color:var(--cc-filter-header-bg-dark, #262125);border-bottom:none}.cc-filter-header--dark .cc-header-title{color:var(--cc-filter-header-title-color-dark, #FFFFFF)}.cc-filter-header--dark .cc-icon-btn{color:var(--cc-filter-header-icon-color-dark, rgba(255, 255, 255, .7))}.cc-filter-header--dark .cc-icon-btn:hover{color:#fff;background-color:#ffffff1f}.cc-filter-header--light{background-color:var(--cc-filter-header-bg-light, #FFFFFF);border-bottom:var(--cc-filter-header-border-bottom-light, 1px solid #E0E0E0)}.cc-filter-header--light .cc-header-title{color:var(--cc-filter-header-title-color, #202124)}.cc-filter-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--cc-filter-sidebar-gap, 1.5rem);padding:var(--cc-filter-sidebar-padding, 1.5rem)}.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;align-items:center;justify-content:space-between;gap:var(--cc-filter-footer-gap, 1rem);padding:var(--cc-filter-footer-padding, 1rem 1.5rem 1.5rem);margin-top:auto;flex-shrink:0}.cc-filter-footer .cc-btn-apply{margin-left:auto}.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"] }]
         }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { config: [{
                 type: Input
             }], initialFilters: [{