vcomply-workflow-engine 6.0.92 → 6.0.93

package/esm2022/lib/sharedComponents/program-list/program-list.module.mjs

@@ -7,6 +7,7 @@ import { NoDataModule } from '../../ui-kit/no-data/no-data.module';
 import { PopoverModule } from '../../ui-kit/popover/popover.module';
 import { CheckSelectedItemsPipe } from './pipes/check-selected-items.pipes';
 import { LoadersModule } from '../../ui-kit/loaders/loaders.module';
+import { PipesModule } from '../../pipes/pipes.module';
 import * as i0 from "@angular/core";
 export class ProgramListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -16,13 +17,15 @@ export class ProgramListModule {
             FormgroupModule,
             NoDataModule,
             PopoverModule,
-            LoadersModule], exports: [ProgramListComponent] }); }
+            LoadersModule,
+            PipesModule], exports: [ProgramListComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListModule, imports: [CommonModule,
             FormsModule,
             FormgroupModule,
             NoDataModule,
             PopoverModule,
-            LoadersModule] }); }
+            LoadersModule,
+            PipesModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListModule, decorators: [{
             type: NgModule,
@@ -37,11 +40,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormgroupModule,
                         NoDataModule,
                         PopoverModule,
-                        LoadersModule
+                        LoadersModule,
+                        PipesModule
                     ],
                     exports: [
                         ProgramListComponent
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3JhbS1saXN0Lm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL3NoYXJlZENvbXBvbmVudHMvcHJvZ3JhbS1saXN0L3Byb2dyYW0tbGlzdC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQzdFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDbkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQzVFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQzs7QUFrQnBFLE1BQU0sT0FBTyxpQkFBaUI7K0dBQWpCLGlCQUFpQjtnSEFBakIsaUJBQWlCLGlCQWYxQixvQkFBb0I7WUFDcEIsc0JBQXNCLGFBR3RCLFlBQVk7WUFDWixXQUFXO1lBQ1gsZUFBZTtZQUNmLFlBQVk7WUFDWixhQUFhO1lBQ2IsYUFBYSxhQUdiLG9CQUFvQjtnSEFHWCxpQkFBaUIsWUFYMUIsWUFBWTtZQUNaLFdBQVc7WUFDWCxlQUFlO1lBQ2YsWUFBWTtZQUNaLGFBQWE7WUFDYixhQUFhOzs0RkFNSixpQkFBaUI7a0JBakI3QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixvQkFBb0I7d0JBQ3BCLHNCQUFzQjtxQkFDdkI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osV0FBVzt3QkFDWCxlQUFlO3dCQUNmLFlBQVk7d0JBQ1osYUFBYTt3QkFDYixhQUFhO3FCQUNoQjtvQkFDQyxPQUFPLEVBQUU7d0JBQ1Asb0JBQW9CO3FCQUNyQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmltcG9ydCB7IFByb2dyYW1MaXN0Q29tcG9uZW50IH0gZnJvbSAnLi9wcm9ncmFtLWxpc3QvcHJvZ3JhbS1saXN0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGb3JtZ3JvdXBNb2R1bGUgfSBmcm9tIFwiLi4vLi4vZm9ybWdyb3VwL2Zvcm1ncm91cC5tb2R1bGVcIjtcbmltcG9ydCB7IE5vRGF0YU1vZHVsZSB9IGZyb20gJy4uLy4uL3VpLWtpdC9uby1kYXRhL25vLWRhdGEubW9kdWxlJztcbmltcG9ydCB7IFBvcG92ZXJNb2R1bGUgfSBmcm9tICcuLi8uLi91aS1raXQvcG9wb3Zlci9wb3BvdmVyLm1vZHVsZSc7XG5pbXBvcnQgeyBDaGVja1NlbGVjdGVkSXRlbXNQaXBlIH0gZnJvbSAnLi9waXBlcy9jaGVjay1zZWxlY3RlZC1pdGVtcy5waXBlcyc7XG5pbXBvcnQgeyBMb2FkZXJzTW9kdWxlIH0gZnJvbSAnLi4vLi4vdWkta2l0L2xvYWRlcnMvbG9hZGVycy5tb2R1bGUnO1xuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgUHJvZ3JhbUxpc3RDb21wb25lbnQsXG4gICAgQ2hlY2tTZWxlY3RlZEl0ZW1zUGlwZVxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlLFxuICAgIEZvcm1ncm91cE1vZHVsZSxcbiAgICBOb0RhdGFNb2R1bGUsXG4gICAgUG9wb3Zlck1vZHVsZSxcbiAgICBMb2FkZXJzTW9kdWxlXG5dLFxuICBleHBvcnRzOiBbXG4gICAgUHJvZ3JhbUxpc3RDb21wb25lbnRcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBQcm9ncmFtTGlzdE1vZHVsZSB7IH1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3JhbS1saXN0Lm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Z4LXdvcmtmbG93LWVuZ2luZS9zcmMvbGliL3NoYXJlZENvbXBvbmVudHMvcHJvZ3JhbS1saXN0L3Byb2dyYW0tbGlzdC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQzdFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDbkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQzVFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sMEJBQTBCLENBQUM7O0FBbUJ2RCxNQUFNLE9BQU8saUJBQWlCOytHQUFqQixpQkFBaUI7Z0hBQWpCLGlCQUFpQixpQkFoQjFCLG9CQUFvQjtZQUNwQixzQkFBc0IsYUFHdEIsWUFBWTtZQUNaLFdBQVc7WUFDWCxlQUFlO1lBQ2YsWUFBWTtZQUNaLGFBQWE7WUFDYixhQUFhO1lBQ2IsV0FBVyxhQUdYLG9CQUFvQjtnSEFHWCxpQkFBaUIsWUFaMUIsWUFBWTtZQUNaLFdBQVc7WUFDWCxlQUFlO1lBQ2YsWUFBWTtZQUNaLGFBQWE7WUFDYixhQUFhO1lBQ2IsV0FBVzs7NEZBTUYsaUJBQWlCO2tCQWxCN0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osb0JBQW9CO3dCQUNwQixzQkFBc0I7cUJBQ3ZCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsZUFBZTt3QkFDZixZQUFZO3dCQUNaLGFBQWE7d0JBQ2IsYUFBYTt3QkFDYixXQUFXO3FCQUNkO29CQUNDLE9BQU8sRUFBRTt3QkFDUCxvQkFBb0I7cUJBQ3JCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuaW1wb3J0IHsgUHJvZ3JhbUxpc3RDb21wb25lbnQgfSBmcm9tICcuL3Byb2dyYW0tbGlzdC9wcm9ncmFtLWxpc3QuY29tcG9uZW50JztcbmltcG9ydCB7IEZvcm1ncm91cE1vZHVsZSB9IGZyb20gXCIuLi8uLi9mb3JtZ3JvdXAvZm9ybWdyb3VwLm1vZHVsZVwiO1xuaW1wb3J0IHsgTm9EYXRhTW9kdWxlIH0gZnJvbSAnLi4vLi4vdWkta2l0L25vLWRhdGEvbm8tZGF0YS5tb2R1bGUnO1xuaW1wb3J0IHsgUG9wb3Zlck1vZHVsZSB9IGZyb20gJy4uLy4uL3VpLWtpdC9wb3BvdmVyL3BvcG92ZXIubW9kdWxlJztcbmltcG9ydCB7IENoZWNrU2VsZWN0ZWRJdGVtc1BpcGUgfSBmcm9tICcuL3BpcGVzL2NoZWNrLXNlbGVjdGVkLWl0ZW1zLnBpcGVzJztcbmltcG9ydCB7IExvYWRlcnNNb2R1bGUgfSBmcm9tICcuLi8uLi91aS1raXQvbG9hZGVycy9sb2FkZXJzLm1vZHVsZSc7XG5pbXBvcnQgeyBQaXBlc01vZHVsZSB9IGZyb20gJy4uLy4uL3BpcGVzL3BpcGVzLm1vZHVsZSc7XG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBQcm9ncmFtTGlzdENvbXBvbmVudCxcbiAgICBDaGVja1NlbGVjdGVkSXRlbXNQaXBlXG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgRm9ybWdyb3VwTW9kdWxlLFxuICAgIE5vRGF0YU1vZHVsZSxcbiAgICBQb3BvdmVyTW9kdWxlLFxuICAgIExvYWRlcnNNb2R1bGUsXG4gICAgUGlwZXNNb2R1bGVcbl0sXG4gIGV4cG9ydHM6IFtcbiAgICBQcm9ncmFtTGlzdENvbXBvbmVudFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFByb2dyYW1MaXN0TW9kdWxlIHsgfVxuIl19

package/fesm2022/vcomply-workflow-engine.mjs

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { Injectable, Optional, EventEmitter, Component, Input, Output, Directive, HostListener, NgModule, Pipe, ViewChild, forwardRef, ElementRef, ChangeDetectionStrategy, createComponent, ViewChildren, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
-import { Subject, BehaviorSubject, map, catchError, of, shareReplay, retry as retry$1, throwError, takeUntil, forkJoin, distinctUntilChanged, take, Subscription } from 'rxjs';
+import { Subject, BehaviorSubject, map, catchError, of, shareReplay, retry as retry$1, throwError, takeUntil as takeUntil$1, forkJoin, distinctUntilChanged, take, Subscription } from 'rxjs';
 import { JwtHelperService } from '@auth0/angular-jwt';
-import { retry, map as map$1, catchError as catchError$1, takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { retry, map as map$1, catchError as catchError$1, debounceTime, takeUntil } from 'rxjs/operators';
 import * as i2 from '@vcomply/authorizer';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DatePipe, NgOptimizedImage } from '@angular/common';
@@ -25163,7 +25163,7 @@ const PAGINATION_OPTIONS = {
     DEFAULT_CURRENT_PAGE: 1
 };
 const PROGRAM_TYPE_LIST = [
-    { name: 'Regulations', id: 'regulations', },
+    { name: 'Regulations', id: 'regulations' },
     { name: 'Standards', id: 'standards' },
     { name: 'Internal Controls', id: 'internal_controls' },
     { name: 'Others', id: 'others' },
@@ -25174,6 +25174,11 @@ const PROGRAM_OBJECT = {
     internal_controls: 3,
     others: 0,
 };
+const PROGRAM_NO_DATA = {
+    programList: 'No data to display.',
+    categoryList: 'Select a program to view its category.',
+    search: 'No results matched your search criteria.',
+};
 
 // list-utils.service.ts
 class ListUtilsService {
@@ -25263,16 +25268,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * A reusable component for displaying and managing a list of programs with filtering, pagination, and category viewing capabilities.
+ *
+ * Features:
+ * - Program listing with pagination
+ * - Search functionality with debounce
+ * - Program type filtering
+ * - Category viewing for selected programs
+ * - Multi-select capability
+ *
+ * @template T Extends ListItem interface for type safety of list items
+ */
 class ProgramListComponent {
     constructor(listUtils, programListApiService) {
         this.listUtils = listUtils;
         this.programListApiService = programListApiService;
+        /** Array of items to be displayed in the list */
         this.items = [];
+        /** Object containing selected items, keyed by program ID */
         this.selectedItems = {};
-        //@Input() selectionPredicate: SelectionPredicate<T> = (item) => this.selectedItems.some(selected => selected.id === item.id);
+        /** URL configuration object for API endpoints */
         this.url = {};
+        /** Event emitted when an item is selected */
         this.itemSelected = new EventEmitter();
+        /** Event emitted when an item is deselected */
         this.itemDeselected = new EventEmitter();
+        /** Event emitted when the selection changes */
         this.itemsSelectedChange = new EventEmitter();
         this.tableHeaders = PROGRAM_TABLE_HEADERS;
         this.currentPage = PAGINATION_OPTIONS.DEFAULT_CURRENT_PAGE;
@@ -25288,15 +25310,29 @@ class ProgramListComponent {
             programList: false,
             categoryList: false,
         };
+        this.appliedProgramType = [];
+        this.PROGRAM_NO_DATA = PROGRAM_NO_DATA;
+        this.ASSETS = ASSETS;
+        /** Subject for handling debounced search */
+        this.searchSubject = new Subject();
+        /** Subject for cleanup subscriptions */
+        this.destroy$ = new Subject();
+        // Initialize debounced search
+        this.searchSubject.pipe(debounceTime(300), takeUntil(this.destroy$)).subscribe(() => {
+            this.performSearch();
+        });
     }
+    /** Initialize component by fetching program list */
     ngOnInit() {
         this.getProgramList();
     }
+    /** Handle changes to inputs */
     ngOnChanges(changes) {
         if (changes['items'] || changes['selectedItems']) {
             this.paginateItems(this.items);
         }
     }
+    /** Fetch program list from API */
     getProgramList() {
         this.loaderState.programList = true;
         this.programListApiService.getProgramList(this.url.programList).subscribe((res) => {
@@ -25305,13 +25341,18 @@ class ProgramListComponent {
             this.loaderState.programList = false;
         });
     }
+    /**
+     * Load data and initialize pagination
+     * @param data Array of items to load
+     */
     loadData(data) {
         this.goToPage(1, data);
     }
-    search() {
-        const filteredItems = this.items.filter((item) => item?.name?.toLowerCase().includes(this.searchTerm?.toLowerCase()));
-        this.loadData(filteredItems);
-    }
+    /**
+     * Handle item selection/deselection
+     * @param event Selection event
+     * @param item Item being selected/deselected
+     */
     selectItem(event, item) {
         if (event) {
             if (!this.selectedItems[this.activeProgram.id]) {
@@ -25327,27 +25368,51 @@ class ProgramListComponent {
             this.itemDeselected.emit(item);
         }
     }
+    /**
+     * Deselect a specific item
+     * @param item Item to deselect
+     */
     deselectItem(item) {
-        //this.selectedItems = this.selectedItems.filter(selected => selected.id !== item.id);
         this.itemsSelectedChange.emit(this.selectedItems);
         this.itemDeselected.emit(item);
     }
+    /**
+     * Check if an item is selected
+     * @param item Item to check
+     * @returns Boolean indicating if item is selected
+     */
     isSelected(item) {
         return false;
-        // return this.selectionPredicate(item);
     }
+    /**
+     * Navigate to specific page
+     * @param page Page number to navigate to
+     * @param data Data to paginate
+     */
     goToPage(page, data) {
         this.currentPage = page;
         this.paginateItems(data);
     }
+    /**
+     * Get array of page numbers for pagination
+     * @returns Array of page numbers
+     */
     getPageNumbers() {
         return this.listUtils.getPageNumbers(this.items.length, this.pageSize);
     }
+    /**
+     * Paginate items and update view
+     * @param data Data to paginate
+     */
     paginateItems(data) {
         this.totalPages = Math.ceil(data.length / this.pageSize);
         this.paginatedItems = data;
         this.categoryList = [];
     }
+    /**
+     * View categories for a selected program
+     * @param item Program to view categories for
+     */
     viewCategory(item) {
         if (!item)
             return;
@@ -25360,9 +25425,12 @@ class ProgramListComponent {
             this.categoryList = this.addParentTreeToCategories(this.categoryList);
         });
     }
+    /**
+     * Add parent tree information to categories
+     * @param categories Array of categories
+     * @returns Categories with parent tree information
+     */
     addParentTreeToCategories(categories) {
-        console.log('categories', categories);
-        // Create a map for quick lookup of categories by ID
         const categoryMap = new Map(categories?.map(category => [category?.id, category]));
         function getParentTree(category) {
             const parentTree = [];
@@ -25384,33 +25452,60 @@ class ProgramListComponent {
             parentTree: getParentTree(category)
         }));
     }
+    /**
+     * Handle program type filter selection
+     * @param event Selection event
+     * @param item Program type being selected/deselected
+     */
     selectFilter(event, item) {
         if (event) {
             this.selectedProgramType.push(item.id);
         }
         else {
-            this.selectedProgramType = this.selectedProgramType.filter((selected) => selected.id !== item.id);
+            this.selectedProgramType = this.selectedProgramType.filter((selected) => selected !== item.id);
         }
     }
+    /** Reset all applied filters */
     resetFilter() {
         this.selectedProgramType = [];
         this.onFilterChange();
     }
+    /** Apply selected filters to the program list */
     onFilterChange() {
         if (this.selectedProgramType.length > 0) {
             const filteredItems = this.items.filter((item) => this.selectedProgramType.includes(item.type));
             this.paginatedItems = this.listUtils.paginate(filteredItems, this.currentPage, this.pageSize);
         }
         else {
-            this.paginatedItems = this.listUtils.paginate(this.items, this.currentPage, this.pageSize);
+            this.paginatedItems = this.items;
+        }
+        this.appliedProgramType = this.programTypeList.filter((item) => this.selectedProgramType.includes(item.id));
+    }
+    /** Trigger debounced search */
+    search() {
+        this.searchSubject.next(this.searchTerm);
+    }
+    /** Perform search on items */
+    performSearch() {
+        const filteredItems = this.items.filter((item) => item?.name?.toLowerCase().includes(this.searchTerm?.toLowerCase()));
+        const isSelectedProgramAvailable = filteredItems.some((item) => item?.id === this.activeProgram?.id);
+        if (!isSelectedProgramAvailable) {
+            this.categoryList = [];
+            this.activeProgram = null;
         }
+        this.paginatedItems = filteredItems;
+    }
+    /** Cleanup subscriptions on component destruction */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListComponent, deps: [{ token: ListUtilsService }, { token: ProgramListApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgramListComponent, selector: "app-program-list", inputs: { items: "items", selectedItems: "selectedItems", url: "url" }, outputs: { itemSelected: "itemSelected", itemDeselected: "itemDeselected", itemsSelectedChange: "itemsSelectedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchTerm\"\n        placeholder=\"Search...\"\n        (keyup)=\"search()\"\n      />\n    </div>\n    <div\n      class=\"dynamic-list-filter\"\n      appPopover\n      (click)=\"programTypePopover.popover()\"\n      placement=\"right\"\n    >\n      <div class=\"filter-text\">All Program Type</div>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div\n    class=\"dynamic-list-table\"\n    *ngIf=\"paginatedItems?.length > 0 ||  (loaderState.programList || loaderState.categoryList); else defaultTemplate\"\n  >\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div\n            class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\"\n          >\n            #\n          </div>\n          <div\n            class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\"\n          >\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList;else programListLoader\">\n          <div\n          *ngFor=\"let item of paginatedItems; let i = index\"\n          class=\"list-row\"\n          [class.selected]=\"activeProgram?.id === item.id\"\n          (click)=\"viewCategory(item)\"\n        >\n          <div class=\"list-column serial\">\n            <div class=\"srNo\">{{ i + 1 }}</div>\n          </div>\n          <div\n            class=\"list-column name\"\n            [class.with-count]=\"selectedItems[item.id]?.length > 0\"\n          >\n            <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n          </div>\n          <div\n            class=\"list-column count\"\n            *ngIf=\"selectedItems[item.id]?.length > 0\"\n          >\n            <div\n              class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              {{ selectedItems[item.id].length }}\n            </div>\n            <div\n              class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\"\n            >\n              {{selectedItems[item.id].length > 1 ? 'CATEGORIES' : 'CATEGORY'}} SELECTED\n            </div>\n          </div>\n          <div class=\"list-column action\">\n            <button\n              class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              <i class=\"icons\"> &#xe970; </i>\n            </button>\n          </div>\n        </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"!loaderState.categoryList;else categoryListLoader\">\n          <ng-container *ngIf=\"categoryList?.length > 0;else defaultSubCategoryTemplate\">    \n            <div\n            class=\"list-row vx-pl-2 vx-pr-2\"\n            *ngFor=\"let item of categoryList; let i = index\"\n        > \n          <app-cs-checkbox\n            [value]=\"item?.id\"\n            [ngValue]=\"item.id | checkSelectedItems: selectedItems[activeProgram.id]\"\n            (ngValueChange)=\"selectItem($event, item)\"\n          >\n            <span class=\"value-inner\">\n              <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n              <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                <div *ngIf=\"item?.parentTree?.length\"\n                  class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\"\n                >\n                  Within\n                </div>\n                <div\n                  class=\"within-value vx-fs-11 vx-paragraph-txt\"\n                  [appTooltip]=\"item?.parentTree?.join(' > ')\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ item?.parentTree?.join(\" > \") }}\n                </div>\n              </div>\n            </span>\n          </app-cs-checkbox>\n        </div>\n        </ng-container>\n        <ng-template #defaultSubCategoryTemplate>\n          <div class=\"sub-no-data\">\n            <app-no-data\n              [noDataImage]=\"\n                'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\n              \"\n              [noDataText]=\"'No data to display'\"\n            ></app-no-data>\n          </div>\n        </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n       \n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data\n        [noDataImage]=\"\n          'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\n        \"\n        [noDataText]=\"'No data to display'\"\n      ></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover>\n  <div class=\"new-action-list\">\n    <div\n      class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\"\n    >\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox\n            [value]=\"item.id\"\n            [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\"\n          >\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div\n      class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\"\n    >\n      <button\n        (click)=\"resetFilter();programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n      >\n        RESET\n      </button>\n      <button\n        (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\"\n      >\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .dynamic-list-container{height:calc(100% - 48px)}::ng-deep .dynamic-list-container.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: TableLoaderComponent, selector: "app-table-loader", inputs: ["listSize"] }, { kind: "pipe", type: CheckSelectedItemsPipe, name: "checkSelectedItems" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgramListComponent, selector: "app-program-list", inputs: { items: "items", selectedItems: "selectedItems", url: "url" }, outputs: { itemSelected: "itemSelected", itemDeselected: "itemDeselected", itemsSelectedChange: "itemsSelectedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchTerm\"\n        placeholder=\"Search...\"\n        (keyup)=\"search()\"\n      />\n    </div>\n    <div\n      class=\"dynamic-list-filter\"\n      appPopover\n      (click)=\"programTypePopover.popover()\"\n      placement=\"right\"\n    >\n      <div *ngIf=\"appliedProgramType.length === 0; else selectedTypeFilter\" class=\"filter-text\">Select Program Type</div>\n      <ng-template #selectedTypeFilter>\n        <div\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"appliedProgramType.length\"\n            >\n      \n              <span\n                class=\"chipName vx-fs-11 vx-label-txt\"\n                [appTooltip]=\"\n                  appliedProgramType[0]?.name\n                \"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{\n                  appliedProgramType[0]?.name\n                }}</span\n              >\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover\n                placement=\"right\"\n                *ngIf=\"appliedProgramType.length > 1\"\n              >\n                +{{ appliedProgramType.length - 1 }}\n              </button>\n            </div>\n      </ng-template>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div\n    class=\"dynamic-list-table\"\n    *ngIf=\"paginatedItems?.length > 0 ||  (loaderState.programList || loaderState.categoryList); else defaultTemplate\"\n  >\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div\n            class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\"\n          >\n            #\n          </div>\n          <div\n            class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\"\n          >\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList;else programListLoader\">\n          <div\n          *ngFor=\"let item of paginatedItems | search: searchTerm : 'name'; let i = index\"\n          class=\"list-row\"\n          [class.selected]=\"activeProgram?.id === item.id\"\n          (click)=\"viewCategory(item)\"\n        >\n          <div class=\"list-column serial\">\n            <div class=\"srNo\">{{ i + 1 }}</div>\n          </div>\n          <div\n            class=\"list-column name\"\n            [class.with-count]=\"selectedItems[item.id]?.length > 0\"\n          >\n            <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n          </div>\n          <div\n            class=\"list-column count\"\n            *ngIf=\"selectedItems[item.id]?.length > 0\"\n          >\n            <div\n              class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              {{ selectedItems[item.id].length }}\n            </div>\n            <div\n              class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\"\n            >\n              {{selectedItems[item.id].length > 1 ? 'CATEGORIES' : 'CATEGORY'}} SELECTED\n            </div>\n          </div>\n          <div class=\"list-column action\">\n            <button\n              class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              <i class=\"icons\"> &#xe970; </i>\n            </button>\n          </div>\n        </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"!loaderState.categoryList && !loaderState.programList;else categoryListLoader\">\n          <ng-container *ngIf=\"categoryList?.length > 0;else defaultSubCategoryTemplate\">    \n            <div\n            class=\"list-row vx-pl-2 vx-pr-2\"\n            *ngFor=\"let item of categoryList; let i = index\"\n        > \n          <app-cs-checkbox\n            [value]=\"item?.id\"\n            [ngValue]=\"item.id | checkSelectedItems: selectedItems[activeProgram.id]\"\n            (ngValueChange)=\"selectItem($event, item)\"\n          >\n            <span class=\"value-inner\">\n              <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n              <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                <div *ngIf=\"item?.parentTree?.length\"\n                  class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\"\n                >\n                  Within\n                </div>\n                <div\n                  class=\"within-value vx-fs-11 vx-paragraph-txt\"\n                  [appTooltip]=\"item?.parentTree?.join(' > ')\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ item?.parentTree?.join(\" > \") }}\n                </div>\n              </div>\n            </span>\n          </app-cs-checkbox>\n        </div>\n        </ng-container>\n        <ng-template #defaultSubCategoryTemplate>\n          <div class=\"sub-no-data\">\n            <app-no-data\n              [noDataImage]=\"\n                ASSETS.search_data\n              \"\n              [noDataText]=\"PROGRAM_NO_DATA.categoryList\"\n            ></app-no-data>\n          </div>\n        </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n       \n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data\n        [noDataImage]=\"\n          ASSETS.search_data\n        \"\n        [noDataText]=\"searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\"\n      ></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover>\n  <div class=\"new-action-list\">\n    <div\n      class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\"\n    >\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox\n            [value]=\"item.id\"\n            [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\"\n          >\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div\n      class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\"\n    >\n      <button\n        (click)=\"resetFilter();programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n      >\n        RESET\n      </button>\n      <button\n        (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\"\n      >\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsCheckboxComponent, selector: "app-cs-checkbox", inputs: ["disabled", "ngValue", "value", "readonly", "oneLine"], outputs: ["ngValueChange"] }, { kind: "component", type: NoDataComponentUI, selector: "app-no-data", inputs: ["action", "secondaryAction", "noDataImage", "noDataText", "noDataButton", "secondaryButton", "noDataSecButton", "altText", "smallButton"], outputs: ["buttonAction", "secondaryActionButton"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "component", type: TableLoaderComponent, selector: "app-table-loader", inputs: ["listSize"] }, { kind: "pipe", type: SearchPipe$1, name: "search" }, { kind: "pipe", type: CheckSelectedItemsPipe, name: "checkSelectedItems" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-program-list', template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchTerm\"\n        placeholder=\"Search...\"\n        (keyup)=\"search()\"\n      />\n    </div>\n    <div\n      class=\"dynamic-list-filter\"\n      appPopover\n      (click)=\"programTypePopover.popover()\"\n      placement=\"right\"\n    >\n      <div class=\"filter-text\">All Program Type</div>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div\n    class=\"dynamic-list-table\"\n    *ngIf=\"paginatedItems?.length > 0 ||  (loaderState.programList || loaderState.categoryList); else defaultTemplate\"\n  >\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div\n            class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\"\n          >\n            #\n          </div>\n          <div\n            class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\"\n          >\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList;else programListLoader\">\n          <div\n          *ngFor=\"let item of paginatedItems; let i = index\"\n          class=\"list-row\"\n          [class.selected]=\"activeProgram?.id === item.id\"\n          (click)=\"viewCategory(item)\"\n        >\n          <div class=\"list-column serial\">\n            <div class=\"srNo\">{{ i + 1 }}</div>\n          </div>\n          <div\n            class=\"list-column name\"\n            [class.with-count]=\"selectedItems[item.id]?.length > 0\"\n          >\n            <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n          </div>\n          <div\n            class=\"list-column count\"\n            *ngIf=\"selectedItems[item.id]?.length > 0\"\n          >\n            <div\n              class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              {{ selectedItems[item.id].length }}\n            </div>\n            <div\n              class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\"\n            >\n              {{selectedItems[item.id].length > 1 ? 'CATEGORIES' : 'CATEGORY'}} SELECTED\n            </div>\n          </div>\n          <div class=\"list-column action\">\n            <button\n              class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              <i class=\"icons\"> &#xe970; </i>\n            </button>\n          </div>\n        </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"!loaderState.categoryList;else categoryListLoader\">\n          <ng-container *ngIf=\"categoryList?.length > 0;else defaultSubCategoryTemplate\">    \n            <div\n            class=\"list-row vx-pl-2 vx-pr-2\"\n            *ngFor=\"let item of categoryList; let i = index\"\n        > \n          <app-cs-checkbox\n            [value]=\"item?.id\"\n            [ngValue]=\"item.id | checkSelectedItems: selectedItems[activeProgram.id]\"\n            (ngValueChange)=\"selectItem($event, item)\"\n          >\n            <span class=\"value-inner\">\n              <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n              <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                <div *ngIf=\"item?.parentTree?.length\"\n                  class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\"\n                >\n                  Within\n                </div>\n                <div\n                  class=\"within-value vx-fs-11 vx-paragraph-txt\"\n                  [appTooltip]=\"item?.parentTree?.join(' > ')\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ item?.parentTree?.join(\" > \") }}\n                </div>\n              </div>\n            </span>\n          </app-cs-checkbox>\n        </div>\n        </ng-container>\n        <ng-template #defaultSubCategoryTemplate>\n          <div class=\"sub-no-data\">\n            <app-no-data\n              [noDataImage]=\"\n                'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\n              \"\n              [noDataText]=\"'No data to display'\"\n            ></app-no-data>\n          </div>\n        </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n       \n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data\n        [noDataImage]=\"\n          'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\n        \"\n        [noDataText]=\"'No data to display'\"\n      ></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover>\n  <div class=\"new-action-list\">\n    <div\n      class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\"\n    >\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox\n            [value]=\"item.id\"\n            [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\"\n          >\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div\n      class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\"\n    >\n      <button\n        (click)=\"resetFilter();programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n      >\n        RESET\n      </button>\n      <button\n        (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\"\n      >\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .dynamic-list-container{height:calc(100% - 48px)}::ng-deep .dynamic-list-container.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
+            args: [{ selector: 'app-program-list', template: "<div class=\"dynamic-list-container\">\n  <div class=\"vx-d-flex\">\n    <div class=\"search-block vx-w-100\">\n      <i class=\"icons\">&#xe90b;</i>\n      <input\n        type=\"text\"\n        [(ngModel)]=\"searchTerm\"\n        placeholder=\"Search...\"\n        (keyup)=\"search()\"\n      />\n    </div>\n    <div\n      class=\"dynamic-list-filter\"\n      appPopover\n      (click)=\"programTypePopover.popover()\"\n      placement=\"right\"\n    >\n      <div *ngIf=\"appliedProgramType.length === 0; else selectedTypeFilter\" class=\"filter-text\">Select Program Type</div>\n      <ng-template #selectedTypeFilter>\n        <div\n              class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n              *ngIf=\"appliedProgramType.length\"\n            >\n      \n              <span\n                class=\"chipName vx-fs-11 vx-label-txt\"\n                [appTooltip]=\"\n                  appliedProgramType[0]?.name\n                \"\n                placement=\"bottom-left\"\n                delay=\"0\"\n                type=\"black\"\n                [tooltipMandatory]=\"false\"\n                >{{\n                  appliedProgramType[0]?.name\n                }}</span\n              >\n              <button\n                class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n                appPopover\n                placement=\"right\"\n                *ngIf=\"appliedProgramType.length > 1\"\n              >\n                +{{ appliedProgramType.length - 1 }}\n              </button>\n            </div>\n      </ng-template>\n      <i class=\"icons filter-icon\"> &#xe9e8; </i>\n    </div>\n  </div>\n  <div\n    class=\"dynamic-list-table\"\n    *ngIf=\"paginatedItems?.length > 0 ||  (loaderState.programList || loaderState.categoryList); else defaultTemplate\"\n  >\n    <div class=\"dynamic-list-header vx-d-flex\">\n      <ng-container *ngFor=\"let header of tableHeaders\">\n        <div class=\"vx-d-flex vx-w-50 vx-pl-1\">\n          <div\n            class=\"serialNo vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center\"\n          >\n            #\n          </div>\n          <div\n            class=\"headerText vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center\"\n          >\n            {{ header }}\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"dynamic-list-body vx-d-flex\">\n      <div class=\"left-column\">\n        <ng-container *ngIf=\"!loaderState.programList;else programListLoader\">\n          <div\n          *ngFor=\"let item of paginatedItems | search: searchTerm : 'name'; let i = index\"\n          class=\"list-row\"\n          [class.selected]=\"activeProgram?.id === item.id\"\n          (click)=\"viewCategory(item)\"\n        >\n          <div class=\"list-column serial\">\n            <div class=\"srNo\">{{ i + 1 }}</div>\n          </div>\n          <div\n            class=\"list-column name\"\n            [class.with-count]=\"selectedItems[item.id]?.length > 0\"\n          >\n            <div class=\"name-inner vx-fs-13 vx-pr-2\">{{ item.name }}</div>\n          </div>\n          <div\n            class=\"list-column count\"\n            *ngIf=\"selectedItems[item.id]?.length > 0\"\n          >\n            <div\n              class=\"count-box vx-fs-9 vx-fw-600 vx-lh-4 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              {{ selectedItems[item.id].length }}\n            </div>\n            <div\n              class=\"count-text vx-fs-11 vx-fw-500 vx-tt-uppercase vx-lh-4 vx-ml-2\"\n            >\n              {{selectedItems[item.id].length > 1 ? 'CATEGORIES' : 'CATEGORY'}} SELECTED\n            </div>\n          </div>\n          <div class=\"list-column action\">\n            <button\n              class=\"arrow vx-fs-12 vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\n            >\n              <i class=\"icons\"> &#xe970; </i>\n            </button>\n          </div>\n        </div>\n        </ng-container>\n        <ng-template #programListLoader>\n          <app-table-loader></app-table-loader>\n\n        </ng-template>\n      </div>\n      <div class=\"right-column\">\n        <ng-container *ngIf=\"!loaderState.categoryList && !loaderState.programList;else categoryListLoader\">\n          <ng-container *ngIf=\"categoryList?.length > 0;else defaultSubCategoryTemplate\">    \n            <div\n            class=\"list-row vx-pl-2 vx-pr-2\"\n            *ngFor=\"let item of categoryList; let i = index\"\n        > \n          <app-cs-checkbox\n            [value]=\"item?.id\"\n            [ngValue]=\"item.id | checkSelectedItems: selectedItems[activeProgram.id]\"\n            (ngValueChange)=\"selectItem($event, item)\"\n          >\n            <span class=\"value-inner\">\n              <div class=\"item-name vx-fs-13\">{{ item?.name }}</div>\n              <div class=\"within-part vx-d-flex vx-align-center vx-pr-3\">\n                <div *ngIf=\"item?.parentTree?.length\"\n                  class=\"within-box vx-fs-9 vx-fw-600 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mr-2 vx-lh-3\"\n                >\n                  Within\n                </div>\n                <div\n                  class=\"within-value vx-fs-11 vx-paragraph-txt\"\n                  [appTooltip]=\"item?.parentTree?.join(' > ')\"\n                  placement=\"bottom-left\"\n                  delay=\"0\"\n                  type=\"black\"\n                  [tooltipMandatory]=\"true\"\n                >\n                  {{ item?.parentTree?.join(\" > \") }}\n                </div>\n              </div>\n            </span>\n          </app-cs-checkbox>\n        </div>\n        </ng-container>\n        <ng-template #defaultSubCategoryTemplate>\n          <div class=\"sub-no-data\">\n            <app-no-data\n              [noDataImage]=\"\n                ASSETS.search_data\n              \"\n              [noDataText]=\"PROGRAM_NO_DATA.categoryList\"\n            ></app-no-data>\n          </div>\n        </ng-template>\n        </ng-container>\n        <ng-template #categoryListLoader>\n          <app-table-loader></app-table-loader>\n        </ng-template>\n       \n      </div>\n    </div>\n  </div>\n  <ng-template #defaultTemplate>\n    <div class=\"list-no-data-container\">\n      <app-no-data\n        [noDataImage]=\"\n          ASSETS.search_data\n        \"\n        [noDataText]=\"searchTerm ? PROGRAM_NO_DATA.search : PROGRAM_NO_DATA.programList\"\n      ></app-no-data>\n    </div>\n  </ng-template>\n</div>\n\n<app-popover #programTypePopover>\n  <div class=\"new-action-list\">\n    <div\n      class=\"program-type-text vx-fs-11 vx-fw-500 vx-gray-60 vx-lh-16 vx-p-2 vx-tt-uppercase\"\n    >\n      Program Type:\n    </div>\n    <ul class=\"action-item\">\n      <li *ngFor=\"let item of programTypeList\">\n        <div class=\"chip-item\">\n          <app-cs-checkbox\n            [value]=\"item.id\"\n            [ngValue]=\"selectedProgramType.includes(item.id)\"\n            (ngValueChange)=\"selectFilter($event, item)\"\n          >\n            {{ item?.name }}\n          </app-cs-checkbox>\n        </div>\n      </li>\n    </ul>\n    <div\n      class=\"program-type-bottom vx-d-flex vx-align-center vx-justify-center vx-pt-3 vx-pb-3\"\n    >\n      <button\n        (click)=\"resetFilter();programTypePopover.closePopover('top')\"\n        class=\"reset-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n      >\n        RESET\n      </button>\n      <button\n        (click)=\"onFilterChange(); programTypePopover.closePopover('top')\"\n        class=\"apply-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-lh-6\"\n        [class.disabled]=\"selectedProgramType?.length === 0\"\n      >\n        APPLY\n      </button>\n    </div>\n  </div>\n</app-popover>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .dynamic-list-container{height:calc(100% - 3rem)}::ng-deep .dynamic-list-container.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .dynamic-list-container .search-block{position:relative}::ng-deep .dynamic-list-container .search-block input{height:2.5rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #cdced6;border-radius:.25rem;width:100%;font-size:13px;color:#747576}::ng-deep .dynamic-list-container .search-block input::placeholder{font-weight:400}::ng-deep .dynamic-list-container .search-block input:focus{border-color:#1e5dd3}::ng-deep .dynamic-list-container .search-block i{position:absolute;left:1rem;top:14px;pointer-events:none;color:#e3e3e9;font-size:12px}::ng-deep .dynamic-list-container .list-no-data-container{height:calc(100% - 2.5rem)}::ng-deep .dynamic-list-filter{position:relative;min-width:240px;height:2.5rem;border:1px solid #cdced6;border-radius:.25rem;margin-left:6px;color:#a9aab6;font-size:13px;padding:0 .75rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}::ng-deep .dynamic-list-filter .filter-icon{color:#787a8c;font-size:12px}::ng-deep .dynamic-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .dynamic-list-head button.back-btn{background:transparent;border-radius:0;border:none;position:relative;top:.125rem}::ng-deep .dynamic-list-header .serialNo{color:#787a8c;min-width:2rem;height:2rem}::ng-deep .dynamic-list-header .headerText{color:#787a8c;min-width:calc(100% - 2rem);height:2rem}::ng-deep .dynamic-list-table{width:100%;border-collapse:collapse;height:calc(100% - 3rem)}::ng-deep .dynamic-list-body{height:calc(100% - 2rem);width:calc(100% + .75rem);position:relative}::ng-deep .dynamic-list-body .left-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .left-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .left-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .left-column .list-row.selected{background-color:#f2f2f5}::ng-deep .dynamic-list-body .left-column .list-row.selected:before{background:#1e5dd3;border-radius:.125rem .125rem 0 0;content:\"\";position:absolute;left:0;top:-1px;width:100%;height:.125rem;z-index:1}::ng-deep .dynamic-list-body .left-column .list-row.selected .list-column.serial .srNo{background:#e3e3e9;color:#565a6f}::ng-deep .dynamic-list-body .left-column .list-row .list-column{color:#000;font-size:11px;height:3rem;position:relative;display:flex;align-items:center;padding:0 .25rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial{width:2rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.serial .srNo{background:#f9f9fa;writing-mode:vertical-lr;color:#787a8c;font-size:11px;font-weight:500;height:46px;display:flex;justify-content:center;transition:all .2s ease-in-out;position:relative}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name{width:calc(100% - 4.5rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name .name-inner{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .left-column .list-row .list-column.name.with-count{width:calc(100% - 16rem)}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count{width:11.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-box{background:#1e5dd3;border-radius:1.25rem;color:#fff;padding:0 .125rem;min-width:1rem;height:1rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.count .count-text{color:#787a8c}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action{width:2.5rem;justify-content:center}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow{background:transparent;border-radius:.25rem;border:none;color:#565a6f;min-width:1.5rem;height:1.5rem}::ng-deep .dynamic-list-body .left-column .list-row .list-column.action button.arrow:hover{background:#e3e3e9}::ng-deep .dynamic-list-body .right-column{width:calc(50% + .5rem);padding-right:.5rem;position:relative;overflow-y:auto;scrollbar-width:thin}::ng-deep .dynamic-list-body .right-column .list-row{background-color:#fff;border-radius:.25rem;border:1px solid #cdced6;cursor:pointer;display:flex;align-items:center;margin-bottom:.25rem;position:relative;transition:all .2s ease-in-out;width:100%;height:3rem}::ng-deep .dynamic-list-body .right-column .list-row:hover{background:#f8f8f8}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox{width:100%;display:flex}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value{width:100%;justify-content:start}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner{width:100%}::ng-deep .dynamic-list-body .right-column .list-row app-cs-checkbox .checkbox-item .value .value-inner .item-name{color:#000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .dynamic-list-body .right-column .sub-no-data{display:contents}::ng-deep .new-action-list{background:#fff;border-radius:.25rem;border:1px solid #e3e3e9;box-shadow:0 4px 8px #1e5dd326;width:240px}::ng-deep .new-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;max-height:220px;overflow:auto}::ng-deep .new-action-list ul.action-item{display:block}::ng-deep .new-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .new-action-list ul.action-item li:last-child{border-bottom:none}::ng-deep .new-action-list ul.action-item li app-cs-checkbox{display:flex}::ng-deep .new-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .new-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .new-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .new-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .new-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .new-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .new-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .new-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .new-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .new-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .new-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .new-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .new-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .new-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .new-action-list ul.action-item li .chip-item app-cs-checkbox .checkbox-item .value{color:#000;font-size:11px}::ng-deep .new-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .new-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .new-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .new-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .new-action-list .program-type-text{color:#787a8c;border-bottom:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom{border-top:1px solid #f2f2f5}::ng-deep .new-action-list .program-type-bottom button{background:#fff;border-radius:.125rem;margin:0 .125rem!important;transition:all .3s ease-out}::ng-deep .new-action-list .program-type-bottom button.reset-btn{border:1px solid #cdced6;color:#1e5dd3}::ng-deep .new-action-list .program-type-bottom button.reset-btn:hover{background:#f9f9fa}::ng-deep .new-action-list .program-type-bottom button.apply-btn{background:#1e5dd3;border:1px solid #1e5dd3;color:#fff}::ng-deep .new-action-list .program-type-bottom button.apply-btn:hover{background:#1146a8}::ng-deep .new-action-list .program-type-bottom button.apply-btn.disabled{background:#e3e3e9;border-color:#e3e3e9;color:#a9aab6;pointer-events:none}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: ListUtilsService }, { type: ProgramListApiService }]; }, propDecorators: { items: [{
                 type: Input
             }], selectedItems: [{
@@ -29384,7 +29479,7 @@ class FrameworkListComponent {
         }
         this.responsibilityService
             .getFrameWorkCount(params)
-            .pipe(takeUntil(this.unsubscribe))
+            .pipe(takeUntil$1(this.unsubscribe))
             .subscribe({
             next: (res) => {
                 this.frameworkCount = {
@@ -29409,7 +29504,7 @@ class FrameworkListComponent {
         }
         this.responsibilityService
             .getFrameWorkList(params)
-            .pipe(takeUntil(this.unsubscribe))
+            .pipe(takeUntil$1(this.unsubscribe))
             .subscribe({
             next: (res) => {
                 this.frameworkData.data = res.data;
@@ -29435,7 +29530,7 @@ class FrameworkListComponent {
         }
         this.responsibilityService
             .getFrameworkSubCategories(id, params)
-            .pipe(takeUntil(this.unsubscribe))
+            .pipe(takeUntil$1(this.unsubscribe))
             .subscribe({
             next: (res) => {
                 this.subCategoriesList.from = res.items_from ?? 1;
@@ -29468,7 +29563,7 @@ class FrameworkListComponent {
         }
         this.responsibilityService
             .getFrameworkControls(id, params)
-            .pipe(takeUntil(this.unsubscribe))
+            .pipe(takeUntil$1(this.unsubscribe))
             .subscribe({
             next: (res) => {
                 this.controlsList = res;
@@ -31423,7 +31518,7 @@ class WorkflowComplianceComponent {
         }
         this.responsibilityService
             .getOrganizationGroups(params)
-            .pipe(takeUntil(this.unSubscribeProgram))
+            .pipe(takeUntil$1(this.unSubscribeProgram))
             .subscribe((res) => {
             const data = res ?? [];
             if (!program_id) {
@@ -36379,7 +36474,7 @@ class LinkProgramComponent {
         };
         this.restApiService
             .apiDelegate(request, 'complianceCategory/programList')
-            .pipe(takeUntil$1(this.unsubscribe))
+            .pipe(takeUntil(this.unsubscribe))
             .subscribe({
             next: (res) => {
                 this.programData.data = res.data;
@@ -36415,7 +36510,7 @@ class LinkProgramComponent {
         };
         this.restApiService
             .apiDelegate(request, '/subCategories')
-            .pipe(takeUntil$1(this.unsubscribe))
+            .pipe(takeUntil(this.unsubscribe))
             .subscribe({
             next: (res) => {
                 this.subCategoriesList.from = res.items_from ?? 1;
@@ -36451,7 +36546,7 @@ class LinkProgramComponent {
         };
         this.restApiService
             .apiDelegate(request, '/categoryResponsibilities')
-            .pipe(takeUntil$1(this.unsubscribe))
+            .pipe(takeUntil(this.unsubscribe))
             .subscribe({
             next: (res) => {
                 this.loader = false;
@@ -36823,7 +36918,7 @@ class LinkRelatedPoliciesComponent {
         };
         this.policyService
             .getPolicyList(request)
-            .pipe(takeUntil(this.unsubscribe))
+            .pipe(takeUntil$1(this.unsubscribe))
             .subscribe({
             next: (res) => {
                 this.loader = false;
@@ -52664,13 +52759,15 @@ class ProgramListModule {
             FormgroupModule$1,
             NoDataModule,
             PopoverModule,
-            LoadersModule], exports: [ProgramListComponent] }); }
+            LoadersModule,
+            PipesModule], exports: [ProgramListComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListModule, imports: [CommonModule,
             FormsModule,
             FormgroupModule$1,
             NoDataModule,
             PopoverModule,
-            LoadersModule] }); }
+            LoadersModule,
+            PipesModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgramListModule, decorators: [{
             type: NgModule,
@@ -52685,7 +52782,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormgroupModule$1,
                         NoDataModule,
                         PopoverModule,
-                        LoadersModule
+                        LoadersModule,
+                        PipesModule
                     ],
                     exports: [
                         ProgramListComponent