mis-crystal-design-system 18.1.8 → 18.1.9

package/fesm2022/mis-crystal-design-system-filter.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, output, signal, Component, NgModule } from '@angular/core';
+import { Pipe, input, output, signal, computed, effect, Component, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@angular/forms';
@@ -61,6 +61,7 @@ class HasValuePipe {
             }]
     }], null, null); })();
 
+const _c0 = () => [];
 function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
@@ -69,10 +70,11 @@ function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_3_Template
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
+    let tmp_7_0;
     const filter_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("label", filter_r4.placeholder || "Select")("selectedItems", ctx_r1.filterForm.get(filter_r4.key).value)("data", filter_r4.options)("searchEnabled", true)("showSelectedCount", true)("enableSelectAll", true)("hideApplyButton", false);
+    i0.ɵɵproperty("label", filter_r4.placeholder || "Select")("selectedItems", ((tmp_7_0 = ctx_r1.filterForm.get(filter_r4.key)) == null ? null : tmp_7_0.value) || i0.ɵɵpureFunction0(7, _c0))("data", filter_r4.options)("searchEnabled", true)("showSelectedCount", true)("enableSelectAll", true)("hideApplyButton", false);
 } }
 function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -82,10 +84,11 @@ function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_4_Template
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
+    let tmp_8_0;
     const filter_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("data", filter_r4.options)("searchEnabled", true)("selectedItem", ctx_r1.filterForm.get(filter_r4.key).value);
+    i0.ɵɵproperty("data", filter_r4.options)("searchEnabled", true)("selectedItem", (tmp_8_0 = ctx_r1.filterForm.get(filter_r4.key)) == null ? null : tmp_8_0.value);
 } }
 function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -101,7 +104,7 @@ function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_div_2_Te
     const filter_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("type", "Default")("checked", (tmp_9_0 = ctx_r1.filterForm.get(filter_r4.key).value) == null ? null : tmp_9_0.includes(option_r7.value));
+    i0.ɵɵproperty("type", "Default")("checked", (tmp_9_0 = ctx_r1.filterForm.get(filter_r4.key)) == null ? null : tmp_9_0.value == null ? null : tmp_9_0.value.includes(option_r7.value));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(option_r7.label);
 } }
@@ -119,18 +122,18 @@ function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_Template
 function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementStart(2, "mis-input", 25)(3, "input", 26);
-    i0.ɵɵlistener("dateChange", function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_6_Template_input_dateChange_3_listener($event) { i0.ɵɵrestoreView(_r8); const filter_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDateChange($event, filter_r4.key, filter_r4)); });
+    i0.ɵɵelementStart(1, "mis-input", 25)(2, "input", 26);
+    i0.ɵɵlistener("dateChange", function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_6_Template_input_dateChange_2_listener($event) { i0.ɵɵrestoreView(_r8); const filter_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDateChange($event, filter_r4.key, filter_r4)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
+    let tmp_7_0;
+    let tmp_8_0;
+    let tmp_9_0;
     const filter_r4 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", filter_r4.placeholder, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("dpConfig", filter_r4.datepickerConfig)("placeholder", ctx_r1.filterForm.get(filter_r4.key).value ? ctx_r1.filterForm.get(filter_r4.key).value : filter_r4.placeholder || "Select")("value", ctx_r1.filterForm.get(filter_r4.key).value ? ctx_r1.filterForm.get(filter_r4.key).value : filter_r4.placeholder || "Select")("selectedDate", ctx_r1.filterForm.get(filter_r4.key).value)("positionX", "end")("offsetX", -10);
+    i0.ɵɵproperty("dpConfig", filter_r4.datePickerConfig)("placeholder", ((tmp_7_0 = ctx_r1.filterForm.get(filter_r4.key)) == null ? null : tmp_7_0.value) || filter_r4.placeholder || "Select")("value", ((tmp_8_0 = ctx_r1.filterForm.get(filter_r4.key)) == null ? null : tmp_8_0.value) || filter_r4.placeholder || "Select")("selectedDate", (tmp_9_0 = ctx_r1.filterForm.get(filter_r4.key)) == null ? null : tmp_9_0.value)("positionX", "end")("offsetX", -10);
 } }
 function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
@@ -193,7 +196,7 @@ function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_10_Templat
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate((filter_r4 == null ? null : filter_r4.options == null ? null : filter_r4.options[1] == null ? null : filter_r4.options[1].label) || "Max");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("placeholder", filter_r4.placeholder || "Type here")("min", (ctx_r1.filterForm.get == null ? null : (tmp_11_0 = ctx_r1.filterForm.get(filter_r4.key)) == null ? null : (tmp_11_0 = tmp_11_0.get("min")) == null ? null : tmp_11_0.value) || 0);
+    i0.ɵɵproperty("placeholder", filter_r4.placeholder || "Type here")("min", ((tmp_11_0 = ctx_r1.filterForm.get(filter_r4.key)) == null ? null : (tmp_11_0 = tmp_11_0.get("min")) == null ? null : tmp_11_0.value) || 0);
 } }
 function FilterPanelComponent_div_0_ng_container_9_div_1_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 34);
@@ -202,7 +205,7 @@ function FilterPanelComponent_div_0_ng_container_9_div_1_Template(rf, ctx) { if
     i0.ɵɵelementStart(0, "div", 13)(1, "span", 14);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_3_Template, 3, 7, "ng-container", 15)(4, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_4_Template, 3, 3, "ng-container", 15)(5, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_Template, 3, 1, "ng-container", 15)(6, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_6_Template, 4, 7, "ng-container", 15)(7, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_7_Template, 3, 6, "ng-container", 15)(8, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_8_Template, 3, 2, "ng-container", 15)(9, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_9_Template, 3, 2, "ng-container", 15)(10, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_10_Template, 10, 6, "ng-container", 15)(11, FilterPanelComponent_div_0_ng_container_9_div_1_div_11_Template, 1, 0, "div", 16);
