cat-qw-lib 2.3.17 → 2.3.21

package/fesm2022/cat-qw-lib.mjs

@@ -35,7 +35,7 @@ import * as i4$2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import { tap, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HttpHeaders } from '@angular/common/http';
 import * as i3$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2$2 from 'primeng/inputtextarea';
@@ -5123,9 +5123,6 @@ let WidgetStore = class WidgetStore extends BaseStore {
     setIsMenu(isMenu) {
         this.update({ isMenu: isMenu });
     }
-    setIsEmptyValueHidden(isEmptyValueHidden) {
-        this.update({ isEmptyValueHidden: isEmptyValueHidden });
-    }
     setWidgetData(value) {
         this.getWidgetData$.next(value);
     }
@@ -5172,9 +5169,6 @@ class WidgetQuery extends BaseQuery {
     getIsMenu() {
         return this.select(state => state['isMenu']);
     }
-    getIsEmptyValueHidden() {
-        return this.select(state => state['isEmptyValueHidden']);
-    }
     getWidgetData() {
         return this.widgetStore.getWidgetData$.asObservable();
     }
@@ -5378,6 +5372,10 @@ class WidgetItemComponent {
         this.handleIsEmptyValueHidden();
     }
     ngOnChanges() {
+        // Handle isEmptyLabelHidden from widget model changes
+        if (this.widget && this.widget.isEmptyLabelHidden !== undefined) {
+            this.isEmptyValueHidden = this.widget.isEmptyLabelHidden;
+        }
         if (this.widgetItem && this.widgetItem.style) {
             this.keyClass = this.widgetItem.style.keyClass;
             this.valueClass = this.widgetItem.style.valueClass;
@@ -5430,16 +5428,13 @@ class WidgetItemComponent {
         });
     }
     handleIsEmptyValueHidden() {
-        this.widgetQuery.getIsEmptyValueHidden()
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((res) => {
-            if (res !== undefined) {
-                this.isEmptyValueHidden = res;
-                if (this.widgetItem && this.widgetItem.style) {
-                    this.computeValueProperties();
-                }
-            }
-        });
+        // Use isEmptyLabelHidden directly from widget model
+        if (this.widget && this.widget.isEmptyLabelHidden !== undefined) {
+            this.isEmptyValueHidden = this.widget.isEmptyLabelHidden;
+        }
+        if (this.widgetItem && this.widgetItem.style) {
+            this.computeValueProperties();
+        }
     }
     handleDynamicEvent(recordId) {
         this.widgetStore.setEventClickDetails({ recordId: recordId, isDailogShow: true });
@@ -5893,7 +5888,6 @@ class WidgetContainerComponent {
     onWidgetEventClick = new EventEmitter();
     onWidgetItemClick = new EventEmitter();
     onUpdatedWidgetList = new EventEmitter();
-    isEmptyValueHidden = false;
     destroy$ = new Subject();
     ngOnInit() {
         this.widgetQuery.getWidgetList()
@@ -5909,10 +5903,6 @@ class WidgetContainerComponent {
             this.isMenu = changes[SHARED.IS_MENU].currentValue;
             this.widgetStore.setIsMenu(this.isMenu);
         }
-        if (changes['isEmptyValueHidden']) {
-            this.isEmptyValueHidden = changes['isEmptyValueHidden'].currentValue;
-            this.widgetStore.setIsEmptyValueHidden(this.isEmptyValueHidden);
-        }
     }
     handleViewAllDetails(event) {
         this.onViewAllDetails.emit(event);
@@ -5928,7 +5918,7 @@ class WidgetContainerComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetContainerComponent, deps: [{ token: WidgetStore }, { token: WidgetQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { isMenu: "isMenu", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", widgetName: "widgetName", recordId: "recordId", onWidgetUpdate: "onWidgetUpdate", isEmptyValueHidden: "isEmptyValueHidden" }, outputs: { onViewAllDetails: "onViewAllDetails", onWidgetEventClick: "onWidgetEventClick", onWidgetItemClick: "onWidgetItemClick", onUpdatedWidgetList: "onUpdatedWidgetList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container-wrapper\">\r\n  @if(isMenu) {\r\n    <div class=\"bg-white widget-menu-container\">\r\n    <lib-widget-menu \r\n    [offerWidgetData]=\"offerWidgetData\"\r\n    [valuationWidgetData]=\"valuationWidgetData\"\r\n    (onViewAllDetails)=\"handleViewAllDetails($event)\"\r\n    (onWidgetEventClick)=\"handleWidgetEventClick($event)\"\r\n    (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\r\n    ></lib-widget-menu>\r\n    </div>\r\n  } @else {\r\n    <div class=\"bg-white widget-menu-container\">\r\n      <lib-widget-row-tile\r\n      [recordId]=\"recordId\"\r\n      [widgetName]=\"widgetName\"\r\n      [onWidgetUpdate]=\"onWidgetUpdate\"\r\n      (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\r\n      ></lib-widget-row-tile>\r\n    </div>\r\n  }\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"], dependencies: [{ kind: "component", type: WidgetMenuComponent, selector: "lib-widget-menu", inputs: ["isSidebarVisible", "offerWidgetData", "valuationWidgetData"], outputs: ["onViewAllDetails", "onWidgetEventClick", "onWidgetItemClick"] }, { kind: "component", type: WidgetRowTileComponent, selector: "lib-widget-row-tile", inputs: ["recordId", "widgetName", "onWidgetUpdate"], outputs: ["onWidgetItemClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { isMenu: "isMenu", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", widgetName: "widgetName", recordId: "recordId", onWidgetUpdate: "onWidgetUpdate" }, outputs: { onViewAllDetails: "onViewAllDetails", onWidgetEventClick: "onWidgetEventClick", onWidgetItemClick: "onWidgetItemClick", onUpdatedWidgetList: "onUpdatedWidgetList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container-wrapper\">\r\n  @if(isMenu) {\r\n    <div class=\"bg-white widget-menu-container\">\r\n    <lib-widget-menu \r\n    [offerWidgetData]=\"offerWidgetData\"\r\n    [valuationWidgetData]=\"valuationWidgetData\"\r\n    (onViewAllDetails)=\"handleViewAllDetails($event)\"\r\n    (onWidgetEventClick)=\"handleWidgetEventClick($event)\"\r\n    (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\r\n    ></lib-widget-menu>\r\n    </div>\r\n  } @else {\r\n    <div class=\"bg-white widget-menu-container\">\r\n      <lib-widget-row-tile\r\n      [recordId]=\"recordId\"\r\n      [widgetName]=\"widgetName\"\r\n      [onWidgetUpdate]=\"onWidgetUpdate\"\r\n      (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\r\n      ></lib-widget-row-tile>\r\n    </div>\r\n  }\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"], dependencies: [{ kind: "component", type: WidgetMenuComponent, selector: "lib-widget-menu", inputs: ["isSidebarVisible", "offerWidgetData", "valuationWidgetData"], outputs: ["onViewAllDetails", "onWidgetEventClick", "onWidgetItemClick"] }, { kind: "component", type: WidgetRowTileComponent, selector: "lib-widget-row-tile", inputs: ["recordId", "widgetName", "onWidgetUpdate"], outputs: ["onWidgetItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetContainerComponent, decorators: [{
             type: Component,
@@ -5953,8 +5943,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 type: Output
             }], onUpdatedWidgetList: [{
                 type: Output
-            }], isEmptyValueHidden: [{
-                type: Input
             }] } });
 
 class WidgetMenuHeaderComponent {
@@ -6320,6 +6308,7 @@ class QueueService extends BaseService {
             ...(sortBy ? { sortBy } : {}),
             ...(sortOrder ? { sortOrder } : {})
         };
+        let headers = new HttpHeaders().set('Authorization', 'Bearer ' + '305cc9b3-cd8f-4a18-b8f0-7592c08c199c');
         // Add query parameters if they exist
         if (query) {
             const queryParams = new URLSearchParams(query);
@@ -6329,7 +6318,7 @@ class QueueService extends BaseService {
         }
         const paramsString = new URLSearchParams(params).toString();
         url += (url.includes('?') ? '&' : '?') + paramsString;
-        return this.http.get(url).pipe(tap$1((response) => {
+        return this.http.get(url, { headers }).pipe(tap$1((response) => {
             if (response && response.data) {
                 this.queueStore.set(response.data);
             }
@@ -6344,7 +6333,8 @@ class QueueService extends BaseService {
      * @returns {Observable<any>} Observable emitting the fetched queue entities
      */
     getAllQueue() {
-        return this.http.get(this.apiUrl + this._pathName).pipe(tap$1((entities) => { this.queueStore.set(entities); }));
+        let headers = new HttpHeaders().set('Authorization', 'Bearer ' + '305cc9b3-cd8f-4a18-b8f0-7592c08c199c');
+        return this.http.get(this.apiUrl + this._pathName, { headers }).pipe(tap$1((entities) => { this.queueStore.set(entities); }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueService, deps: [{ token: QueueStore$1 }, { token: i1$1.HttpClient }, { token: AppConfigService }, { token: ListService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueService, providedIn: "root" });
@@ -6939,11 +6929,11 @@ class QueueFilterDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, deps: [{ token: QueueFilterDropdownService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueFilterDropdownComponent, isStandalone: false, selector: "lib-queue-filter-dropdown", inputs: { appliedFilters: "appliedFilters" }, outputs: { filterApplied: "filterApplied", filtersCleared: "filtersCleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n  <p-button\r\n    class=\"filter-btn-wrapper\"\r\n    (onClick)=\"onFilterBtnClick()\">\r\n    <div class=\"flex align-items-center\">\r\n    <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n    <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n    <p class=\"mb-0\">Filter(s) Applied</p>\r\n    <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n    </div>\r\n  </p-button>\r\n\r\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n    <h3 class=\"filter-title\">Queue Filters</h3>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n      <div class=\"filter-options\">\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\" (onClick)=\"setRiskRating('Low')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Low</p>\r\n            </div>\r\n          </p-button>\r\n\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\" (onClick)=\"setRiskRating('Medium')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Medium</p>\r\n            </div>\r\n          </p-button>\r\n\r\n           <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\" (onClick)=\"setRiskRating('High')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">High</p>\r\n            </div>\r\n          </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\" (onClick)=\"setApplicationType('BTL')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">BTL</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\" (onClick)=\"setApplicationType('HPP')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">HPP</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Category</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\" (onClick)=\"setCategory('UK')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">UK</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\" (onClick)=\"setCategory('Ex-Pat')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Ex-Pat</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\" (onClick)=\"setCategory('Intl')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Intl</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">EPC</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\" (onClick)=\"setEpc('A or B (Green)')\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">A or B (Green)</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\" (onClick)=\"setPurchaseType('Purchase')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Purchase</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Refinance')\" (onClick)=\"setPurchaseType('Refinance')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Refinance</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Not Started')\" (onClick)=\"setTaskStatus('Not Started')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Not Started</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('In-progress')\" (onClick)=\"setTaskStatus('In-progress')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">In-progress</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\" (onClick)=\"setTaskStatus('Completed')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Completed</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n      <div class=\"filter-options two-inputs\">\r\n        <input type=\"number\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\" (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n        <input type=\"number\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\" (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n      <div class=\"filter-options one-input\">\r\n        <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\" (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\" (onClick)=\"setVulnerableCustomer(true)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Yes</p>\r\n          </div>\r\n        </p-button>\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\" (onClick)=\"setVulnerableCustomer(false)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">No</p>\r\n          </div>\r\n        </p-button>\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\" (onClick)=\"setVulnerableCustomer(null)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Any</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\r\n      <div class=\"filter-options one-input\">\r\n        <!-- Expecting an array of IDs; integrate with your user list later -->\r\n        <p-multiSelect\r\n          [options]=\"underwriterOptions\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          placeholder=\"Select underwriter(s)\"\r\n          [appendTo]=\"'body'\"\r\n          [panelStyle]=\"{ zIndex: 1100 }\"\r\n          [ngModel]=\"filters.assignedUnderwriter\"\r\n          (ngModelChange)=\"setAssignedUnderwriter($event)\">\r\n        </p-multiSelect>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-actions\">\r\n      <p-button class=\"clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n        <div class=\"flex align-items-center btn-text-wrapper\">\r\n          <p class=\"mb-0 mr-2\">Clear All</p>\r\n          <i class=\"pi pi-times\"></i>\r\n        </div>\r\n    </p-button>\r\n\r\n    <p-button\r\n    class=\"apply-btn-wrapper\"\r\n    (onClick)=\"applyFilters()\">\r\n    <div class=\"flex align-items-center\">\r\n      <p class=\"mb-0\">Apply Filters</p>\r\n    </div>\r\n    </p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:390px;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueFilterDropdownComponent, isStandalone: false, selector: "lib-queue-filter-dropdown", inputs: { appliedFilters: "appliedFilters" }, outputs: { filterApplied: "filterApplied", filtersCleared: "filtersCleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n  <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\r\n    <div class=\"flex align-items-center\">\r\n      <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n      <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n      <p class=\"mb-0\">Filter(s) Applied</p>\r\n      <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n    </div>\r\n  </p-button>\r\n\r\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n    <h3 class=\"filter-title\">Queue Filters</h3>\r\n    <div class=\"grid form-grid col-12\">\r\n      <div class=\"col-12 md:col-6\">\r\n\r\n\r\n        <div class=\"filter-section\">\r\n          <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n          <div class=\"filter-options\">\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\r\n              (onClick)=\"setRiskRating('Low')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">Low</p>\r\n              </div>\r\n            </p-button>\r\n\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\r\n              (onClick)=\"setRiskRating('Medium')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">Medium</p>\r\n              </div>\r\n            </p-button>\r\n\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\r\n              (onClick)=\"setRiskRating('High')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">High</p>\r\n              </div>\r\n            </p-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12 p-0 md:col-6\">\r\n        <div class=\"filter-section\">\r\n          <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n          <div class=\"filter-options\">\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\r\n              (onClick)=\"setApplicationType('BTL')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">BTL</p>\r\n              </div>\r\n            </p-button>\r\n\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\r\n              (onClick)=\"setApplicationType('HPP')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">HPP</p>\r\n              </div>\r\n            </p-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"grid form-grid col-12\">\r\n        <div class=\"col-12 md:col-6\">\r\n          <div class=\"filter-section\">\r\n            <p class=\"filter-label m-0 mb-2\">Category</p>\r\n            <div class=\"filter-options\">\r\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\r\n                (onClick)=\"setCategory('UK')\">\r\n                <div class=\"flex align-items-center\">\r\n                  <p class=\"mb-0\">UK</p>\r\n                </div>\r\n              </p-button>\r\n\r\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\r\n                (onClick)=\"setCategory('Ex-Pat')\">\r\n                <div class=\"flex align-items-center\">\r\n                  <p class=\"mb-0\">Ex-Pat</p>\r\n                </div>\r\n              </p-button>\r\n\r\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\r\n                (onClick)=\"setCategory('Intl')\">\r\n                <div class=\"flex align-items-center\">\r\n                  <p class=\"mb-0\">Intl</p>\r\n                </div>\r\n              </p-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 md:col-6\">\r\n          <div class=\"filter-section\">\r\n            <p class=\"filter-label m-0 mb-2\">EPC</p>\r\n            <div class=\"filter-options\">\r\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\r\n                (onClick)=\"setEpc('A or B (Green)')\">\r\n                <div class=\"flex align-items-center\">\r\n                  <p class=\"mb-0\">A or B (Green)</p>\r\n                </div>\r\n              </p-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"grid form-grid col-12\">\r\n          <div class=\"col-12 md:col-6\">\r\n            <div class=\"filter-section\">\r\n              <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n              <div class=\"filter-options\">\r\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\r\n                  (onClick)=\"setPurchaseType('Purchase')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">Purchase</p>\r\n                  </div>\r\n                </p-button>\r\n\r\n                <p-button class=\"filter-option-btn-wrapper\"\r\n                  [class.selected]=\"filters.purchaseType.includes('Refinance')\"\r\n                  (onClick)=\"setPurchaseType('Refinance')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">Refinance</p>\r\n                  </div>\r\n                </p-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12 md:col-6\">\r\n            <div class=\"filter-section\">\r\n              <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n              <div class=\"filter-options\">\r\n                <p-button class=\"filter-option-btn-wrapper\"\r\n                  [class.selected]=\"filters.taskStatus.includes('Not Started')\"\r\n                  (onClick)=\"setTaskStatus('Not Started')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">Not Started</p>\r\n                  </div>\r\n                </p-button>\r\n\r\n                <p-button class=\"filter-option-btn-wrapper\"\r\n                  [class.selected]=\"filters.taskStatus.includes('In-progress')\"\r\n                  (onClick)=\"setTaskStatus('In-progress')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">In-progress</p>\r\n                  </div>\r\n                </p-button>\r\n\r\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\r\n                  (onClick)=\"setTaskStatus('Completed')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">Completed</p>\r\n                  </div>\r\n                </p-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"grid p-0 form-grid col-12\">\r\n          <div class=\"col-12 pl-3 md:col-6\">  \r\n            <div class=\"filter-section\">\r\n              <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n              <div class=\"filter-options two-inputs\">\r\n                <div class=\"grid p-0 form-grid col-12\">\r\n                  <div class=\"col-12 md:col-6\">\r\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\r\n                      (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n                  </div>\r\n                  <div class=\"col-12 md:col-6\">\r\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\r\n                      (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12 md:col-6\">\r\n            <div class=\"filter-section\">\r\n              <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n              <div class=\"filter-options one-input\">\r\n                <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\r\n                  (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid p-0 form-grid col-12\">\r\n            <div class=\"col-12 pl-4 md:col-6\">\r\n              <div class=\"filter-section\">\r\n                <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\r\n                <div class=\"filter-options\">\r\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\r\n                    (onClick)=\"setVulnerableCustomer(true)\">\r\n                    <div class=\"flex align-items-center\">\r\n                      <p class=\"mb-0\">Yes</p>\r\n                    </div>\r\n                  </p-button>\r\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\r\n                    (onClick)=\"setVulnerableCustomer(false)\">\r\n                    <div class=\"flex align-items-center\">\r\n                      <p class=\"mb-0\">No</p>\r\n                    </div>\r\n                  </p-button>\r\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\r\n                    (onClick)=\"setVulnerableCustomer(null)\">\r\n                    <div class=\"flex align-items-center\">\r\n                      <p class=\"mb-0\">Any</p>\r\n                    </div>\r\n                  </p-button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12 pl-3 md:col-6\">\r\n              <div class=\"filter-section\">\r\n                <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\r\n                <div class=\"filter-options one-input\">\r\n                  <!-- Expecting an array of IDs; integrate with your user list later -->\r\n                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\r\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\r\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\">\r\n                  </p-multiSelect>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"filter-actions w-full flex justify-content-between\">\r\n            <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n              <div class=\"flex align-items-center btn-text-wrapper\">\r\n                <p class=\"mb-0 mr-2\">Clear All</p>\r\n                <i class=\"pi pi-times\"></i>\r\n              </div>\r\n            </p-button>\r\n\r\n            <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">Apply Filters</p>\r\n              </div>\r\n            </p-button>\r\n          </div>\r\n        </div>\r\n      </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-queue-filter-dropdown', standalone: false, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n  <p-button\r\n    class=\"filter-btn-wrapper\"\r\n    (onClick)=\"onFilterBtnClick()\">\r\n    <div class=\"flex align-items-center\">\r\n    <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n    <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n    <p class=\"mb-0\">Filter(s) Applied</p>\r\n    <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n    </div>\r\n  </p-button>\r\n\r\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n    <h3 class=\"filter-title\">Queue Filters</h3>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n      <div class=\"filter-options\">\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\" (onClick)=\"setRiskRating('Low')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Low</p>\r\n            </div>\r\n          </p-button>\r\n\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\" (onClick)=\"setRiskRating('Medium')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Medium</p>\r\n            </div>\r\n          </p-button>\r\n\r\n           <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\" (onClick)=\"setRiskRating('High')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">High</p>\r\n            </div>\r\n          </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\" (onClick)=\"setApplicationType('BTL')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">BTL</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\" (onClick)=\"setApplicationType('HPP')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">HPP</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Category</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\" (onClick)=\"setCategory('UK')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">UK</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\" (onClick)=\"setCategory('Ex-Pat')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Ex-Pat</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\" (onClick)=\"setCategory('Intl')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Intl</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">EPC</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\" (onClick)=\"setEpc('A or B (Green)')\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">A or B (Green)</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\" (onClick)=\"setPurchaseType('Purchase')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Purchase</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Refinance')\" (onClick)=\"setPurchaseType('Refinance')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Refinance</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Not Started')\" (onClick)=\"setTaskStatus('Not Started')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Not Started</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('In-progress')\" (onClick)=\"setTaskStatus('In-progress')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">In-progress</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\" (onClick)=\"setTaskStatus('Completed')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Completed</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n      <div class=\"filter-options two-inputs\">\r\n        <input type=\"number\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\" (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n        <input type=\"number\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\" (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n      <div class=\"filter-options one-input\">\r\n        <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\" (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\" (onClick)=\"setVulnerableCustomer(true)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Yes</p>\r\n          </div>\r\n        </p-button>\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\" (onClick)=\"setVulnerableCustomer(false)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">No</p>\r\n          </div>\r\n        </p-button>\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\" (onClick)=\"setVulnerableCustomer(null)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Any</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\r\n      <div class=\"filter-options one-input\">\r\n        <!-- Expecting an array of IDs; integrate with your user list later -->\r\n        <p-multiSelect\r\n          [options]=\"underwriterOptions\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          placeholder=\"Select underwriter(s)\"\r\n          [appendTo]=\"'body'\"\r\n          [panelStyle]=\"{ zIndex: 1100 }\"\r\n          [ngModel]=\"filters.assignedUnderwriter\"\r\n          (ngModelChange)=\"setAssignedUnderwriter($event)\">\r\n        </p-multiSelect>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-actions\">\r\n      <p-button class=\"clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n        <div class=\"flex align-items-center btn-text-wrapper\">\r\n          <p class=\"mb-0 mr-2\">Clear All</p>\r\n          <i class=\"pi pi-times\"></i>\r\n        </div>\r\n    </p-button>\r\n\r\n    <p-button\r\n    class=\"apply-btn-wrapper\"\r\n    (onClick)=\"applyFilters()\">\r\n    <div class=\"flex align-items-center\">\r\n      <p class=\"mb-0\">Apply Filters</p>\r\n    </div>\r\n    </p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:390px;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"] }]
+            args: [{ selector: 'lib-queue-filter-dropdown', standalone: false, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n  <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\r\n    <div class=\"flex align-items-center\">\r\n      <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n      <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n      <p class=\"mb-0\">Filter(s) Applied</p>\r\n      <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n    </div>\r\n  </p-button>\r\n\r\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n    <h3 class=\"filter-title\">Queue Filters</h3>\r\n    <div class=\"grid form-grid col-12\">\r\n      <div class=\"col-12 md:col-6\">\r\n\r\n\r\n        <div class=\"filter-section\">\r\n          <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n          <div class=\"filter-options\">\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\r\n              (onClick)=\"setRiskRating('Low')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">Low</p>\r\n              </div>\r\n            </p-button>\r\n\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\r\n              (onClick)=\"setRiskRating('Medium')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">Medium</p>\r\n              </div>\r\n            </p-button>\r\n\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\r\n              (onClick)=\"setRiskRating('High')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">High</p>\r\n              </div>\r\n            </p-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12 p-0 md:col-6\">\r\n        <div class=\"filter-section\">\r\n          <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n          <div class=\"filter-options\">\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\r\n              (onClick)=\"setApplicationType('BTL')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">BTL</p>\r\n              </div>\r\n            </p-button>\r\n\r\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\r\n              (onClick)=\"setApplicationType('HPP')\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">HPP</p>\r\n              </div>\r\n            </p-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"grid form-grid col-12\">\r\n        <div class=\"col-12 md:col-6\">\r\n          <div class=\"filter-section\">\r\n            <p class=\"filter-label m-0 mb-2\">Category</p>\r\n            <div class=\"filter-options\">\r\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\r\n                (onClick)=\"setCategory('UK')\">\r\n                <div class=\"flex align-items-center\">\r\n                  <p class=\"mb-0\">UK</p>\r\n                </div>\r\n              </p-button>\r\n\r\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\r\n                (onClick)=\"setCategory('Ex-Pat')\">\r\n                <div class=\"flex align-items-center\">\r\n                  <p class=\"mb-0\">Ex-Pat</p>\r\n                </div>\r\n              </p-button>\r\n\r\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\r\n                (onClick)=\"setCategory('Intl')\">\r\n                <div class=\"flex align-items-center\">\r\n                  <p class=\"mb-0\">Intl</p>\r\n                </div>\r\n              </p-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-12 md:col-6\">\r\n          <div class=\"filter-section\">\r\n            <p class=\"filter-label m-0 mb-2\">EPC</p>\r\n            <div class=\"filter-options\">\r\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\r\n                (onClick)=\"setEpc('A or B (Green)')\">\r\n                <div class=\"flex align-items-center\">\r\n                  <p class=\"mb-0\">A or B (Green)</p>\r\n                </div>\r\n              </p-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"grid form-grid col-12\">\r\n          <div class=\"col-12 md:col-6\">\r\n            <div class=\"filter-section\">\r\n              <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n              <div class=\"filter-options\">\r\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\r\n                  (onClick)=\"setPurchaseType('Purchase')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">Purchase</p>\r\n                  </div>\r\n                </p-button>\r\n\r\n                <p-button class=\"filter-option-btn-wrapper\"\r\n                  [class.selected]=\"filters.purchaseType.includes('Refinance')\"\r\n                  (onClick)=\"setPurchaseType('Refinance')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">Refinance</p>\r\n                  </div>\r\n                </p-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12 md:col-6\">\r\n            <div class=\"filter-section\">\r\n              <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n              <div class=\"filter-options\">\r\n                <p-button class=\"filter-option-btn-wrapper\"\r\n                  [class.selected]=\"filters.taskStatus.includes('Not Started')\"\r\n                  (onClick)=\"setTaskStatus('Not Started')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">Not Started</p>\r\n                  </div>\r\n                </p-button>\r\n\r\n                <p-button class=\"filter-option-btn-wrapper\"\r\n                  [class.selected]=\"filters.taskStatus.includes('In-progress')\"\r\n                  (onClick)=\"setTaskStatus('In-progress')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">In-progress</p>\r\n                  </div>\r\n                </p-button>\r\n\r\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\r\n                  (onClick)=\"setTaskStatus('Completed')\">\r\n                  <div class=\"flex align-items-center\">\r\n                    <p class=\"mb-0\">Completed</p>\r\n                  </div>\r\n                </p-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"grid p-0 form-grid col-12\">\r\n          <div class=\"col-12 pl-3 md:col-6\">  \r\n            <div class=\"filter-section\">\r\n              <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n              <div class=\"filter-options two-inputs\">\r\n                <div class=\"grid p-0 form-grid col-12\">\r\n                  <div class=\"col-12 md:col-6\">\r\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\r\n                      (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n                  </div>\r\n                  <div class=\"col-12 md:col-6\">\r\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\r\n                      (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12 md:col-6\">\r\n            <div class=\"filter-section\">\r\n              <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n              <div class=\"filter-options one-input\">\r\n                <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\r\n                  (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"grid p-0 form-grid col-12\">\r\n            <div class=\"col-12 pl-4 md:col-6\">\r\n              <div class=\"filter-section\">\r\n                <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\r\n                <div class=\"filter-options\">\r\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\r\n                    (onClick)=\"setVulnerableCustomer(true)\">\r\n                    <div class=\"flex align-items-center\">\r\n                      <p class=\"mb-0\">Yes</p>\r\n                    </div>\r\n                  </p-button>\r\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\r\n                    (onClick)=\"setVulnerableCustomer(false)\">\r\n                    <div class=\"flex align-items-center\">\r\n                      <p class=\"mb-0\">No</p>\r\n                    </div>\r\n                  </p-button>\r\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\r\n                    (onClick)=\"setVulnerableCustomer(null)\">\r\n                    <div class=\"flex align-items-center\">\r\n                      <p class=\"mb-0\">Any</p>\r\n                    </div>\r\n                  </p-button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12 pl-3 md:col-6\">\r\n              <div class=\"filter-section\">\r\n                <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\r\n                <div class=\"filter-options one-input\">\r\n                  <!-- Expecting an array of IDs; integrate with your user list later -->\r\n                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\r\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\r\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\">\r\n                  </p-multiSelect>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"filter-actions w-full flex justify-content-between\">\r\n            <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n              <div class=\"flex align-items-center btn-text-wrapper\">\r\n                <p class=\"mb-0 mr-2\">Clear All</p>\r\n                <i class=\"pi pi-times\"></i>\r\n              </div>\r\n            </p-button>\r\n\r\n            <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\r\n              <div class=\"flex align-items-center\">\r\n                <p class=\"mb-0\">Apply Filters</p>\r\n              </div>\r\n            </p-button>\r\n          </div>\r\n        </div>\r\n      </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: QueueFilterDropdownService }], propDecorators: { dropdownPanel: [{
                 type: ViewChild,
                 args: ['dropdownPanel', { static: false }]