cat-qw-lib 2.6.61 → 2.6.66

package/fesm2022/cat-qw-lib.mjs

@@ -198,8 +198,6 @@ class SHARED {
     static REFERRED = 'referred';
     static FINANCE = 'finance';
     static TOTAL_FINANCE_AMOUNT = 'totalFinanceAmount';
-    static BASE_PRICE = 'basePrice';
-    static MONTHLY_PAYMENT = 'monthlyPayment';
     static VALUATION_STATUS = 'valuationStatus';
     static TASKS = 'tasks';
     static TASK_BROKER_LABEL = 'B';
@@ -499,7 +497,7 @@ const queuePriorityOrder = ["All Applications", "Unassigned", "Assigned To Me"];
 const QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST = {
     brokerName: 'w-3',
     securityAddress: 'w-3',
-    applicants: 'w-2',
+    applicants: 'w-4',
     finance: 'w-1',
     totalFinanceAmount: 'w-2',
     valuationStatus: 'w-2',
@@ -508,10 +506,10 @@ const QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST = {
     appId: 'w-2',
     age: 'w-1',
     tasks: 'w-1',
-    productName: 'w-2',
-    basePrice: 'w-3',
-    monthlyPayment: 'w-3',
-    submittedDate: 'w-4'
+    productName: 'w-4',
+    baseRate: 'w-2',
+    monthlyPayment: 'w-2',
+    submittedDate: 'w-3'
 };
 const FIELD_DISPLAY_NAMES = {
     riskRating: 'Risk Rating',
@@ -528,7 +526,7 @@ const FIELD_DISPLAY_NAMES = {
     lending: 'Type',
     tasks: 'Tasks',
     productName: 'Product',
-    basePrice: 'Base Price',
+    baseRate: 'Base Rate',
     monthlyPayment: 'Monthly Payment',
     submittedDate: 'Submitted Date'
 };
@@ -539,7 +537,6 @@ const QUEUE_RECORD_TABLE_COLUMN_ORDER = [
     'applicants', // Applicant(s)
     'brokerName',
     'finance',
-    'productName', // Product
     'totalFinanceAmount', // Total Finance
     'securityAddress',
     'pending',
@@ -547,7 +544,8 @@ const QUEUE_RECORD_TABLE_COLUMN_ORDER = [
     'valuationStatus',
     'lending',
     'tasks',
-    'basePrice', // Base Price
+    'productName', // Product
+    'baseRate', // Base Rate
     'monthlyPayment', // Monthly Payment
     'submittedDate' // Submitted Date
 ];
@@ -2374,16 +2372,6 @@ var columnStyles = {
 		textNgClass: "text-black font-semibold",
 		isShowSortIcon: false
 	},
-	basePrice: {
-		containerNgClass: "",
-		textNgClass: "text-black font-semibold",
-		isShowSortIcon: false
-	},
-	monthlyPayment: {
-		containerNgClass: "",
-		textNgClass: "text-black font-semibold",
-		isShowSortIcon: false
-	},
 	pending: {
 		containerNgClass: "rowData['pending'] && rowData['pending'] !== '' ? 'queue-chip queue-chip--neutral' : ''",
 		textNgClass: "text-black font-semibold",
@@ -7291,19 +7279,6 @@ class QueueRecordTableBuilderService extends TableBuilder {
             return '';
         return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
     }
-    /**
-     * GBP display for queue currency columns: £ with thousands separator and 2 decimals; null/empty -> '-'.
-     */
-    formatQueueCurrencyValue(value) {
-        if (value == null || value === '' || String(value).toLowerCase() === SHARED.null) {
-            return SHARED.DASH;
-        }
-        const num = Number(value);
-        if (!Number.isFinite(num)) {
-            return SHARED.DASH;
-        }
-        return `£${num.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-    }
     getColumnOrder(isReferredQueue) {
         if (!isReferredQueue) {
             return QUEUE_RECORD_TABLE_COLUMN_ORDER.filter(field => field !== SHARED.REFERRED_DATE);
@@ -7317,12 +7292,8 @@ class QueueRecordTableBuilderService extends TableBuilder {
         if (records.length === 0) {
             return table;
         }
-        const normalizedRecords = records.map((r) => ({
-            ...r,
-            [SHARED.BASE_PRICE]: r[SHARED.BASE_PRICE] ?? r['baseRate']
-        }));
         // Get the first record to determine available fields
-        const firstRecord = normalizedRecords[0];
+        const firstRecord = records[0];
         const excludedFields = [
             SHARED._ID,
             SHARED.COMPANY_NAME,
@@ -7338,7 +7309,7 @@ class QueueRecordTableBuilderService extends TableBuilder {
         let availableFields = columnOrder
             .filter(field => !excludedFields.includes(field) && firstRecord.hasOwnProperty(field));
         const columnWidths = QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST;
-        table.records = normalizedRecords.map((apiRecord) => {
+        table.records = records.map((apiRecord, index) => {
             // Format riskRating: convert "Medium" to "Med" for display
             const formattedRiskRating = apiRecord.riskRating === 'Medium' ? 'Med' : apiRecord.riskRating;
             const record = {
@@ -7447,10 +7418,13 @@ class QueueRecordTableBuilderService extends TableBuilder {
                         cellValue = value;
                     }
                 }
-                else if (field === SHARED.TOTAL_FINANCE_AMOUNT ||
-                    field === SHARED.BASE_PRICE ||
-                    field === SHARED.MONTHLY_PAYMENT) {
-                    cellValue = this.formatQueueCurrencyValue(value);
+                else if (field === SHARED.TOTAL_FINANCE_AMOUNT) {
+                    if (value != null && value !== '') {
+                        cellValue = `£${Number(value).toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+                    }
+                    else {
+                        cellValue = SHARED.EMPTY;
+                    }
                 }
                 else if (field === SHARED.SECURITY_ADDRESS && value) {
                     const line1 = value.addressLine1 || '';
@@ -8047,11 +8021,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\">\n  <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\n    <div class=\"flex align-items-center\">\n      <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\n      <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\n      <p class=\"mb-0\">Filter(s) Applied</p>\n      <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\n    </div>\n  </p-button>\n\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\n    <h3 class=\"filter-title\">Queue Filters</h3>\n    <div class=\"grid form-grid col-12\">\n      <div class=\"col-12 md:col-6\">\n\n\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\n              (onClick)=\"setRiskRating('Low')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Low</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\n              (onClick)=\"setRiskRating('Medium')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Medium</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\n              (onClick)=\"setRiskRating('High')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">High</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 p-0 md:col-6\">\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Application Type</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\n              (onClick)=\"setApplicationType('BTL')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">BTL</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\n              (onClick)=\"setApplicationType('HPP')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">HPP</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"grid form-grid col-12\">\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">Category</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\n                (onClick)=\"setCategory('UK')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">UK</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\n                (onClick)=\"setCategory('Ex-Pat')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Ex-Pat</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\n                (onClick)=\"setCategory('Intl')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Intl</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">EPC</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\n                (onClick)=\"setEpc('A or B (Green)')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">A or B (Green)</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"grid form-grid col-12\">\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\n                  (onClick)=\"setPurchaseType('Purchase')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Purchase</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.purchaseType.includes('Refinance')\"\n                  (onClick)=\"setPurchaseType('Refinance')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Refinance</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Task Status</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('Not Started')\"\n                  (onClick)=\"setTaskStatus('Not Started')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Not Started</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('In-progress')\"\n                  (onClick)=\"setTaskStatus('In-progress')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">In-progress</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\n                  (onClick)=\"setTaskStatus('Completed')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Completed</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"grid p-0 form-grid col-12\">\n          <div class=\"col-12 pl-3 md:col-6\">  \n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\n              <div class=\"filter-options two-inputs\">\n                <div class=\"grid p-0 form-grid col-12\">\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\n                      (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\n                  </div>\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\n                      (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Pending Days</p>\n              <div class=\"filter-options one-input\">\n                <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\n                  (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"grid p-0 form-grid col-12\">\n            <div class=\"col-12 pl-4 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\n                <div class=\"filter-options\">\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\n                    (onClick)=\"setVulnerableCustomer(true)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Yes</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\n                    (onClick)=\"setVulnerableCustomer(false)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">No</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\n                    (onClick)=\"setVulnerableCustomer(null)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Any</p>\n                    </div>\n                  </p-button>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 pl-3 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\n                <div class=\"filter-options one-input\">\n                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\n                    [filter]=\"true\" [loading]=\"loadingUnderwriters\"\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\n                    (onFilter)=\"onUnderwriterFilter($event)\">\n                  </p-multiSelect>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"filter-actions w-full flex justify-content-between\">\n            <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\n              <div class=\"flex align-items-center btn-text-wrapper\">\n                <p class=\"mb-0 mr-2\">Clear All</p>\n                <i class=\"pi pi-times\"></i>\n              </div>\n            </p-button>\n\n            <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Apply Filters</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\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 #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;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                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\r\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\r\n                    [filter]=\"true\" [loading]=\"loadingUnderwriters\"\r\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\r\n                    (onFilter)=\"onUnderwriterFilter($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 #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;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\">\n  <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\n    <div class=\"flex align-items-center\">\n      <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\n      <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\n      <p class=\"mb-0\">Filter(s) Applied</p>\n      <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\n    </div>\n  </p-button>\n\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\n    <h3 class=\"filter-title\">Queue Filters</h3>\n    <div class=\"grid form-grid col-12\">\n      <div class=\"col-12 md:col-6\">\n\n\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\n              (onClick)=\"setRiskRating('Low')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Low</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\n              (onClick)=\"setRiskRating('Medium')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Medium</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\n              (onClick)=\"setRiskRating('High')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">High</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 p-0 md:col-6\">\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Application Type</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\n              (onClick)=\"setApplicationType('BTL')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">BTL</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\n              (onClick)=\"setApplicationType('HPP')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">HPP</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"grid form-grid col-12\">\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">Category</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\n                (onClick)=\"setCategory('UK')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">UK</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\n                (onClick)=\"setCategory('Ex-Pat')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Ex-Pat</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\n                (onClick)=\"setCategory('Intl')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Intl</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">EPC</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\n                (onClick)=\"setEpc('A or B (Green)')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">A or B (Green)</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"grid form-grid col-12\">\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\n                  (onClick)=\"setPurchaseType('Purchase')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Purchase</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.purchaseType.includes('Refinance')\"\n                  (onClick)=\"setPurchaseType('Refinance')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Refinance</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Task Status</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('Not Started')\"\n                  (onClick)=\"setTaskStatus('Not Started')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Not Started</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('In-progress')\"\n                  (onClick)=\"setTaskStatus('In-progress')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">In-progress</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\n                  (onClick)=\"setTaskStatus('Completed')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Completed</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"grid p-0 form-grid col-12\">\n          <div class=\"col-12 pl-3 md:col-6\">  \n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\n              <div class=\"filter-options two-inputs\">\n                <div class=\"grid p-0 form-grid col-12\">\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\n                      (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\n                  </div>\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\n                      (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Pending Days</p>\n              <div class=\"filter-options one-input\">\n                <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\n                  (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"grid p-0 form-grid col-12\">\n            <div class=\"col-12 pl-4 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\n                <div class=\"filter-options\">\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\n                    (onClick)=\"setVulnerableCustomer(true)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Yes</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\n                    (onClick)=\"setVulnerableCustomer(false)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">No</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\n                    (onClick)=\"setVulnerableCustomer(null)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Any</p>\n                    </div>\n                  </p-button>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 pl-3 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\n                <div class=\"filter-options one-input\">\n                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\n                    [filter]=\"true\" [loading]=\"loadingUnderwriters\"\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\n                    (onFilter)=\"onUnderwriterFilter($event)\">\n                  </p-multiSelect>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"filter-actions w-full flex justify-content-between\">\n            <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\n              <div class=\"flex align-items-center btn-text-wrapper\">\n                <p class=\"mb-0 mr-2\">Clear All</p>\n                <i class=\"pi pi-times\"></i>\n              </div>\n            </p-button>\n\n            <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Apply Filters</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\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 #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;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                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\r\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\r\n                    [filter]=\"true\" [loading]=\"loadingUnderwriters\"\r\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\r\n                    (onFilter)=\"onUnderwriterFilter($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 #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;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 }]