vcomply-workflow-engine 2.4.68 → 2.4.69

package/bundles/vcomply-workflow-engine.umd.js

@@ -24160,7 +24160,7 @@
     ProgramListingComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-program-listing',
-                    template: "<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"!showCategories && !hideProgramsList\">\r\n    <div class=\"program-listing-head\">\r\n        <h3 class=\"program-listing-title\">Select a Program</h3>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n        <div class=\"filter-card-row\">\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTab('regulations')\">\r\n                <div class=\"left\">\r\n                    <label>REGULATIONS</label>\r\n                    <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n                        {{programData?.SelectedRegulationProgramsCount}}\r\n                        {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTab('standards')\">\r\n                <div class=\"left\">\r\n                    <label>STANDARDS</label>\r\n                    <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n                        {{programData?.SelectedStandardProgramsCount}}\r\n                        {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'internal_controls'\"\r\n                (click)=\"changeTab('internal_controls')\">\r\n                <div class=\"left\">\r\n                    <label>INTERNAL CONTROLS</label>\r\n                    <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n                        {{programData?.SelectedInternalControlsProgramsCount}}\r\n                        {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTab('others')\">\r\n                <div class=\"left\">\r\n                    <label>OTHERS</label>\r\n                    <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n                        {{programData?.SelectedOthersProgramsCount}}\r\n                        {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span>\r\n            </div>\r\n        </div>\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchProgram (keyup.enter)=\"handleSearch($event.target.value)\"\r\n                placeholder=\"Search Programs\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"programData.totalPages > 1\" [start]=\"programData.from\" [end]=\"programData.to\"\r\n            [total]=\"programData.totalRecords\" [pageCount]=\"programData.totalPages\"\r\n            [currentPage]=\"programData.currentPage\" (selectedPage)=\"changePage($event,'program')\"></app-pagination>\r\n        <div class=\"program-listing-part\" [class.with-category-list]=\"!showCategories && !hideProgramsList\">\r\n            <app-no-data *ngIf=\"programData?.data?.length==0 && !loader\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <div class=\"program-listing-item\" [class.active]=\"showCategories && currentProgram?._id == program?._id\"\r\n                *ngFor=\"let program of programData.data;let i = index\">\r\n                <div class=\"table-row main-list\" [class.active]=\"currentProgram?._id == program?._id\"\r\n                    [class.disabled]=\"false\" (click)=\"selectProgram(true,program)\">\r\n                    <div class=\"table-column serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n                            [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n                        <app-cs-radio [name]=\"'t'\" [checked]=\"currentProgram?._id == program?._id\"\r\n                            (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio>\r\n                    </div>\r\n                    <div class=\"table-column name\">\r\n                        <div class=\"name-inner\">\r\n                            <div class=\"name-with-count\">\r\n                                <div class=\"value\" [appTooltip]=\"program?.item_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                    type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"table-column action\">\r\n                        <button class=\"arrow\" *ngIf=\"program?.child_id?.length\" [class.disabled]=\"false\"\r\n                            [disabled]=\"false\">\r\n                            <i *ngIf=\"!(showCategories && currentProgram?._id == program?._id)\"\r\n                                (click)=\"selectProgram($event,program)\" class=\"icons\">&#xe970;</i>\r\n                            <i *ngIf=\"showCategories && currentProgram?._id == program?._id\" class=\"icons\">&#xe9e8;</i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n            <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</div>\r\n        </div>\r\n        <div class=\"confirmation-bottom\">\r\n            <div class=\"message\">Are you sure you would like to proceed?</div>\r\n            <div class=\"button-group\">\r\n                <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\r\n                <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-floating-bar [selectedData]=\"(currentProgram?.category_id)?[currentProgram]:[]\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n        (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\">\r\n    </app-floating-bar>\r\n\r\n\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n</div>\r\n<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"showCategories || hideProgramsList\">\r\n    <div class=\"program-listing-head\">\r\n        <h3 class=\"program-listing-title\">\r\n            <button class=\"back-btn\" (click)=\"backToPrograms()\"><i class=\"icons\">&#xe91d;</i></button>\r\n             Program  > <span *ngIf=\"currentProgram?.name\"> {{currentProgram?.name}} > </span> Select Program Categories\r\n        </h3>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchCategory (keyup.enter)=\"categorySearch($event.target.value)\"\r\n                placeholder=\"Search Categories\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"categoryData.totalPages > 1\" [start]=\"categoryData.from\" [end]=\"categoryData.to\"\r\n            [total]=\"categoryData.totalRecords\" [pageCount]=\"categoryData.totalPages\"\r\n            [currentPage]=\"categoryData.currentPage\" (selectedPage)=\"changePage($event,'category')\"></app-pagination>\r\n        <div class=\"program-listing-part\" [class.with-category-list]=\"showCategories && hideProgramsList\">\r\n            <app-no-data *ngIf=\"categoryData?.data?.length==0 && !loader\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <ng-container>\r\n                <div class=\"selected-area\" *ngIf=\"!loader && (currentProgram?.name ? categoryData.data?.length : programData?.data?.length)\">\r\n                    <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='checked'\" [ngValue]=\"true\"\r\n                        (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox>\r\n                    <app-cs-checkbox-indeterminate *ngIf=\"checkCategoriesSelection()=='indeterminate'\" [ngValue]=\"true\"\r\n                        (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox-indeterminate>\r\n                    <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='unchecked'\" [ngValue]=\"false\"\r\n                        (ngValueChange)=\"selectAllCategories(true)\">Select All</app-cs-checkbox>\r\n\r\n                </div>\r\n                <div class=\"program-listing-item\" [class.active]=\"subList\">\r\n                    <div class=\"table-row main-list\" *ngFor=\"let category of categoryData.data;let i = index\"\r\n                        [class.active]=\"selectedIds.includes(category.category_id)\" [class.disabled]=\"false\">\r\n                        <div class=\"table-column serial\">\r\n                            <div class=\"sr-no\" [appTooltip]=\"i+1\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n                                [tooltipMandatory]=\"true\">{{i+1}}</div>\r\n                            <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n                                (ngValueChange)=\"selectCategory($event,category)\"></app-cs-checkbox>\r\n                        </div>\r\n                        <div class=\"table-column name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"name-with-count\">\r\n                                    <div class=\"value\" [appTooltip]=\"category?.name\" placement=\"bottom-left\" delay=\"0\"\r\n                                        type=\"black\" [tooltipMandatory]=\"false\">{{category?.name}}</div>\r\n                                </div>\r\n                                <div class=\"within-part\" *ngIf=\"category?.parent_category_name?.length>0\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\"\r\n                                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                        <span\r\n                                            *ngFor=\"let parent of category?.parent_category_name;let j=index\">{{(j!=(category?.parent_category_name?.length-1))?\r\n                                            parent+' < ':parent}} </span>\r\n                                    </span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column action\">\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n            <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</div>\r\n        </div>\r\n        <div class=\"confirmation-bottom\">\r\n            <div class=\"message\">Are you sure you would like to proceed?</div>\r\n            <div class=\"button-group\">\r\n                <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\r\n                <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-floating-bar [selectedData]=\"categoryData.selectedCategories\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Category selected'\"\r\n        [pluralText]=\"'Categories selected'\" (closeEvent)=\"save()\"\r\n        (deleteEvent)=\"removeCategories($event)\" (closeList)=\"backToPrograms()\">\r\n    </app-floating-bar>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n </div>\r\n",
+                    template: "<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"!showCategories && !hideProgramsList\">\r\n    <div class=\"program-listing-head\">\r\n        <h3 class=\"program-listing-title\">Select a Program</h3>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n        <div class=\"filter-card-row\">\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTab('regulations')\">\r\n                <div class=\"left\">\r\n                    <label>REGULATIONS</label>\r\n                    <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n                        {{programData?.SelectedRegulationProgramsCount}}\r\n                        {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTab('standards')\">\r\n                <div class=\"left\">\r\n                    <label>STANDARDS</label>\r\n                    <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n                        {{programData?.SelectedStandardProgramsCount}}\r\n                        {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'internal_controls'\"\r\n                (click)=\"changeTab('internal_controls')\">\r\n                <div class=\"left\">\r\n                    <label>INTERNAL CONTROLS</label>\r\n                    <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n                        {{programData?.SelectedInternalControlsProgramsCount}}\r\n                        {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span>\r\n            </div>\r\n            <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTab('others')\">\r\n                <div class=\"left\">\r\n                    <label>OTHERS</label>\r\n                    <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n                        {{programData?.SelectedOthersProgramsCount}}\r\n                        {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n                    </p>\r\n                </div>\r\n                <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span>\r\n            </div>\r\n        </div>\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchProgram (keyup.enter)=\"handleSearch($event.target.value)\"\r\n                placeholder=\"Search Programs\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"programData.totalPages > 1\" [start]=\"programData.from\" [end]=\"programData.to\"\r\n            [total]=\"programData.totalRecords\" [pageCount]=\"programData.totalPages\"\r\n            [currentPage]=\"programData.currentPage\" (selectedPage)=\"changePage($event,'program')\"></app-pagination>\r\n        <div class=\"program-listing-part\" [class.with-category-list]=\"!showCategories && !hideProgramsList\">\r\n            <app-no-data *ngIf=\"programData?.data?.length==0 && !loader\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <div class=\"program-listing-item\" [class.active]=\"showCategories && currentProgram?._id == program?._id\"\r\n                *ngFor=\"let program of programData.data;let i = index\">\r\n                <div class=\"table-row main-list\" [class.active]=\"currentProgram?._id == program?._id\"\r\n                    [class.disabled]=\"false\" (click)=\"selectProgram(true,program)\">\r\n                    <div class=\"table-column serial\">\r\n                        <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n                            [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n                        <app-cs-radio [name]=\"'t'\" [checked]=\"currentProgram?._id == program?._id\"\r\n                            (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio>\r\n                    </div>\r\n                    <div class=\"table-column name\">\r\n                        <div class=\"name-inner\">\r\n                            <div class=\"name-with-count\">\r\n                                <div class=\"value\" [appTooltip]=\"program?.item_name\" placement=\"bottom-left\" delay=\"0\"\r\n                                    type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"table-column action\">\r\n                        <button class=\"arrow\" *ngIf=\"program?.child_id?.length\" [class.disabled]=\"false\"\r\n                            [disabled]=\"false\">\r\n                            <i *ngIf=\"!(showCategories && currentProgram?._id == program?._id)\"\r\n                                (click)=\"selectProgram($event,program)\" class=\"icons\">&#xe970;</i>\r\n                            <i *ngIf=\"showCategories && currentProgram?._id == program?._id\" class=\"icons\">&#xe9e8;</i>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n            <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</div>\r\n        </div>\r\n        <div class=\"confirmation-bottom\">\r\n            <div class=\"message\">Are you sure you would like to proceed?</div>\r\n            <div class=\"button-group\">\r\n                <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\r\n                <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-floating-bar [selectedData]=\"(currentProgram?.category_id)?[currentProgram]:[]\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Program selected'\" [pluralText]=\"'Programs selected'\" (closeEvent)=\"openCategories()\"\r\n        (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\">\r\n    </app-floating-bar>\r\n\r\n\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n</div>\r\n<div class=\"program-listing\" [class.animate]=\"animation\" *ngIf=\"showCategories || hideProgramsList\">\r\n    <div class=\"program-listing-head\">\r\n        <h3 class=\"program-listing-title\">\r\n            <button class=\"back-btn\" (click)=\"backToPrograms()\"><i class=\"icons\">&#xe91d;</i></button>\r\n             Program  > <span *ngIf=\"currentProgram?.name\"> {{currentProgram?.name}} > </span> Select Program Categories\r\n        </h3>\r\n    </div>\r\n    <div class=\"program-listing-body\">\r\n\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" #searchCategory (keyup.enter)=\"categorySearch($event.target.value)\"\r\n                placeholder=\"Search Categories\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"categoryData.totalPages > 1\" [start]=\"categoryData.from\" [end]=\"categoryData.to\"\r\n            [total]=\"categoryData.totalRecords\" [pageCount]=\"categoryData.totalPages\"\r\n            [currentPage]=\"categoryData.currentPage\" (selectedPage)=\"changePage($event,'category')\"></app-pagination>\r\n        <div class=\"program-listing-part\" [class.with-category-list]=\"showCategories && hideProgramsList\">\r\n            <app-no-data *ngIf=\"categoryData?.data?.length==0 && !loader\"\r\n                [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                [noDataText]=\"'No Data Found'\"></app-no-data>\r\n\r\n            <ng-container *ngIf=\"!loader && categoryData.data?.length\">\r\n                <div class=\"selected-area\" *ngIf=\"!loader && (currentProgram?.name ? categoryData.data?.length : programData?.data?.length)\">\r\n                    <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='checked'\" [ngValue]=\"true\"\r\n                        (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox>\r\n                    <app-cs-checkbox-indeterminate *ngIf=\"checkCategoriesSelection()=='indeterminate'\" [ngValue]=\"true\"\r\n                        (ngValueChange)=\"selectAllCategories(false)\">Deselect All</app-cs-checkbox-indeterminate>\r\n                    <app-cs-checkbox *ngIf=\"checkCategoriesSelection()=='unchecked'\" [ngValue]=\"false\"\r\n                        (ngValueChange)=\"selectAllCategories(true)\">Select All</app-cs-checkbox>\r\n\r\n                </div>\r\n                <div class=\"program-listing-item\" [class.active]=\"subList\">\r\n                    <div class=\"table-row main-list\" *ngFor=\"let category of categoryData.data;let i = index\"\r\n                        [class.active]=\"selectedIds.includes(category.category_id)\" [class.disabled]=\"false\">\r\n                        <div class=\"table-column serial\">\r\n                            <div class=\"sr-no\" [appTooltip]=\"i+1\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n                                [tooltipMandatory]=\"true\">{{i+1}}</div>\r\n                            <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n                                (ngValueChange)=\"selectCategory($event,category)\"></app-cs-checkbox>\r\n                        </div>\r\n                        <div class=\"table-column name\">\r\n                            <div class=\"name-inner\">\r\n                                <div class=\"name-with-count\">\r\n                                    <div class=\"value\" [appTooltip]=\"category?.name\" placement=\"bottom-left\" delay=\"0\"\r\n                                        type=\"black\" [tooltipMandatory]=\"false\">{{category?.name}}</div>\r\n                                </div>\r\n                                <div class=\"within-part\" *ngIf=\"category?.parent_category_name?.length>0\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\"\r\n                                        placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n                                        <span\r\n                                            *ngFor=\"let parent of category?.parent_category_name;let j=index\">{{(j!=(category?.parent_category_name?.length-1))?\r\n                                            parent+' < ':parent}} </span>\r\n                                    </span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"table-column action\">\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n            <div class=\"text\">Once you select this Program, all default values associated with this Program will also be updated.</div>\r\n        </div>\r\n        <div class=\"confirmation-bottom\">\r\n            <div class=\"message\">Are you sure you would like to proceed?</div>\r\n            <div class=\"button-group\">\r\n                <button class=\"no-btn\" (click)=\"saveChanges(false)\">NO</button>\r\n                <button class=\"yes-btn\" (click)=\"saveChanges(true)\">YES</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <app-floating-bar [selectedData]=\"categoryData.selectedCategories\" [displayElementKey]=\"'name'\"\r\n        [singularText]=\"'Category selected'\"\r\n        [pluralText]=\"'Categories selected'\" (closeEvent)=\"save()\"\r\n        (deleteEvent)=\"removeCategories($event)\" (closeList)=\"backToPrograms()\">\r\n    </app-floating-bar>\r\n    <app-loader *ngIf=\"loader\"></app-loader>\r\n </div>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .program-listing{background:#fff;border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:1}::ng-deep .program-listing.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .program-listing-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .program-listing-head button.back-btn{background:transparent;border:none;border-radius:0;font-size:16px;padding:0;margin:0 8px 0 0;position:relative;top:2px}::ng-deep .program-listing-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .program-listing-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .program-listing-body .filter-card{display:flex;align-items:center;border:1px solid #dbdbdb;border-radius:4px;height:55px;padding:12px 15px;width:100%;justify-content:space-between;cursor:pointer}::ng-deep .program-listing-body .filter-card.active{box-shadow:0 3px 6px #1e5dd31a}::ng-deep .program-listing-body .filter-card label{font-weight:600;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .program-listing-body .filter-card p{line-height:16px;font-size:10px;color:#161b2f;font-weight:600;margin:0}::ng-deep .program-listing-body .filter-card span.counter{display:flex;height:32px;min-width:32px;border-radius:4px;background:#042e7d;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 5px;line-height:32px}::ng-deep .program-listing-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .program-listing-body .filter-card+.filter-card{margin-left:10px}::ng-deep .program-listing-body .filter-card-row{display:flex;padding-bottom:15px}::ng-deep .program-listing-body .search-block{position:relative}::ng-deep .program-listing-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .program-listing-body .search-block input::-moz-placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:-ms-input-placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input::placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-listing-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .program-listing-body .program-listing-part{height:calc(100vh - 218px);overflow:auto;padding:0 12px 0 0;width:calc(100% + 12px)}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .program-listing-body .program-listing-part.with-category-list{height:calc(100vh - 300px)}::ng-deep .program-listing-body .program-listing-part .selected-area{background:#fff;height:32px;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:100%;height:16px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item{width:100%;position:relative}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .value{color:#161b2f;font-size:12px;font-weight:500;margin-left:24px}::ng-deep .program-listing-body .program-listing-part .table-head .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column{color:#747576;font-size:11px;font-weight:500;height:28px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px;text-transform:uppercase}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .main-list{cursor:pointer}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled{pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-radio{position:absolute;top:14px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:16px;height:16px;top:16px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .count{background:#1e5dd3;border-radius:20px;color:#fff;font-size:9px;font-weight:500;line-height:16px;min-width:24px;display:inline-block;text-align:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-radio{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row .table-column.name .name-inner .value{color:#747576;font-size:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-radio{opacity:1}::ng-deep .program-listing-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .program-listing-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .program-listing-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .program-listing-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .program-listing-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .program-listing-confirmation .confirmation-bottom{background:#282e48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important;font-size:11px!important;color:#747576!important}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}"]
                 },] }
     ];