cat-qw-lib 2.5.24 → 2.5.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -206,6 +206,7 @@ class SHARED {
206
206
  static TASK_COMPLETION_PERCENT = 'taskCompletionPercent';
207
207
  static RISK_RATING = 'riskRating';
208
208
  static LENDING = 'lending';
209
+ static UNASSIGNED_UNDERWRITER_ID = 'unassigned';
209
210
  }
210
211
  const widgetLayoutTypeList = [
211
212
  { name: 'Row', value: 'row' },
@@ -496,7 +497,6 @@ const QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST = {
496
497
  applicants: 'w-3',
497
498
  finance: 'w-3',
498
499
  valuationStatus: 'w-2',
499
- assignedTo: 'w-3',
500
500
  sla: 'w-3',
501
501
  appId: 'w-2',
502
502
  tasks: 'w-2'
@@ -509,7 +509,6 @@ const FIELD_DISPLAY_NAMES = {
509
509
  finance: 'Finance Amount',
510
510
  securityAddress: 'Security',
511
511
  valuationStatus: 'Val status',
512
- assignedTo: 'Assigned To',
513
512
  sla: 'SLA',
514
513
  pending: 'Age',
515
514
  lending: 'Type',
@@ -524,7 +523,6 @@ const QUEUE_RECORD_TABLE_COLUMN_ORDER = [
524
523
  'finance',
525
524
  'securityAddress',
526
525
  'pending',
527
- 'assignedTo',
528
526
  'sla',
529
527
  'valuationStatus',
530
528
  'lending',
@@ -2397,13 +2395,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
2397
2395
  type: Input
2398
2396
  }] } });
2399
2397
 
2400
- // Constant for unassigned underwriter filter value
2401
- const UNASSIGNED_UNDERWRITER_ID = 'unassigned';
2402
2398
  /**
2403
2399
  *
2404
2400
  */
2405
2401
  class QueueFilterDropdownService extends BaseService {
2406
2402
  configService;
2403
+ searchSubject = new Subject();
2407
2404
  constructor(http, configService, store, listService) {
2408
2405
  super(http, store, configService, listService);
2409
2406
  this.configService = configService;
@@ -2619,8 +2616,8 @@ class QueueFilterDropdownService extends BaseService {
2619
2616
  }
2620
2617
  if (filters.assignedUnderwriter && filters.assignedUnderwriter.length > 0) {
2621
2618
  // Separate approach: Use unassigned boolean param and underwriterId for actual IDs
2622
- const hasUnassigned = filters.assignedUnderwriter.includes(UNASSIGNED_UNDERWRITER_ID);
2623
- const realUnderwriterIds = filters.assignedUnderwriter.filter(id => id !== UNASSIGNED_UNDERWRITER_ID);
2619
+ const hasUnassigned = filters.assignedUnderwriter.includes(SHARED.UNASSIGNED_UNDERWRITER_ID);
2620
+ const realUnderwriterIds = filters.assignedUnderwriter.filter(id => id !== SHARED.UNASSIGNED_UNDERWRITER_ID);
2624
2621
  // Set unassigned parameter if "unassigned" is selected
2625
2622
  if (hasUnassigned) {
2626
2623
  filterParams['unassigned'] = 'true';
@@ -2654,6 +2651,22 @@ class QueueFilterDropdownService extends BaseService {
2654
2651
  return of([]);
2655
2652
  }));
2656
2653
  }
2654
+ /**
2655
+ * Triggers a search for underwriters with debounce
2656
+ * @param {string} searchKey - The search term to filter underwriters
2657
+ */
2658
+ searchUnderwriters(searchKey = SHARED.EMPTY) {
2659
+ this.searchSubject.next(searchKey);
2660
+ }
2661
+ /**
2662
+ * Returns an Observable that emits underwriter options with debounce and distinctUntilChanged
2663
+ * @returns {Observable<UnderwriterOption[]>} Observable of underwriter options array
2664
+ */
2665
+ getUnderwritersSearchObservable() {
2666
+ return this.searchSubject.pipe(debounceTime$1(300), distinctUntilChanged$1(), switchMap((searchKey) => {
2667
+ return this.getUnderwritersList(searchKey || SHARED.EMPTY);
2668
+ }));
2669
+ }
2657
2670
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownService, deps: [{ token: i1$1.HttpClient }, { token: AppConfigService }, { token: BaseStore }, { token: ListService }], target: i0.ɵɵFactoryTarget.Injectable });
2658
2671
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownService, providedIn: 'root' });
2659
2672
  }
