mis-crystal-design-system 18.0.3 → 18.0.5

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

@@ -0,0 +1,559 @@
+import * as i0 from '@angular/core';
+import { Pipe, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from 'mis-crystal-design-system/button';
+import { ButtonModule } from 'mis-crystal-design-system/button';
+import { RadioButtonModule } from 'mis-crystal-design-system/radio-button';
+import * as i7 from 'mis-crystal-design-system/input';
+import { MisInputModule } from 'mis-crystal-design-system/input';
+import * as i10 from 'mis-crystal-design-system/checkbox';
+import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
+import * as i5 from 'mis-crystal-design-system/multi-select-dropdown';
+import { MultiSelectDropdownModule } from 'mis-crystal-design-system/multi-select-dropdown';
+import * as i8 from 'mis-crystal-design-system/datepicker_v2';
+import { DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
+import * as i9 from 'mis-crystal-design-system/daterangepicker_v2';
+import { DateRangepickerModuleV2 } from 'mis-crystal-design-system/daterangepicker_v2';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i6 from 'mis-crystal-design-system/dropdown';
+import { DropdownModule } from 'mis-crystal-design-system/dropdown';
+
+const slideFromRight = trigger('slideFromRight', [
+    transition(':enter', [
+        style({ transform: 'translateX(100%)' }),
+        animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ transform: 'translateX(0)' }))
+    ]),
+    transition(':leave', [
+        style({ transform: 'translateX(0)' }),
+        animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ transform: 'translateX(100%)' }))
+    ])
+]);
+
+/**
+ * HasValuePipe
+ * This pipe is use to check given value should not null or undefined
+ * Its also check object, Its hould not be empty
+ */
+class HasValuePipe {
+    transform(value) {
+        if (Array.isArray(value) && value.length === 0) {
+            return false;
+        }
+        /* This was evaluating dateObject as false*/
+        if (value instanceof Date) {
+            return true;
+        }
+        if (typeof value === 'object' && value !== null) {
+            return Object.keys(value).length >= 1;
+        }
+        return value !== null && value !== undefined && value !== '';
+    }
+}
+HasValuePipe.ɵfac = function HasValuePipe_Factory(t) { return new (t || HasValuePipe)(); };
+HasValuePipe.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "hasValue", type: HasValuePipe, pure: true });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HasValuePipe, [{
+            type: Pipe,
+            args: [{
+                    name: 'hasValue',
+                }]
+        }], null, null);
+})();
+
+function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_3_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r16 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "div", 17)(2, "mis-multi-select-dropdown", 18);
+        i0.ɵɵlistener("onChange", function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_3_Template_mis_multi_select_dropdown_onChange_2_listener($event) { i0.ɵɵrestoreView(_r16); const filter_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r14 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r14.handleSelect($event, filter_r2.key, filter_r2)); });
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = i0.ɵɵnextContext(2).$implicit;
+        const ctx_r5 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("label", filter_r2.placeholder || "Select")("selectedItems", ctx_r5.filterForm.get(filter_r2.key).value)("data", filter_r2.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 _r20 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "div", 17)(2, "mis-dropdown", 19);
+        i0.ɵɵlistener("onChange", function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_4_Template_mis_dropdown_onChange_2_listener($event) { i0.ɵɵrestoreView(_r20); const filter_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r18 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r18.handleSelect($event, filter_r2.key, filter_r2)); });
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = i0.ɵɵnextContext(2).$implicit;
+        const ctx_r6 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("data", filter_r2.options)("searchEnabled", true)("selectedItem", ctx_r6.filterForm.get(filter_r2.key).value);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_div_2_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r26 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 22)(1, "mis-checkbox", 23);
+        i0.ɵɵlistener("valueChange", function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_div_2_Template_mis_checkbox_valueChange_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r26); const option_r23 = restoredCtx.$implicit; const filter_r2 = i0.ɵɵnextContext(3).$implicit; const ctx_r24 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r24.handleCheckbox($event, filter_r2.key, option_r23.value, filter_r2)); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(2, "span", 24);
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd()();
+    }
+    if (rf & 2) {
+        const option_r23 = ctx.$implicit;
+        const filter_r2 = i0.ɵɵnextContext(3).$implicit;
+        const ctx_r22 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("type", "Default")("checked", ctx_r22.filterForm.get(filter_r2.key).value == null ? null : ctx_r22.filterForm.get(filter_r2.key).value.includes(option_r23.value));
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(option_r23.label);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "div", 20);
+        i0.ɵɵtemplate(2, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_div_2_Template, 4, 3, "div", 21);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = i0.ɵɵnextContext(2).$implicit;
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", filter_r2.options);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_6_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r31 = 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(_r31); const filter_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r29 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r29.onDateChange($event, filter_r2.key, filter_r2)); });
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = i0.ɵɵnextContext(2).$implicit;
+        const ctx_r8 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", filter_r2.placeholder, " ");
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("dpConfig", filter_r2.datepickerConfig)("placeholder", ctx_r8.filterForm.get(filter_r2.key).value ? ctx_r8.filterForm.get(filter_r2.key).value : filter_r2.placeholder || "Select")("value", ctx_r8.filterForm.get(filter_r2.key).value ? ctx_r8.filterForm.get(filter_r2.key).value : filter_r2.placeholder || "Select")("selectedDate", ctx_r8.filterForm.get(filter_r2.key).value)("positionX", "end")("offsetX", -10);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_7_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r35 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "mis-input", 25)(2, "input", 27);
+        i0.ɵɵlistener("dateChange", function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_7_Template_input_dateChange_2_listener($event) { i0.ɵɵrestoreView(_r35); const filter_r2 = i0.ɵɵnextContext(2).$implicit; const ctx_r33 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r33.onDateChange($event, filter_r2.key, filter_r2)); });
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = i0.ɵɵnextContext(2).$implicit;
+        const ctx_r9 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("placeholder", !ctx_r9.dateRangeSelectedDates.startDate && !ctx_r9.dateRangeSelectedDates.endDate ? filter_r2.placeholder || "Select" : ctx_r9.dateRangeSelectedDates.startDate + " - " + ctx_r9.dateRangeSelectedDates.endDate)("value", !ctx_r9.dateRangeSelectedDates.startDate && !ctx_r9.dateRangeSelectedDates.endDate ? filter_r2.placeholder || "Select" : ctx_r9.dateRangeSelectedDates.startDate + " - " + ctx_r9.dateRangeSelectedDates.endDate)("positionX", "start")("positionY", "top")("selectedDates", ctx_r9.dateRangeSelectedDates)("dpConfig", filter_r2.dateRangePickerConfig);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_8_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "mis-input", 25);
+        i0.ɵɵelement(2, "input", 28);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = i0.ɵɵnextContext(2).$implicit;
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("placeholder", filter_r2.placeholder || "Type here")("formControlName", filter_r2.key);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_9_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "mis-input", 25);
+        i0.ɵɵelement(2, "input", 29);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = i0.ɵɵnextContext(2).$implicit;
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("placeholder", filter_r2.placeholder || "Type here")("formControlName", filter_r2.key);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_10_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵelementStart(1, "div", 30)(2, "div", 31)(3, "span");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(5, "input", 32);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "div", 31)(7, "span");
+        i0.ɵɵtext(8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(9, "input", 33);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = i0.ɵɵnextContext(2).$implicit;
+        const ctx_r12 = i0.ɵɵnextContext(2);
+        let tmp_5_0;
+        let tmp_5_1;
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("formGroup", ctx_r12.filterForm.get(filter_r2.key));
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate((filter_r2 == null ? null : filter_r2.options == null ? null : filter_r2.options[0] == null ? null : filter_r2.options[0].label) || "Min");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("placeholder", filter_r2.placeholder || "Type here");
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate((filter_r2 == null ? null : filter_r2.options == null ? null : filter_r2.options[1] == null ? null : filter_r2.options[1].label) || "Max");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("placeholder", filter_r2.placeholder || "Type here")("min", (ctx_r12.filterForm.get == null ? null : (tmp_5_0 = ctx_r12.filterForm.get(filter_r2.key)) == null ? null : (tmp_5_1 = tmp_5_0.get("min")) == null ? null : tmp_5_1.value) || 0);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_div_11_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "div", 34);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_div_1_Template(rf, ctx) {
+    if (rf & 1) {
+        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);
+        i0.ɵɵtemplate(4, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_4_Template, 3, 3, "ng-container", 15);
+        i0.ɵɵtemplate(5, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_5_Template, 3, 1, "ng-container", 15);
+        i0.ɵɵtemplate(6, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_6_Template, 4, 7, "ng-container", 15);
+        i0.ɵɵtemplate(7, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_7_Template, 3, 6, "ng-container", 15);
+        i0.ɵɵtemplate(8, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_8_Template, 3, 2, "ng-container", 15);
+        i0.ɵɵtemplate(9, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_9_Template, 3, 2, "ng-container", 15);
+        i0.ɵɵtemplate(10, FilterPanelComponent_div_0_ng_container_9_div_1_ng_container_10_Template, 10, 6, "ng-container", 15);
+        i0.ɵɵtemplate(11, FilterPanelComponent_div_0_ng_container_9_div_1_div_11_Template, 1, 0, "div", 16);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r40 = i0.ɵɵnextContext();
+        const filter_r2 = ctx_r40.$implicit;
+        const last_r3 = ctx_r40.last;
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(filter_r2.title);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", filter_r2.type === "multiSelect");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", filter_r2.type === "select");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", filter_r2.type === "checkbox");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", filter_r2.type === "datePicker");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", filter_r2.type === "dateRangePicker");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", filter_r2.type === "text");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", filter_r2.type === "number");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", filter_r2.type === "range");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !last_r3);
+    }
+}
+function FilterPanelComponent_div_0_ng_container_9_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0);
+        i0.ɵɵtemplate(1, FilterPanelComponent_div_0_ng_container_9_div_1_Template, 12, 10, "div", 12);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const filter_r2 = ctx.$implicit;
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !filter_r2.hidden);
+    }
+}
+function FilterPanelComponent_div_0_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r42 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "span");
+        i0.ɵɵtext(3, "Filters");
+        i0.ɵɵelementEnd();
+        i0.ɵɵnamespaceSVG();
+        i0.ɵɵelementStart(4, "svg", 3);
+        i0.ɵɵlistener("click", function FilterPanelComponent_div_0_Template__svg_svg_click_4_listener() { i0.ɵɵrestoreView(_r42); const ctx_r41 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r41.closePanel()); });
+        i0.ɵɵelementStart(5, "g", 4);
+        i0.ɵɵelement(6, "path", 5);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵnamespaceHTML();
+        i0.ɵɵelement(7, "div", 6);
+        i0.ɵɵelementStart(8, "div", 7);
+        i0.ɵɵtemplate(9, FilterPanelComponent_div_0_ng_container_9_Template, 2, 1, "ng-container", 8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(10, "div", 9)(11, "mis-button", 10);
+        i0.ɵɵlistener("click", function FilterPanelComponent_div_0_Template_mis_button_click_11_listener() { i0.ɵɵrestoreView(_r42); const ctx_r43 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r43.resetFilters()); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(12, "mis-button", 11);
+        i0.ɵɵlistener("click", function FilterPanelComponent_div_0_Template_mis_button_click_12_listener() { i0.ɵɵrestoreView(_r42); const ctx_r44 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r44.applyFilters()); });
+        i0.ɵɵelementEnd()()();
+    }
+    if (rf & 2) {
+        const ctx_r0 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("@slideFromRight", undefined);
+        i0.ɵɵadvance(8);
+        i0.ɵɵproperty("formGroup", ctx_r0.filterForm);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx_r0.config);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("name", "Clear All")("size", "Small")("type", "Text");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("name", "Apply")("size", "Small")("type", "Solid")("disabled", ctx_r0.filterForm.invalid);
+    }
+}
+class FilterPanelComponent {
+    constructor(hasValue) {
+        this.hasValue = hasValue;
+        this.onClose = new EventEmitter();
+        this.onApply = new EventEmitter();
+        this.config = [];
+        this.emitFiltersAfterSettingNewValues = false;
+        this.filterForm = new FormGroup([]);
+        this.dateRangeSelectedDates = {
+            startDate: '',
+            endDate: '',
+        };
+    }
+    ngOnInit() {
+        this.initializeFormControls();
+    }
+    ngOnChanges(changes) {
+        if (changes.config && !changes.config.firstChange) {
+            this.setFilterValue(this.config);
+        }
+    }
+    initializeFormControls() {
+        this.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([]);
+            }
+            else if (filter.type === 'select') {
+                control = new FormControl('');
+            }
+            else {
+                control = new FormControl(null);
+            }
+            if (this.hasValue.transform(filter.defaultValue)) {
+                control.setValue(filter.defaultValue);
+            }
+            this.filterForm.addControl(filter.key, control);
+        });
+    }
+    closePanel() {
+        if (this.lastAppliedData) {
+            this.filterForm.setValue(this.lastAppliedData);
+        }
+        else {
+            this.clearFormValues();
+        }
+        this.onClose.emit();
+    }
+    filterCount() {
+        let count = 0;
+        this.config.forEach((filter) => {
+            if (this.hasValue.transform(this.filterForm.get(filter.key).value)) {
+                if (filter.type === 'range' && this.filterForm.get(filter.key).value.min == null && this.filterForm.get(filter.key).value.max == null) {
+                    return;
+                }
+                count++;
+            }
+        });
+        return count;
+    }
+    applyFilters() {
+        if (this.filterForm.invalid) {
+            this.filterForm.markAllAsTouched();
+            return;
+        }
+        this.lastAppliedData = Object.assign({}, this.filterForm.value);
+        this.onApply.emit({
+            filterData: this.filterForm.value,
+            filterCount: this.filterCount()
+        });
+        this.show = false;
+        this.closePanel();
+    }
+    handleSelect(event, filterKey, filter) {
+        this.filterForm.get(filterKey).setValue(event);
+        if (filter.onChange) {
+            filter.onChange(event, this.config);
+        }
+    }
+    onDateChange(event, filterKey, filter) {
+        this.filterForm.get(filterKey).setValue(event);
+        if (typeof event === 'object') {
+            this.dateRangeSelectedDates = {
+                startDate: event.startDate,
+                endDate: event.endDate,
+            };
+        }
+        else {
+            console.log(this.filterForm.get(filterKey).value);
+        }
+    }
+    handleCheckbox(event, filterKey, checkboxValue, filter) {
+        if (event.value) {
+            this.filterForm.get(filterKey).setValue([...this.filterForm.get(filterKey).value, checkboxValue]);
+        }
+        else {
+            const filterValue = this.filterForm.get(filterKey).value;
+            this.filterForm.get(filterKey).setValue(filterValue.filter((value) => value !== checkboxValue));
+        }
+        if (filter.onChange) {
+            filter.onChange(event, this.config, this.filterForm.value);
+        }
+    }
+    clearFormValues() {
+        const resetValues = {};
+        this.config.forEach((filter) => {
+            let defaultValue = filter.defaultValue || null;
+            if (filter.type === 'multiSelect' || filter.type === 'checkbox') {
+                defaultValue = filter.defaultValue || [];
+            }
+            if (filter.type === 'range') {
+                defaultValue = filter.defaultValue || { min: null, max: null };
+            }
+            resetValues[filter.key] = defaultValue;
+        });
+        this.filterForm.patchValue(resetValues);
+    }
+    resetFilters() {
+        this.clearFormValues();
+        this.applyFilters();
+    }
+    setFilterValue(config) {
+        let anyValueSet = false;
+        for (const filter of config) {
+            if (filter === null || filter === void 0 ? void 0 : filter.selectedValue) {
+                this.filterForm.get(filter.key).setValue(filter.selectedValue);
+                anyValueSet = true;
+            }
+        }
+        if (anyValueSet && this.emitFiltersAfterSettingNewValues) {
+            this.applyFilters();
+        }
+    }
+}
+FilterPanelComponent.ɵfac = function FilterPanelComponent_Factory(t) { return new (t || FilterPanelComponent)(i0.ɵɵdirectiveInject(HasValuePipe)); };
+FilterPanelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterPanelComponent, selectors: [["mis-filter-panel"]], inputs: { show: "show", config: "config", emitFiltersAfterSettingNewValues: "emitFiltersAfterSettingNewValues" }, outputs: { onClose: "onClose", onApply: "onApply" }, features: [i0.ɵɵNgOnChangesFeature], 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.6056 17.8708L12.3562 14.1201L16.1068 17.8707C16.6211 18.385 17.455 18.385 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.622 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, "name", "size", "type", "click"], [3, "name", "size", "type", "disabled", "click"], ["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, "label", "selectedItems", "data", "searchEnabled", "showSelectedCount", "enableSelectAll", "hideApplyButton", "onChange"], ["width", "100%", "height", "44px", 3, "data", "searchEnabled", "selectedItem", "onChange"], [1, "checkbox-row"], ["class", "checkbox-container", 4, "ngFor", "ngForOf"], [1, "checkbox-container"], [3, "type", "checked", "valueChange"], [1, "checkbox-label"], ["type", "rounded"], ["misTzDp", "", "misInput", "", "type", "text", "readonly", "", 1, "mis-input", 3, "dpConfig", "placeholder", "value", "selectedDate", "positionX", "offsetX", "dateChange"], ["misTzDrp", "", "misInput", "", "type", "text", "readonly", "", 1, "mis-input", 3, "placeholder", "value", "positionX", "positionY", "selectedDates", "dpConfig", "dateChange"], ["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) {
+            i0.ɵɵtemplate(0, FilterPanelComponent_div_0_Template, 13, 10, "div", 0);
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.show);
+        }
+    }, dependencies: [i2.NgForOf, i2.NgIf, i3.ButtonComponent, i4.DefaultValueAccessor, i4.NumberValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.MinValidator, i4.FormGroupDirective, i4.FormControlName, i5.MultiSelectDropdownComponent, i6.DropdownComponent, i7.MisInputComponent, i7.MisInputDirective, i8.TzDatepickerDirective, i9.TzDaterangepickerDirective, i10.CheckboxComponent], styles: [".filter-panel-container[_ngcontent-%COMP%]{display:flex;flex-direction:column;height:100%;max-width:100%;min-width:20rem;position:absolute;right:0;background:white;top:0;z-index:999;box-shadow:0 0 5px #000000a6;transition:all .3s ease}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-weight:700;margin:0 1rem;flex-basis:5%}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:1.25rem}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]{cursor:pointer;border-radius:50%;transform:scale(1.4);padding:.3rem;transition:all .3s ease}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]:hover{background:#F5F5F5}.filter-panel-container[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]:active{background:#E0E0E0}.filter-panel-container[_ngcontent-%COMP%]   .mat-divider.horizontal[_ngcontent-%COMP%]{margin:1rem}.filters[_ngcontent-%COMP%]{display:flex;flex-direction:column;flex:1;row-gap:.5rem;overflow:auto;padding:0 1rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]{display:flex;flex-direction:column}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .filter-title[_ngcontent-%COMP%]{color:#6a737d;font-size:.875rem;font-weight:700;line-height:20px;letter-spacing:.25px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.8rem 0}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]{display:flex;flex-direction:row;align-items:center;gap:.5rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%]{display:block;width:8rem}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]     .mat-checkbox-inner-container{width:20px;height:20px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .checkbox-row[_ngcontent-%COMP%]     .mat-checkbox-frame{border-radius:5px}.filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   .multiselect-filter[_ngcontent-%COMP%], .filters[_ngcontent-%COMP%]   .filter[_ngcontent-%COMP%]   mis-input[_ngcontent-%COMP%]{padding:.7rem 0}.horizontal-divider[_ngcontent-%COMP%]{display:block;width:100%;height:1px;margin:.5rem 0;background:#E0E0E0}.first[_ngcontent-%COMP%]{margin-top:0}.actions[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:1rem;border-top:1px solid #E0E0E0;flex-basis:4%;padding:.5rem}.actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{font-weight:700;border-radius:.5rem;width:6rem}.no-padding[_ngcontent-%COMP%]     .container{padding:0!important}.range-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:.8rem 0}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]{display:flex;flex-direction:column}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{height:2.2rem;outline:none;border-radius:.375rem;border:1px solid #e0e0e0;width:8rem;padding:0 .5rem}.range-container[_ngcontent-%COMP%]   .range-inner-container[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{margin-bottom:.2rem}input.ng-invalid.ng-touched[_ngcontent-%COMP%]{border:1px solid red;background-color:#ffe6e6}"], data: { animation: [slideFromRight] } });
+(function () {
+    (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.6056 17.8708L12.3562 14.1201L16.1068 17.8707C16.6211 18.385 17.455 18.385 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.622 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\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\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        \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\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\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\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\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\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                  \n\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", styles: [".filter-panel-container{display:flex;flex-direction:column;height:100%;max-width:100%;min-width:20rem;position:absolute;right:0;background:white;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:#F5F5F5}.filter-panel-container .panel-header .close-icon:active{background:#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:#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:#E0E0E0}.first{margin-top:0}.actions{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:1rem;border-top:1px solid #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 #e0e0e0;width:8rem;padding:0 .5rem}.range-container .range-inner-container span{margin-bottom:.2rem}input.ng-invalid.ng-touched{border:1px solid red;background-color:#ffe6e6}\n"] }]
+        }], function () { return [{ type: HasValuePipe }]; }, { show: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], onApply: [{
+                type: Output
+            }], config: [{
+                type: Input
+            }], emitFiltersAfterSettingNewValues: [{
+                type: Input
+            }] });
+})();
+
+class FiltersModule {
+}
+FiltersModule.ɵfac = function FiltersModule_Factory(t) { return new (t || FiltersModule)(); };
+FiltersModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FiltersModule });
+FiltersModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
+        HasValuePipe
+    ], imports: [CommonModule,
+        ButtonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MultiSelectDropdownModule,
+        DropdownModule,
+        RadioButtonModule,
+        MisInputModule,
+        DatepickerModuleV2,
+        DateRangepickerModuleV2,
+        CheckboxModule] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FiltersModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ButtonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MultiSelectDropdownModule,
+                        DropdownModule,
+                        RadioButtonModule,
+                        MisInputModule,
+                        DatepickerModuleV2,
+                        DateRangepickerModuleV2,
+                        CheckboxModule
+                    ],
+                    declarations: [FilterPanelComponent, HasValuePipe],
+                    providers: [
+                        HasValuePipe
+                    ],
+                    exports: [FilterPanelComponent]
+                }]
+        }], null, null);
+})();
+(function () {
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(FiltersModule, { declarations: [FilterPanelComponent, HasValuePipe], imports: [CommonModule,
+            ButtonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MultiSelectDropdownModule,
+            DropdownModule,
+            RadioButtonModule,
+            MisInputModule,
+            DatepickerModuleV2,
+            DateRangepickerModuleV2,
+            CheckboxModule], exports: [FilterPanelComponent] });
+})();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FilterPanelComponent, FiltersModule, HasValuePipe };
+//# sourceMappingURL=mis-crystal-design-system-filter.mjs.map