tango-app-ui-shared 3.0.49-dev → 3.0.51-dev

package/fesm2022/tango-app-ui-shared.mjs

@@ -1877,7 +1877,6 @@ class ClassicComponent {
         }
     }
     opendropdown(e) {
-        console.log(687);
         e.stopPropagation();
         this.Opendropdown = !this.Opendropdown;
     }
@@ -1902,7 +1901,7 @@ class ClassicComponent {
     //   }
     // }
     searchData(event, i) {
-        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(event.target.value, "i").test(item.clientName));
+        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(event.target.value, "i").test(item.clientName) || this.selectedValuesArray[i].includes(item.clientName));
         this.dataObject[i].Issues = filteredIssues;
         if (filteredIssues.length) {
             this.noFilter = false;
@@ -1960,7 +1959,7 @@ class ClassicComponent {
         var selectedValue = [];
         for (let i = 0; i < this.selectedValuesArray.length; i++) {
             const selectedValues = this.selectedValuesArray[i];
-            const issues = this.dataObject[i].Issues;
+            const issues = this.dummyArray[i].Issues; // const issues = this.dataObject[i].Issues;
             if (selectedValues) {
                 this.selectedValuesArray[i] = selectedValues.map((selectedId) => {
                     const issue = issues.find((issueItem) => issueItem.clientId === selectedId);
@@ -2214,7 +2213,6 @@ class ClientSettingsComponent {
                 if (e) {
                     this.clientList = e.data.result;
                     const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-                    console.log(headerFilters.client);
                     if (headerFilters.client) {
                         this.clientList.find((obj) => {
                             if (obj.clientId === headerFilters.client) {
@@ -3721,11 +3719,11 @@ class PaginationComponent {
         this.pageSizeChange.emit(this.pageSize);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaginationComponent, selector: "lib-pagination", inputs: { collection: "collection", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", directionLinks: "directionLinks", pageSize: "pageSize", paginationSizes: "paginationSizes" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"container d-flex justify-content-center\">\r\n    <div class=\"mt-4 text-center\">\r\n      <span class=\"sub-title me-3\">Displaying</span>\r\n      <select class=\"border-val\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" >\r\n        <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\" >{{ size }}</option>\r\n        <!-- [disabled]=\"disableOption(size)\" -->\r\n      </select>\r\n      <span class=\"ms-3 sub-title\">out of {{ totalItems }} items</span>\r\n    </div>\r\n  \r\n    <div class=\"text-center\">\r\n      <ul>\r\n        <li *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n          <!-- Your item template here -->\r\n        </li>\r\n      </ul>\r\n      <pagination-controls \r\n        (pageChange)=\"onPageChange($event); currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n      </pagination-controls>\r\n    </div>\r\n  </div>\r\n  ", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:50px;height:45px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "pipe", type: i3$2.PaginatePipe, name: "paginate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaginationComponent, selector: "lib-pagination", inputs: { collection: "collection", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", directionLinks: "directionLinks", pageSize: "pageSize", paginationSizes: "paginationSizes" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<div class=\"container d-flex justify-content-center\">\r\n    <div class=\"mt-4 text-center\">\r\n      <span class=\"sub-title me-3\">Displaying</span>\r\n      <select class=\"border-val\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" >\r\n        <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\" >{{ size }}</option>\r\n        <!-- [disabled]=\"disableOption(size)\" -->\r\n      </select>\r\n      <span class=\"ms-3 sub-title\">out of {{ totalItems }} items</span>\r\n    </div>\r\n  \r\n    <div class=\"text-center\">\r\n      <ul>\r\n        <li *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n          <!-- Your item template here -->\r\n        </li>\r\n      </ul>\r\n      <pagination-controls \r\n        (pageChange)=\"onPageChange($event); currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n      </pagination-controls>\r\n    </div>\r\n  </div>\r\n  ", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:50px;height:45px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a:hover,.ngx-pagination button:hover{background:#e6e6e6;padding:12px!important;width:50px;height:45px;border-radius:8px;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "pipe", type: i3$2.PaginatePipe, name: "paginate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-pagination', template: "<div class=\"container d-flex justify-content-center\">\r\n    <div class=\"mt-4 text-center\">\r\n      <span class=\"sub-title me-3\">Displaying</span>\r\n      <select class=\"border-val\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" >\r\n        <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\" >{{ size }}</option>\r\n        <!-- [disabled]=\"disableOption(size)\" -->\r\n      </select>\r\n      <span class=\"ms-3 sub-title\">out of {{ totalItems }} items</span>\r\n    </div>\r\n  \r\n    <div class=\"text-center\">\r\n      <ul>\r\n        <li *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n          <!-- Your item template here -->\r\n        </li>\r\n      </ul>\r\n      <pagination-controls \r\n        (pageChange)=\"onPageChange($event); currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n      </pagination-controls>\r\n    </div>\r\n  </div>\r\n  ", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:50px;height:45px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"] }]
+            args: [{ selector: 'lib-pagination', template: "<div class=\"container d-flex justify-content-center\">\r\n    <div class=\"mt-4 text-center\">\r\n      <span class=\"sub-title me-3\">Displaying</span>\r\n      <select class=\"border-val\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" >\r\n        <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\" >{{ size }}</option>\r\n        <!-- [disabled]=\"disableOption(size)\" -->\r\n      </select>\r\n      <span class=\"ms-3 sub-title\">out of {{ totalItems }} items</span>\r\n    </div>\r\n  \r\n    <div class=\"text-center\">\r\n      <ul>\r\n        <li *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n          <!-- Your item template here -->\r\n        </li>\r\n      </ul>\r\n      <pagination-controls \r\n        (pageChange)=\"onPageChange($event); currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n      </pagination-controls>\r\n    </div>\r\n  </div>\r\n  ", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:50px;height:45px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a:hover,.ngx-pagination button:hover{background:#e6e6e6;padding:12px!important;width:50px;height:45px;border-radius:8px;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"] }]
         }], propDecorators: { collection: [{
                 type: Input
             }], itemsPerPage: [{
@@ -3750,6 +3748,7 @@ class FiltersComponent {
     elementRef;
     renderer;
     router;
+    cd;
     dataObject = [];
     appliedFilters = new EventEmitter();
     Opendropdown = false;
@@ -3766,10 +3765,11 @@ class FiltersComponent {
     productModule;
     product;
     selectedProductCount;
-    constructor(elementRef, renderer, router) {
+    constructor(elementRef, renderer, router, cd) {
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.router = router;
+        this.cd = cd;
     }
     onClick(event) {
         const target = event.target;
@@ -3817,7 +3817,7 @@ class FiltersComponent {
     }
     toggleCheckbox(event, issue, index, subIndex) {
         const currentIssues = this.dataObject[index].Issues;
-        this.selectedValuesArray[index] = this.selectedValuesArray[index] || [];
+        this.selectedValuesArray[index] = this.selectedValuesArray[index];
         const selectedValues = this.selectedValuesArray[index]; // Retrieve selected values array for the current dropdown index
         if (issue === 'Select All') {
             const checkedState = event.target.checked;
@@ -3838,7 +3838,7 @@ class FiltersComponent {
                 this.selectedValuesArray[index].push(checkedData);
             }
             else {
-                this.selectedValuesArray[index] = this.selectedValuesArray[index].filter((el) => el?.checked === true);
+                this.selectedValuesArray[index] = this.selectedValuesArray[index].filter((el) => el?.checked === true && el?.text != issue);
             }
         }
         const selectAllId = `selectall${index}`;
@@ -3871,7 +3871,16 @@ class FiltersComponent {
     }
     searchData(event, i) {
         const searchTerm = event.target.value.trim(); // Trim whitespace
-        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(searchTerm, 'i').test(item.text));
+        const filteredIssues = this.dummyArray[i].Issues.filter((item) => {
+            let findChecked = this.selectedValuesArray[i].find((issue) => issue.text == item.text);
+            if (findChecked) {
+                item.checked = findChecked?.checked ? findChecked?.checked : false;
+            }
+            else {
+                item.checked = false;
+            }
+            return new RegExp(searchTerm, 'i').test(item.text);
+        });
         this.dataObject[i].Issues = filteredIssues;
         if (filteredIssues.length) {
             this.noFilter = false;
@@ -3879,6 +3888,7 @@ class FiltersComponent {
         else {
             this.noFilter = true;
         }
+        this.cd.detectChanges();
     }
     Apply() {
         this.Opendropdown = false;
@@ -3887,13 +3897,13 @@ class FiltersComponent {
         });
         this.appliedFilters.emit(this.responseArray);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters", inputs: { dataObject: "dataObject" }, outputs: { appliedFilters: "appliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n                   \r\n    <button type=\"button\" (click)=\"opendropdown($event)\"\r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    <div class=\"card p-5 dropdown1 position-absolute z-2 end-0\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div *ngIf=\"item.type !== 'single'\">\r\n                <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                    <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                     <span>{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n                </div>\r\n                <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                    <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                          (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n                        <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                            Select All\r\n                        </label>\r\n                    </div>\r\n         \r\n                    <div class=\"border border-gray mt-3 \"></div>\r\n         \r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"dataObject[i].selectedValue\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"issue.checked\"\r\n                         (change)=\"toggleCheckbox($event,issue.text,i,j)\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"item.type === 'single'\" class=\"position-relative w-100\">\r\n                <button type=\"button\" (click)=\"openDropdown($event,i)\"\r\n                class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg></span>\r\n                </button>\r\n                <div *ngIf=\"item.isOpen\" class=\"card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0\">\r\n                        <ul *ngFor=\"let item of item.Issues; let j = index\" class=\"list-unstyled\">\r\n                        <li [ngClass]=\"selectedValuesArray[i]?.text === item.text ? 'active' : ''\" class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem($event,i,j)\">{{item.text}}</li>\r\n                        </ul>\r\n                </div>\r\n              </div>\r\n        </div>\r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .items:hover,.dropdown1 .tems.focus,.dropdown1 .items.active,.dropdown1 .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-filters', template: "<div class=\"position-relative\">\r\n                   \r\n    <button type=\"button\" (click)=\"opendropdown($event)\"\r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    <div class=\"card p-5 dropdown1 position-absolute z-2 end-0\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div *ngIf=\"item.type !== 'single'\">\r\n                <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                    <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                     <span>{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n                </div>\r\n                <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                    <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                          (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n                        <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                            Select All\r\n                        </label>\r\n                    </div>\r\n         \r\n                    <div class=\"border border-gray mt-3 \"></div>\r\n         \r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"dataObject[i].selectedValue\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"issue.checked\"\r\n                         (change)=\"toggleCheckbox($event,issue.text,i,j)\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"item.type === 'single'\" class=\"position-relative w-100\">\r\n                <button type=\"button\" (click)=\"openDropdown($event,i)\"\r\n                class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg></span>\r\n                </button>\r\n                <div *ngIf=\"item.isOpen\" class=\"card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0\">\r\n                        <ul *ngFor=\"let item of item.Issues; let j = index\" class=\"list-unstyled\">\r\n                        <li [ngClass]=\"selectedValuesArray[i]?.text === item.text ? 'active' : ''\" class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem($event,i,j)\">{{item.text}}</li>\r\n                        </ul>\r\n                </div>\r\n              </div>\r\n        </div>\r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .items:hover,.dropdown1 .tems.focus,.dropdown1 .items.active,.dropdown1 .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }], propDecorators: { dataObject: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { dataObject: [{
                 type: Input
             }], appliedFilters: [{
                 type: Output