@@ -6607,6 +6620,7 @@ class QueueService extends BaseService {
6607
6620
  /**
6608
6621
  * Fetches paginated queue records using the provided apiConfig URL with search and pagination support.
6609
6622
  * This is the unified method used for both initial data loading and search functionality.
6623
+ * Uses POST method with underwriterIds and unassigned in body, other params in query string.
6610
6624
  * @param {string} apiConfig - The full API endpoint to fetch records for the selected queue
6611
6625
  * @param {string} [searchKey] - Optional search term
6612
6626
  * @param {number} [page] - Page number (default: 1)
@@ -6625,16 +6639,34 @@ class QueueService extends BaseService {
6625
6639
  ...(sortBy ? { sortBy } : {}),
6626
6640
  ...(sortOrder ? { sortOrder } : {})
6627
6641
  };
6642
+ // Prepare body for POST request - underwriterIds and unassigned go in body
6643
+ const body = {};
6628
6644
  // Add query parameters if they exist
6629
6645
  if (query) {
6630
6646
  const queryParams = new URLSearchParams(query);
6631
6647
  queryParams.forEach((value, key) => {
6632
- params[key] = value;
6648
+ // Extract underwriterIds and unassigned for body, keep others in params
6649
+ if (key === 'underwriterId') {
6650
+ // Convert comma-separated string to array for body
6651
+ const underwriterIds = value.split(',').filter(id => id.trim() !== '');
6652
+ if (underwriterIds.length > 0) {
6653
+ body.underwriterIds = underwriterIds;
6654
+ }
6655
+ }
6656
+ else if (key === 'unassigned') {
6657
+ // Convert string to boolean for body
6658
+ body.unassigned = value === 'true';
6659
+ }
6660
+ else {
6661
+ // Keep all other params in query string (including 'all' flag)
6662
+ params[key] = value;
6663
+ }
6633
6664
  });
6634
6665
  }
6635
6666
  const paramsString = new URLSearchParams(params).toString();
6636
6667
  url += (url.includes('?') ? '&' : '?') + paramsString;
6637
- return this.http.get(url).pipe(tap$1((response) => {
6668
+ // Use POST method with body containing underwriterIds and unassigned
6669
+ return this.http.post(url, body).pipe(tap$1((response) => {
6638
6670
  if (response && response.data) {
6639
6671
  this.queueStore.set(response.data);
6640
6672
  }
@@ -6776,6 +6808,7 @@ class QueueRecordTableBuilderService extends TableBuilder {
6776
6808
  SHARED._ID,
6777
6809
  SHARED.COMPANY_NAME,
6778
6810
  SHARED.APPLICATION_TYPE,
6811
+ SHARED.ASSIGNED_TO,
6779
6812
  SHARED.TASK_COMPLETION_PERCENT,
6780
6813
  SHARED.RISK_RATING,
6781
6814
  SHARED.LENDING,
@@ -7264,7 +7297,6 @@ class QueueFilterDropdownComponent {
7264
7297
  loadingUnderwriters = false;
7265
7298
  // Cache filters for template bindings to avoid repeated object creation
7266
7299
  filters;
7267
- searchSubject = new Subject();
7268
7300
  searchSubscription;
7269
7301
  appliedFilters = {}; // Input to sync with container's applied filters
7270
7302
  filterApplied = new EventEmitter();
@@ -7280,11 +7312,10 @@ class QueueFilterDropdownComponent {
7280
7312
  }
7281
7313
  }
7282
7314
  setupSearchSubscription() {
7283
- this.searchSubscription = this.searchSubject.pipe(debounceTime$1(300), distinctUntilChanged$1(), switchMap((searchKey) => {
7284
- return this.filterService.getUnderwritersList(searchKey || SHARED.EMPTY);
7285
- })).subscribe((underwriters) => {
7315
+ this.searchSubscription = this.filterService.getUnderwritersSearchObservable()
7316
+ .subscribe((underwriters) => {
7286
7317
  // Update options for search/filter - preserve "Unassigned" option if it exists
7287
- const unassignedOption = this.underwriterOptions.find(opt => opt.id === UNASSIGNED_UNDERWRITER_ID);
7318
+ const unassignedOption = this.underwriterOptions.find(opt => opt.id === SHARED.UNASSIGNED_UNDERWRITER_ID);
7288
7319
  if (unassignedOption) {
7289
7320
  this.underwriterOptions = [unassignedOption, ...underwriters];
7290
7321
  }
@@ -7297,7 +7328,7 @@ class QueueFilterDropdownComponent {
7297
7328
  onUnderwriterFilter(event) {
7298
7329
  const searchKey = event?.filter || SHARED.EMPTY;
7299
7330
  this.loadingUnderwriters = true;
7300
- this.searchSubject.next(searchKey);
7331
+ this.filterService.searchUnderwriters(searchKey);
7301
7332
  }
7302
7333
  get filterCount() {
7303
7334
  return this.filterService.getFilterCount();
@@ -7322,7 +7353,7 @@ class QueueFilterDropdownComponent {
7322
7353
  this.loadingUnderwriters = true;
7323
7354
  this.filterService.getUnderwritersList(SHARED.EMPTY).subscribe((underwriters) => {
7324
7355
  // Add "Unassigned" option at the beginning of the list
7325
- const unassignedOption = { id: UNASSIGNED_UNDERWRITER_ID, name: 'Unassigned' };
7356
+ const unassignedOption = { id: SHARED.UNASSIGNED_UNDERWRITER_ID, name: 'Unassigned' };
7326
7357
  this.underwriterOptions = [unassignedOption, ...underwriters];
7327
7358
  this.loadingUnderwriters = false;
7328
7359
  });
@@ -7377,8 +7408,6 @@ class QueueFilterDropdownComponent {
7377
7408
  }
7378
7409
  applyFilters() {
7379
7410
  const filterData = this.filterService.getFilters();
7380
- // Always emit filterApplied event to trigger API call, even if no filters
7381
- // This ensures the list API is called every time Apply Filters is clicked
7382
7411
  this.filterApplied.emit(filterData);
7383
7412
  this.filtersApplied = true; // Mark that filters have been applied
7384
7413
  this.showDropdown = false;
@@ -7446,14 +7475,13 @@ class QueueFilterDropdownComponent {
7446
7475
  if (this.searchSubscription) {
7447
7476
  this.searchSubscription.unsubscribe();
7448
7477
  }
7449
- this.searchSubject.complete();
7450
7478
  }
7451
7479
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, deps: [{ token: QueueFilterDropdownService }], target: i0.ɵɵFactoryTarget.Component });
7452
- 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 #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"] }] });
7480
+ 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 #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"] }] });
7453
7481
  }
7454
7482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, decorators: [{
7455
7483
  type: Component,
7456
- 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 #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"] }]
7484
+ 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 #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"] }]
7457
7485
  }], ctorParameters: () => [{ type: QueueFilterDropdownService }], propDecorators: { dropdownPanel: [{
7458
7486
  type: ViewChild,
7459
7487
  args: ['dropdownPanel', { static: false }]