+    i0.ɵɵtemplate(3, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_3_Template, 3, 8, "ng-container", 15)(4, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_4_Template, 3, 3, "ng-container", 15)(5, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_Template, 3, 1, "ng-container", 15)(6, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_6_Template, 3, 6, "ng-container", 15)(7, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_7_Template, 3, 6, "ng-container", 15)(8, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_8_Template, 3, 2, "ng-container", 15)(9, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_9_Template, 3, 2, "ng-container", 15)(10, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_10_Template, 10, 6, "ng-container", 15)(11, FilterPanelComponent_div_0_ng_container_9_div_1_div_11_Template, 1, 0, "div", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
@@ -275,92 +278,161 @@ function FilterPanelComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 class FilterPanelComponent {
     constructor(hasValue) {
         this.hasValue = hasValue;
-        // Signal inputs replacing @Input()
+        this.isInitialized = false;
+        /* --- signal-based Inputs / Outputs --- */
         this.show = input(false);
         this.config = input.required();
         this.emitFiltersAfterSettingNewValues = input(false);
-        // Signal outputs replacing @Output()
         this.onClose = output();
         this.onApply = output();
+        /* --- form + internal state --- */
         this.filterForm = new FormGroup({});
+        // keep a signal snapshot of form value so computed can react
+        this._formValueSignal = signal({});
+        // last applied snapshot (signal so template/logic can read reliably)
+        this.lastAppliedData = signal(null);
+        // date range readable for template
         this.dateRangeSelectedDates = signal({
             startDate: '',
-            endDate: '',
+            endDate: ''
         });
-    }
-    // Method to calculate filter count (not a computed signal because form values aren't reactive)
-    getFilterCount() {
-        let count = 0;
-        const formValue = this.filterForm.value;
-        this.config().forEach((filter) => {
-            const value = formValue[filter.key];
-            // Special handling for range type - only count if at least one value is set
-            if (filter.type === 'range') {
-                if (value && (value.min !== null || value.max !== null)) {
+        /* computed filterCount */
+        this.filterCount = computed(() => {
+            const formValue = this._formValueSignal();
+            const cfg = this.config();
+            let count = 0;
+            for (const filter of cfg) {
+                const value = formValue[filter.key];
+                if (filter.type === 'range') {
+                    if (value && (value.min !== null || value.max !== null)) {
+                        count++;
+                    }
+                    continue;
+                }
+                if (filter.type === 'multiSelect' || filter.type === 'checkbox') {
+                    if (Array.isArray(value) && value.length > 0) {
+                        count++;
+                    }
+                    continue;
+                }
+                if (this.hasValue.transform(value)) {
                     count++;
                 }
-                return;
             }
-            // Special handling for multiSelect/checkbox - check array length directly
-            if (filter.type === 'multiSelect' || filter.type === 'checkbox') {
-                if (Array.isArray(value) && value.length > 0) {
-                    count++;
+            return count;
+        });
+        // Effect to react to config changes - must allow signal writes since we update internal signals
+        effect(() => {
+            try {
+                const cfg = this.config();
+                if (cfg && Array.isArray(cfg) && cfg.length > 0) {
+                    // Only initialize form if not already done, or if config structure changed
+                    if (!this.isInitialized || this.hasConfigChanged(cfg)) {
+                        this.initializeFormControls(cfg);
+                        this.isInitialized = true;
+                    }
+                    // Always check for selectedValue changes
+                    this.setFilterValue(cfg);
                 }
-                return;
             }
-            // For other types, use hasValue pipe
-            if (this.hasValue.transform(value)) {
-                count++;
+            catch (error) {
+                console.warn('FilterPanel: Error in config effect', error);
             }
-        });
-        return count;
+        }, { allowSignalWrites: true });
     }
+    /* --- Lifecycle --- */
     ngOnInit() {
-        // Access the config signal value by calling it like a function
-        this.initializeFormControls(this.config());
+        // subscribe form changes so computed/filterCount update
+        this.subscribeFormChanges();
+    }
+    ngOnDestroy() {
+        this.formSubscription?.unsubscribe();
     }
+    /* --- Form init & helpers --- */
     initializeFormControls(config) {
-        this.filterForm = new FormGroup({});
-        config.forEach((filter) => {
-            let control;
-            if (filter.type === 'range') {
-                control = new FormGroup({
-                    min: new FormControl(null),
-                    max: new FormControl(null),
-                }, {
-                    validators: (group) => {
-                        const min = group.get('min').value;
-                        const max = group.get('max').value;
-                        if (min !== null && max !== null && min > max) {
-                            return { rangeError: 'Min value should be less than max value' };
-                        }
-                        return null;
-                    }
-                });
-            }
-            else if (filter.type === 'multiSelect' || filter.type === 'checkbox') {
-                control = new FormControl([]);
+        // build a fresh form to match config
+        const newForm = new FormGroup({});
+        const rangeValidator = (group) => {
+            const min = group.get('min')?.value;
+            const max = group.get('max')?.value;
+            if (min !== null && max !== null && min > max) {
+                return { rangeError: 'Min value should be less than max value' };
             }
-            else if (filter.type === 'select') {
-                control = new FormControl('');
-            }
-            else {
-                control = new FormControl(null);
+            return null;
+        };
+        for (const filter of config) {
+            let control;
+            switch (filter.type) {
+                case 'range':
+                    control = new FormGroup({
+                        min: new FormControl(null),
+                        max: new FormControl(null)
+                    }, { validators: rangeValidator });
+                    break;
+                case 'multiSelect':
+                case 'checkbox':
+                    control = new FormControl(Array.isArray(filter.defaultValue) ? filter.defaultValue : []);
+                    break;
+                case 'select':
+                    control = new FormControl(filter.defaultValue ?? '');
+                    break;
+                default:
+                    control = new FormControl(filter.defaultValue ?? null);
             }
             if (this.hasValue.transform(filter.defaultValue)) {
                 control.setValue(filter.defaultValue);
             }
-            this.filterForm.addControl(filter.key, control);
+            newForm.addControl(filter.key, control);
+        }
+        // replace form safely
+        // preserve subscription so valueChanges continues to update _formValueSignal
+        this.filterForm = newForm;
+        // update signal snapshot immediately
+        this._formValueSignal.set({ ...this.filterForm.value });
+        // re-subscribe to new form's valueChanges
+        this.subscribeFormChanges();
+    }
+    subscribeFormChanges() {
+        // unsubscribe previous subscription if any
+        this.formSubscription?.unsubscribe();
+        // subscribe to valueChanges; set snapshot signal
+        this.formSubscription = this.filterForm.valueChanges?.subscribe((value) => {
+            this._formValueSignal.set({ ...value });
         });
+        // also set initial snapshot in case valueChanges doesn't emit immediately
+        this._formValueSignal.set({ ...this.filterForm.value });
     }
+    getControl(key) {
+        return this.filterForm.get(key);
+    }
+    /**
+     * Check if config structure has changed (new keys or removed keys)
+     * Used to determine if form needs to be rebuilt
+     */
+    hasConfigChanged(newConfig) {
+        const currentKeys = Object.keys(this.filterForm.controls).sort();
+        const newKeys = newConfig.map(f => f.key).sort();
+        if (currentKeys.length !== newKeys.length) {
+            return true;
+        }
+        return currentKeys.some((key, index) => key !== newKeys[index]);
+    }
+    /* --- Actions / UI handlers --- */
     closePanel() {
-        if (this.lastAppliedData) {
-            this.filterForm.setValue(this.lastAppliedData);
+        const last = this.lastAppliedData();
+        if (last) {
+            try {
+                // prefer setValue (ensures shape matches); fallback to patchValue
+                this.filterForm.setValue(last);
+            }
+            catch {
+                this.filterForm.patchValue(last);
+            }
         }
         else {
             this.clearFormValues();
         }
-        // Emit the close event using the signal output
+        // emit close event
         this.onClose.emit();
     }
     applyFilters() {
@@ -368,70 +440,102 @@ class FilterPanelComponent {
             this.filterForm.markAllAsTouched();
             return;
         }
-        this.lastAppliedData = { ...this.filterForm.value };
-        // Emit the apply event with the filter data using the signal output
+        const snapshot = { ...this.filterForm.value };
+        this.lastAppliedData.set(snapshot);
         this.onApply.emit({
-            filterData: this.filterForm.value,
-            filterCount: this.getFilterCount()
+            filterData: snapshot,
+            filterCount: this.filterCount()
         });
+        // consistent behavior with earlier implementation:
+        // hide panel (parent should read show() to close) and restore form state via closePanel
+        // Note: we don't mutate show() here; parent owns show signal
         this.closePanel();
     }
+    resetFilters() {
+        this.clearFormValues();
+        // call applyFilters to maintain previous behavior (validation + emit)
+        this.applyFilters();
+    }
+    /* --- Value setters --- */
     handleSelect(event, filterKey, filter) {
-        this.filterForm.get(filterKey).setValue(event);
+        const ctrl = this.getControl(filterKey);
+        // For multiSelect, extract values from array of objects (if needed)
+        let valueToSet = event;
+        if (filter.type === 'multiSelect' && Array.isArray(event)) {
+            // Check if it's an array of objects with 'value' property
+            if (event.length > 0 && typeof event[0] === 'object' && 'value' in event[0]) {
+                valueToSet = event.map((item) => item.value || item);
+            }
+        }
+        ctrl?.setValue(valueToSet);
         if (filter.onChange) {
+            // keep same callback contract: pass event, config and form snapshot
             filter.onChange(event, this.config(), this.filterForm.value);
         }
     }
-    onDateChange(event, filterKey, filter) {
-        this.filterForm.get(filterKey).setValue(event);
-        if (typeof event === 'object') {
-            this.dateRangeSelectedDates.set({
-                startDate: event.startDate,
-                endDate: event.endDate,
-            });
-        }
-    }
     handleCheckbox(event, filterKey, checkboxValue, filter) {
-        const currentValues = this.filterForm.get(filterKey).value;
-        if (event.value) {
-            this.filterForm.get(filterKey).setValue([...currentValues, checkboxValue]);
+        const ctrl = this.getControl(filterKey);
+        const current = Array.isArray(ctrl?.value) ? [...ctrl.value] : [];
+        if (event?.value) {
+            ctrl?.setValue([...current, checkboxValue]);
         }
         else {
-            this.filterForm.get(filterKey).setValue(currentValues.filter((value) => value !== checkboxValue));
+            ctrl?.setValue(current.filter((v) => v !== checkboxValue));
         }
         if (filter.onChange) {
             filter.onChange(event, this.config(), this.filterForm.value);
         }
     }
+    onDateChange(event, filterKey, filter) {
+        const ctrl = this.getControl(filterKey);
+        ctrl?.setValue(event);
+        if (event && typeof event === 'object' && 'startDate' in event && 'endDate' in event) {
+            this.dateRangeSelectedDates.set({
+                startDate: event.startDate,
+                endDate: event.endDate
+            });
+        }
+    }
+    /* --- Clear / Set values helpers --- */
     clearFormValues() {
-        const resetValues = {};
-        this.config().forEach((filter) => {
-            let defaultValue = filter.defaultValue || null;
+        const resets = {};
+        for (const filter of this.config()) {
+            let defaultValue = filter.defaultValue ?? null;
             if (filter.type === 'multiSelect' || filter.type === 'checkbox') {
-                defaultValue = filter.defaultValue || [];
+                defaultValue = filter.defaultValue ?? [];
             }
             if (filter.type === 'range') {
-                defaultValue = filter.defaultValue || { min: null, max: null };
+                defaultValue = filter.defaultValue ?? { min: null, max: null };
             }
-            resetValues[filter.key] = defaultValue;
-        });
-        this.filterForm.patchValue(resetValues);
-    }
-    resetFilters() {
-        this.clearFormValues();
-        this.applyFilters();
+            resets[filter.key] = defaultValue;
+        }
+        // patch to avoid shape mismatch errors
+        this.filterForm.patchValue(resets);
+        this._formValueSignal.set({ ...this.filterForm.value });
     }
+    /**
+     * Applies filter.selectedValue when parent provides selectedValue.
+     * Called by the config effect (so runs on initial load and on config changes).
+     */
     setFilterValue(config) {
         let anyValueSet = false;
         for (const filter of config) {
-            if (filter?.selectedValue) {
-                this.filterForm.get(filter.key).setValue(filter.selectedValue);
-                anyValueSet = true;
+            if (this.hasValue.transform(filter?.selectedValue)) {
+                const ctrl = this.getControl(filter.key);
+                if (ctrl) {
+                    ctrl.setValue(filter.selectedValue);
+                    anyValueSet = true;
+                }
             }
         }
         if (anyValueSet && this.emitFiltersAfterSettingNewValues()) {
+            // respect the parent flag — apply and emit
             this.applyFilters();
         }
+        else {
+            // make sure our snapshot signal is fresh
+            this._formValueSignal.set({ ...this.filterForm.value });
+        }
     }
     static { this.ɵfac = function FilterPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FilterPanelComponent)(i0.ɵɵdirectiveInject(HasValuePipe)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterPanelComponent, selectors: [["mis-filter-panel"]], inputs: { show: [1, "show"], config: [1, "config"], emitFiltersAfterSettingNewValues: [1, "emitFiltersAfterSettingNewValues"] }, outputs: { onClose: "onClose", onApply: "onApply" }, decls: 1, vars: 1, consts: [["class", "filter-panel-container", 4, "ngIf"], [1, "filter-panel-container"], [1, "panel-header"], ["width", "25", "height", "25", "viewBox", "0 0 25 25", "fill", "none", "xmlns", "http://www.w3.org/2000/svg", 1, "close-icon", 3, "click"], ["id", "ic-navigation-cancel-24"], ["id", "Union", "fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M8.60468 6.64355C8.09036 6.12923 7.25649 6.12923 6.74218 6.64355C6.22787 7.15786 6.22787 7.99173 6.74218 8.50604L10.4938 12.2576L6.7431 16.0083C6.22879 16.5226 6.22879 17.3564 6.7431 17.8708C7.25742 18.3851 8.09129 18.3851 8.60560 17.8708L12.3562 14.1201L16.1068 17.8707C16.6211 18.3850 17.4550 18.3850 17.9693 17.8707C18.4836 17.3564 18.4836 16.5225 17.9693 16.0082L14.2187 12.2576L17.9702 8.50613C18.4845 7.99181 18.4845 7.15794 17.9702 6.64363C17.4559 6.12932 16.6220 6.12932 16.1077 6.64363L12.3562 10.3951L8.60468 6.64355Z", "fill", "#181F33"], [1, "horizontal-divider", "first"], [1, "filters", 3, "formGroup"], [4, "ngFor", "ngForOf"], [1, "actions"], [3, "click", "name", "size", "type"], [3, "click", "name", "size", "type", "disabled"], ["class", "filter", 4, "ngIf"], [1, "filter"], [1, "filter-title"], [4, "ngIf"], ["class", "horizontal-divider", 4, "ngIf"], [1, "multiselect-filter"], ["width", "100%", "height", "44px", 1, "no-padding", 3, "onChange", "label", "selectedItems", "data", "searchEnabled", "showSelectedCount", "enableSelectAll", "hideApplyButton"], ["width", "100%", "height", "44px", 3, "onChange", "data", "searchEnabled", "selectedItem"], [1, "checkbox-row"], ["class", "checkbox-container", 4, "ngFor", "ngForOf"], [1, "checkbox-container"], [3, "valueChange", "type", "checked"], [1, "checkbox-label"], ["type", "rounded"], ["misTzDp", "", "misInput", "", "type", "text", "readonly", "", 1, "mis-input", 3, "dateChange", "dpConfig", "placeholder", "value", "selectedDate", "positionX", "offsetX"], ["misTzDrp", "", "misInput", "", "type", "text", "readonly", "", 1, "mis-input", 3, "dateChange", "placeholder", "value", "positionX", "positionY", "selectedDates", "dpConfig"], ["misInput", "", "type", "text", 1, "input", 3, "placeholder", "formControlName"], ["misInput", "", "type", "number", 1, "input", 3, "placeholder", "formControlName"], [1, "range-container", 3, "formGroup"], [1, "range-inner-container"], ["misInput", "", "type", "number", "formControlName", "min", 1, "input", 3, "placeholder"], ["misInput", "", "type", "number", "formControlName", "max", 1, "input", 3, "placeholder", "min"], [1, "horizontal-divider"]], template: function FilterPanelComponent_Template(rf, ctx) { if (rf & 1) {
@@ -442,7 +546,7 @@ class FilterPanelComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterPanelComponent, [{
         type: Component,
-        args: [{ selector: 'mis-filter-panel', animations: [slideFromRight], template: "<div class=\"filter-panel-container\" *ngIf=\"show()\" @slideFromRight>\n  <div class=\"panel-header\">\n      <span>Filters</span>\n      <svg class=\"close-icon\" (click)=\"closePanel()\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g id=\"ic-navigation-cancel-24\">\n              <path id=\"Union\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.60468 6.64355C8.09036 6.12923 7.25649 6.12923 6.74218 6.64355C6.22787 7.15786 6.22787 7.99173 6.74218 8.50604L10.4938 12.2576L6.7431 16.0083C6.22879 16.5226 6.22879 17.3564 6.7431 17.8708C7.25742 18.3851 8.09129 18.3851 8.60560 17.8708L12.3562 14.1201L16.1068 17.8707C16.6211 18.3850 17.4550 18.3850 17.9693 17.8707C18.4836 17.3564 18.4836 16.5225 17.9693 16.0082L14.2187 12.2576L17.9702 8.50613C18.4845 7.99181 18.4845 7.15794 17.9702 6.64363C17.4559 6.12932 16.6220 6.12932 16.1077 6.64363L12.3562 10.3951L8.60468 6.64355Z\" fill=\"#181F33\" />\n          </g>\n      </svg>\n  </div>\n\n  <div class=\"horizontal-divider first\"></div>\n\n  <div class=\"filters\" [formGroup]=\"filterForm\">\n      <ng-container *ngFor=\"let filter of config(); let last = last\">\n          <div class=\"filter\" *ngIf=\"!filter.hidden\">\n              <span class=\"filter-title\">{{filter.title}}</span>\n              <ng-container *ngIf=\"filter.type === 'multiSelect'\">\n                  <div class=\"multiselect-filter\">\n                      <mis-multi-select-dropdown class=\"no-padding\" [label]=\"filter.placeholder || 'Select'\" [selectedItems]=\"filterForm.get(filter.key).value\" (onChange)=\"handleSelect($event, filter.key, filter)\" [data]=\"filter.options\" [searchEnabled]=\"true\"\n                          [showSelectedCount]=\"true\" [enableSelectAll]=\"true\"\n                          [hideApplyButton]=\"false\" width=\"100%\" height=\"44px\"></mis-multi-select-dropdown>\n                  </div>\n              </ng-container>\n              <ng-container *ngIf=\"filter.type === 'select'\">\n                  <div class=\"multiselect-filter\">\n                      <mis-dropdown [data]=\"filter.options\" [searchEnabled]=\"true\" width=\"100%\" height=\"44px\"\n                              (onChange)=\"handleSelect($event, filter.key, filter)\" [selectedItem]=\"filterForm.get(filter.key).value\">\n                      </mis-dropdown>\n                  </div>\n              </ng-container>\n              <ng-container *ngIf=\"filter.type === 'checkbox'\">\n                  <div class=\"checkbox-row\">\n                      <div *ngFor=\"let option of filter.options\" class=\"checkbox-container\">\n                          <mis-checkbox [type]=\"'Default'\" [checked]=\"filterForm.get(filter.key).value?.includes(option.value)\" (valueChange)=\"handleCheckbox($event, filter.key, option.value, filter)\"></mis-checkbox>\n                          <span class=\"checkbox-label\">{{option.label}}</span>\n                      </div>\n                  </div>\n              </ng-container>\n              <ng-container *ngIf=\"filter.type === 'datePicker'\">\n                  {{filter.placeholder}}\n                  <mis-input type=\"rounded\">\n                      <input misTzDp misInput type=\"text\" readonly class=\"mis-input\" [dpConfig]=\"filter.datepickerConfig\" [placeholder]=\"filterForm.get(filter.key).value ? filterForm.get(filter.key).value : (filter.placeholder || 'Select')\" [value]=\"filterForm.get(filter.key).value ? filterForm.get(filter.key).value : (filter.placeholder || 'Select')\" (dateChange)=\"onDateChange($event, filter.key, filter)\" [selectedDate]=\"filterForm.get(filter.key).value\" [positionX]=\"'end'\" [offsetX]=\"-10\">\n                  </mis-input>\n              </ng-container>\n              <ng-container *ngIf=\"filter.type === 'dateRangePicker'\">\n                  <mis-input type=\"rounded\">\n                      <input misTzDrp misInput type=\"text\" class=\"mis-input\" readonly\n                          [placeholder]=\"(!dateRangeSelectedDates().startDate && !dateRangeSelectedDates().endDate) ? (filter.placeholder || 'Select') : dateRangeSelectedDates().startDate + ' - ' + dateRangeSelectedDates().endDate\"\n                          [value]=\"(!dateRangeSelectedDates().startDate && !dateRangeSelectedDates().endDate) ? (filter.placeholder || 'Select') : dateRangeSelectedDates().startDate + ' - ' + dateRangeSelectedDates().endDate\" [positionX]=\"'start'\"\n                          [positionY]=\"'top'\" [selectedDates]=\"dateRangeSelectedDates()\" (dateChange)=\"onDateChange($event, filter.key, filter)\"\n                          [dpConfig]=\"filter.dateRangePickerConfig\" />\n                  </mis-input>\n              </ng-container>\n              <ng-container *ngIf=\"filter.type === 'text'\">\n                  <mis-input type=\"rounded\">\n                      <input misInput type=\"text\" class=\"input\" [placeholder]=\"filter.placeholder || 'Type here'\" [formControlName]=\"filter.key\">\n                  </mis-input>\n              </ng-container>\n              <ng-container *ngIf=\"filter.type === 'number'\">\n                  <mis-input type=\"rounded\">\n                      <input misInput type=\"number\" class=\"input\" [placeholder]=\"filter.placeholder || 'Type here'\" [formControlName]=\"filter.key\">\n                  </mis-input>\n              </ng-container>\n              <ng-container *ngIf=\"filter.type === 'range'\">\n                  <div class=\"range-container\" [formGroup]=\"filterForm.get(filter.key)\">\n                      <div class=\"range-inner-container\">\n                          <span>{{ filter?.options?.[0]?.label || 'Min' }}</span>\n                          <input\n                              misInput\n                              type=\"number\"\n                              class=\"input\"\n                              [placeholder]=\"filter.placeholder || 'Type here'\"\n                              formControlName=\"min\"\n                          />\n                      </div>\n                      <div class=\"range-inner-container\">\n                          <span>{{ filter?.options?.[1]?.label || 'Max' }}</span>\n                          <input\n                              misInput\n                              type=\"number\"\n                              class=\"input\"\n                              [placeholder]=\"filter.placeholder || 'Type here'\"\n                              formControlName=\"max\"\n                              [min]=\"filterForm.get?.(filter.key)?.get('min')?.value || 0\"\n                          />\n                      </div>\n                  </div>\n              </ng-container>\n              <div class=\"horizontal-divider\" *ngIf=\"!last\"></div>\n          </div>\n      </ng-container>\n  </div>\n\n  <div class=\"actions\">\n      <mis-button [name]=\"'Clear All'\" [size]=\"'Small'\" [type]=\"'Text'\" (click)=\"resetFilters()\"></mis-button>\n      <mis-button [name]=\"'Apply'\" [size]=\"'Small'\" [type]=\"'Solid'\" (click)=\"applyFilters()\" [disabled]=\"filterForm.invalid\"></mis-button>\n  </div>\n</div>\n\n", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.filter-panel-container{display:flex;flex-direction:column;height:100%;max-width:100%;min-width:20rem;position:absolute;right:0;background:var(--bg-primary, #FFFFFF);top:0;z-index:999;box-shadow:0 0 5px #000000a6;transition:all .3s ease}.filter-panel-container .panel-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-weight:700;margin:0 1rem;flex-basis:5%}.filter-panel-container .panel-header span{font-size:1.25rem}.filter-panel-container .panel-header .close-icon{cursor:pointer;border-radius:50%;transform:scale(1.4);padding:.3rem;transition:all .3s ease}.filter-panel-container .panel-header .close-icon:hover{background:var(--bg-tertiary, #F5F5F5)}.filter-panel-container .panel-header .close-icon:active{background:var(--border-primary, #E0E0E0)}.filter-panel-container .mat-divider.horizontal{margin:1rem}.filters{display:flex;flex-direction:column;flex:1;row-gap:.5rem;overflow:auto;padding:0 1rem}.filters .filter{display:flex;flex-direction:column}.filters .filter .filter-title{color:var(--text-secondary, #6A737D);font-size:.875rem;font-weight:700;line-height:20px;letter-spacing:.25px}.filters .filter .checkbox-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.8rem 0}.filters .filter .checkbox-row .checkbox-container{display:flex;flex-direction:row;align-items:center;gap:.5rem}.filters .filter .checkbox-row .checkbox-label{display:block;width:8rem}.filters .filter .checkbox-row ::ng-deep .mat-checkbox-inner-container{width:20px;height:20px}.filters .filter .checkbox-row ::ng-deep .mat-checkbox-frame{border-radius:5px}.filters .filter .multiselect-filter,.filters .filter mis-input{padding:.7rem 0}.horizontal-divider{display:block;width:100%;height:1px;margin:.5rem 0;background:var(--border-primary, #E0E0E0)}.first{margin-top:0}.actions{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:1rem;border-top:1px solid var(--border-primary, #E0E0E0);flex-basis:4%;padding:.5rem}.actions button{font-weight:700;border-radius:.5rem;width:6rem}.no-padding ::ng-deep .container{padding:0!important}.range-container{display:flex;justify-content:space-between;padding:.8rem 0}.range-container .range-inner-container{display:flex;flex-direction:column}.range-container .range-inner-container input{height:2.2rem;outline:none;border-radius:.375rem;border:1px solid var(--border-primary, #E0E0E0);width:8rem;padding:0 .5rem}.range-container .range-inner-container span{margin-bottom:.2rem}input.ng-invalid.ng-touched{border:1px solid var(--brand-error, #B00020);background-color:var(--brand-error-lightest, #FDF2F2)}\n"] }]
+        args: [{ selector: 'mis-filter-panel', animations: [slideFromRight], template: "<div class=\"filter-panel-container\" *ngIf=\"show()\" @slideFromRight>\n    <div class=\"panel-header\">\n        <span>Filters</span>\n        <svg class=\"close-icon\" (click)=\"closePanel()\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g id=\"ic-navigation-cancel-24\">\n                <path id=\"Union\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.60468 6.64355C8.09036 6.12923 7.25649 6.12923 6.74218 6.64355C6.22787 7.15786 6.22787 7.99173 6.74218 8.50604L10.4938 12.2576L6.7431 16.0083C6.22879 16.5226 6.22879 17.3564 6.7431 17.8708C7.25742 18.3851 8.09129 18.3851 8.60560 17.8708L12.3562 14.1201L16.1068 17.8707C16.6211 18.3850 17.4550 18.3850 17.9693 17.8707C18.4836 17.3564 18.4836 16.5225 17.9693 16.0082L14.2187 12.2576L17.9702 8.50613C18.4845 7.99181 18.4845 7.15794 17.9702 6.64363C17.4559 6.12932 16.6220 6.12932 16.1077 6.64363L12.3562 10.3951L8.60468 6.64355Z\" fill=\"#181F33\" />\n            </g>\n        </svg>\n    </div>\n  \n    <div class=\"horizontal-divider first\"></div>\n  \n    <div class=\"filters\" [formGroup]=\"filterForm\">\n        <ng-container *ngFor=\"let filter of config(); let last = last\">\n            <div class=\"filter\" *ngIf=\"!filter.hidden\">\n                <span class=\"filter-title\">{{filter.title}}</span>\n                <ng-container *ngIf=\"filter.type === 'multiSelect'\">\n                    <div class=\"multiselect-filter\">\n                        <mis-multi-select-dropdown class=\"no-padding\" [label]=\"filter.placeholder || 'Select'\" [selectedItems]=\"filterForm.get(filter.key)?.value || []\" (onChange)=\"handleSelect($event, filter.key, filter)\" [data]=\"filter.options\" [searchEnabled]=\"true\"\n                            [showSelectedCount]=\"true\" [enableSelectAll]=\"true\"\n                            [hideApplyButton]=\"false\" width=\"100%\" height=\"44px\"></mis-multi-select-dropdown>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"filter.type === 'select'\">\n                    <div class=\"multiselect-filter\">\n                        <mis-dropdown [data]=\"filter.options\" [searchEnabled]=\"true\" width=\"100%\" height=\"44px\"\n                                (onChange)=\"handleSelect($event, filter.key, filter)\" [selectedItem]=\"filterForm.get(filter.key)?.value\">\n                        </mis-dropdown>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"filter.type === 'checkbox'\">\n                    <div class=\"checkbox-row\">\n                        <div *ngFor=\"let option of filter.options\" class=\"checkbox-container\">\n                            <mis-checkbox [type]=\"'Default'\" [checked]=\"filterForm.get(filter.key)?.value?.includes(option.value)\" (valueChange)=\"handleCheckbox($event, filter.key, option.value, filter)\"></mis-checkbox>\n                            <span class=\"checkbox-label\">{{option.label}}</span>\n                        </div>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"filter.type === 'datePicker'\">\n                    <mis-input type=\"rounded\">\n                        <input misTzDp misInput type=\"text\" readonly class=\"mis-input\" [dpConfig]=\"filter.datePickerConfig\" [placeholder]=\"filterForm.get(filter.key)?.value || filter.placeholder || 'Select'\" [value]=\"filterForm.get(filter.key)?.value || filter.placeholder || 'Select'\" (dateChange)=\"onDateChange($event, filter.key, filter)\" [selectedDate]=\"filterForm.get(filter.key)?.value\" [positionX]=\"'end'\" [offsetX]=\"-10\">\n                    </mis-input>\n                </ng-container>\n                <ng-container *ngIf=\"filter.type === 'dateRangePicker'\">\n                    <mis-input type=\"rounded\">\n                        <input misTzDrp misInput type=\"text\" class=\"mis-input\" readonly\n                            [placeholder]=\"(!dateRangeSelectedDates().startDate && !dateRangeSelectedDates().endDate) ? (filter.placeholder || 'Select') : dateRangeSelectedDates().startDate + ' - ' + dateRangeSelectedDates().endDate\"\n                            [value]=\"(!dateRangeSelectedDates().startDate && !dateRangeSelectedDates().endDate) ? (filter.placeholder || 'Select') : dateRangeSelectedDates().startDate + ' - ' + dateRangeSelectedDates().endDate\" [positionX]=\"'start'\"\n                            [positionY]=\"'top'\" [selectedDates]=\"dateRangeSelectedDates()\" (dateChange)=\"onDateChange($event, filter.key, filter)\"\n                            [dpConfig]=\"filter.dateRangePickerConfig\" />\n                    </mis-input>\n                </ng-container>\n                <ng-container *ngIf=\"filter.type === 'text'\">\n                    <mis-input type=\"rounded\">\n                        <input misInput type=\"text\" class=\"input\" [placeholder]=\"filter.placeholder || 'Type here'\" [formControlName]=\"filter.key\">\n                    </mis-input>\n                </ng-container>\n                <ng-container *ngIf=\"filter.type === 'number'\">\n                    <mis-input type=\"rounded\">\n                        <input misInput type=\"number\" class=\"input\" [placeholder]=\"filter.placeholder || 'Type here'\" [formControlName]=\"filter.key\">\n                    </mis-input>\n                </ng-container>\n                <ng-container *ngIf=\"filter.type === 'range'\">\n                    <div class=\"range-container\" [formGroup]=\"filterForm.get(filter.key)\">\n                        <div class=\"range-inner-container\">\n                            <span>{{ filter?.options?.[0]?.label || 'Min' }}</span>\n                            <input\n                                misInput\n                                type=\"number\"\n                                class=\"input\"\n                                [placeholder]=\"filter.placeholder || 'Type here'\"\n                                formControlName=\"min\"\n                            />\n                        </div>\n                        <div class=\"range-inner-container\">\n                            <span>{{ filter?.options?.[1]?.label || 'Max' }}</span>\n                            <input\n                                misInput\n                                type=\"number\"\n                                class=\"input\"\n                                [placeholder]=\"filter.placeholder || 'Type here'\"\n                                formControlName=\"max\"\n                                [min]=\"filterForm.get(filter.key)?.get('min')?.value || 0\"\n                            />\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"horizontal-divider\" *ngIf=\"!last\"></div>\n            </div>\n        </ng-container>\n    </div>\n  \n    <div class=\"actions\">\n        <mis-button [name]=\"'Clear All'\" [size]=\"'Small'\" [type]=\"'Text'\" (click)=\"resetFilters()\"></mis-button>\n        <mis-button [name]=\"'Apply'\" [size]=\"'Small'\" [type]=\"'Solid'\" (click)=\"applyFilters()\" [disabled]=\"filterForm.invalid\"></mis-button>\n    </div>\n  </div>", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3;--brand-primary: #0937B2;--brand-primary-light: #3C68D0;--brand-primary-dark: #062A99;--brand-primary-darker: #041F80;--brand-primary-lighter: #638FE7;--brand-primary-lightest: #CBDDFB;--brand-primary-hover: #F0F3FA;--brand-primary-active: #DAE1F3;--brand-secondary: #ED711C;--brand-secondary-light: #F09E65;--brand-secondary-dark: #B23600;--brand-secondary-lighter: #FFC6F2;--brand-accent: #10ADAE;--brand-accent-light: #16CBBC;--brand-accent-dark: #035F6B;--brand-accent-lighter: #ACDADA;--brand-success: #38AF49;--brand-success-light: #4CAF50;--brand-success-dark: #216531;--brand-success-lighter: #E4F5E9;--brand-success-lightest: #F1FFF3;--brand-error: #B00020;--brand-error-light: #F04E4E;--brand-error-dark: #A60060;--brand-error-lighter: #FAE1EA;--brand-error-lightest: #FDF2F2;--brand-warning: #FF9D00;--brand-warning-light: #D4900C;--brand-warning-dark: #624000;--brand-warning-lighter: #F4E7C3;--brand-warning-lightest: #FAEFED;--brand-info: #0091FF;--brand-info-light: #35A1FF;--brand-info-dark: #0087B2;--brand-info-lighter: #CFECF9;--text-primary: #181F33;--text-secondary: #6A737D;--text-tertiary: #929DAB;--text-disabled: #929DAB;--text-primary-87: rgba(24, 31, 51, .87);--text-primary-60: rgba(24, 31, 51, .6);--text-primary-38: rgba(24, 31, 51, .38);--text-primary-12: rgba(24, 31, 51, .12);--bg-primary: #FFFFFF;--bg-secondary: #FAFAFA;--bg-tertiary: #F5F5F5;--bg-overlay: rgba(0, 0, 0, .32);--bg-overlay-light: rgba(0, 0, 0, .12);--bg-overlay-lighter: rgba(0, 0, 0, .08);--bg-overlay-lightest: rgba(0, 0, 0, .04);--border-primary: #E0E0E0;--border-secondary: #D6DCE2;--border-tertiary: #C8CDD3;--border-light: #F1F4F8;--border-primary-12: rgba(0, 0, 0, .12);--border-primary-08: rgba(0, 0, 0, .08);--border-primary-06: rgba(0, 0, 0, .06);--shadow-primary: rgba(0, 0, 0, .12);--shadow-secondary: rgba(0, 0, 0, .08);--shadow-tertiary: rgba(0, 0, 0, .04);--shadow-light: rgba(0, 0, 0, .06);--status-available: #929DAB;--status-unavailable: #CCD3DA;--status-hotseat: #857BFF;--status-multiteam: #10ADAE;--status-selected: #10ADAE;--status-upcoming: #D4900C;--status-room: #38AF49;--status-room-booked: #B23600;--status-room-unavailable: #181F33;--team-color-1: #F8C52E;--team-color-2: #FA8E20;--team-color-3: #987CDD;--team-color-4: #16CBBC;--team-color-5: #E65010;--team-color-6: #A60060;--team-color-7: #ED323B;--team-color-8: #35A1FF;--team-color-9: #80D348}.filter-panel-container{display:flex;flex-direction:column;height:100%;max-width:100%;min-width:20rem;position:absolute;right:0;background:var(--bg-primary, #FFFFFF);top:0;z-index:999;box-shadow:0 0 5px #000000a6;transition:all .3s ease}.filter-panel-container .panel-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-weight:700;margin:0 1rem;flex-basis:5%}.filter-panel-container .panel-header span{font-size:1.25rem}.filter-panel-container .panel-header .close-icon{cursor:pointer;border-radius:50%;transform:scale(1.4);padding:.3rem;transition:all .3s ease}.filter-panel-container .panel-header .close-icon:hover{background:var(--bg-tertiary, #F5F5F5)}.filter-panel-container .panel-header .close-icon:active{background:var(--border-primary, #E0E0E0)}.filter-panel-container .mat-divider.horizontal{margin:1rem}.filters{display:flex;flex-direction:column;flex:1;row-gap:.5rem;overflow:auto;padding:0 1rem}.filters .filter{display:flex;flex-direction:column}.filters .filter .filter-title{color:var(--text-secondary, #6A737D);font-size:.875rem;font-weight:700;line-height:20px;letter-spacing:.25px}.filters .filter .checkbox-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.8rem 0}.filters .filter .checkbox-row .checkbox-container{display:flex;flex-direction:row;align-items:center;gap:.5rem}.filters .filter .checkbox-row .checkbox-label{display:block;width:8rem}.filters .filter .checkbox-row ::ng-deep .mat-checkbox-inner-container{width:20px;height:20px}.filters .filter .checkbox-row ::ng-deep .mat-checkbox-frame{border-radius:5px}.filters .filter .multiselect-filter,.filters .filter mis-input{padding:.7rem 0}.horizontal-divider{display:block;width:100%;height:1px;margin:.5rem 0;background:var(--border-primary, #E0E0E0)}.first{margin-top:0}.actions{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:1rem;border-top:1px solid var(--border-primary, #E0E0E0);flex-basis:4%;padding:.5rem}.actions button{font-weight:700;border-radius:.5rem;width:6rem}.no-padding ::ng-deep .container{padding:0!important}.range-container{display:flex;justify-content:space-between;padding:.8rem 0}.range-container .range-inner-container{display:flex;flex-direction:column}.range-container .range-inner-container input{height:2.2rem;outline:none;border-radius:.375rem;border:1px solid var(--border-primary, #E0E0E0);width:8rem;padding:0 .5rem}.range-container .range-inner-container span{margin-bottom:.2rem}input.ng-invalid.ng-touched{border:1px solid var(--brand-error, #B00020);background-color:var(--brand-error-lightest, #FDF2F2)}\n"] }]
     }], () => [{ type: HasValuePipe }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FilterPanelComponent, { className: "FilterPanelComponent" }); })();