npm - vcomply-workflow-engine - Versions diffs - 2.2.3 → 2.3.1 - Mend

vcomply-workflow-engine 2.2.3 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

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

@@ -379,6 +379,7 @@
                 responsibilityName: '',
                 rcId: null
             };
+            this.pid = '';
             this.issueData = {
                 auditPlanId: null,
                 auditPlanName: '',
@@ -387,6 +388,7 @@
             this.entrustButtonName = 'Entrust';
             this.convertFileData = {};
             this.selectedCategory = '';
+            this.selectedProgram = null;
             this.animation = true;
             this.workflowList = false;
             this.showMoreOption = true;
@@ -754,7 +756,7 @@
     WorkflowEngineContainerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-vcomply-workflow-engine-container',
-                    template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"workflow-engine-overlay\"></div>\r\n<div class=\"workflow-engine\" [class.animate]=\"animation\" [class.bg]=\"(!isWorkflowSelectorEnabled || riskBulkUpload?.showCategoryList) && (!policy?.showCreateDocuments)\">\r\n    <div class=\"workflow-engine-container\" [ngSwitch]=\"currentWorkflow?.code\" [class.with-preview-assessment]=\"(auth?.previewPanel | async) === true\">\r\n        <button (click)=\"closeWorkflowEngine()\" id = \"close-workflow-engine-btn\" class=\"close\" [appTooltip]=\"'[Esc] to close'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"\r\n            [class.disabled]=\"confirmationAlertConfig?.isVisible || !isWorkflowSelectorEnabled\"\r\n            [class.smiley-opened]=\"riskComponent?.showSmiley || logIssueComponent?.showSmiley || compliance?.showSmiley || (policy?.showCreateDocuments)\r\n         || responsibilityBulkUpload?.showSmiley || responsibilityBulkUpload?.showExcel || riskBulkUpload?.showSmiley || riskBulkUpload?.showExcel || program?.showSmiley\">\r\n            <i class=\"icons\">&#xe93f;</i>\r\n        </button>\r\n        <div *ngIf=\"!(uiKitService.isSmileyOn)\" class=\"workflow-engine-more\" [hidden]=\"showMoreOption === false || policy?.showCreateDocuments\"\r\n            [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.read-only]=\"uiKitService?.isLoader\">\r\n            <app-more-option #moreOption [currentWorkflow]=\"currentWorkflow.code\"  [isEditMode]=\"mode ==='EDIT'\"  [isRCSelected]=\"isRCSelected\" [openedFrom]=\"openedFrom\"\r\n                (selectedOption)=\"addMoreInfo($event)\">\r\n            </app-more-option>\r\n        </div>\r\n        <div  class=\"workflow-engine-form\"\r\n            [class.disabled]=\"confirmationAlertConfig?.isVisible\"\r\n            [class.no-shadow]=\"currentWorkflow?.code == 'AMR'|| currentWorkflow?.code == 'CMR' || currentWorkflow?.code == 'AAA' || uiKitService.isSmileyOn || policy?.showCreateDocuments\">\r\n            <div class=\"container\" (scroll)=\"scrollForm()\">\r\n               <ng-container *ngIf=\"!['VIEW_AUDIT_EXECUTION_SUMMARY','EXECUTE_AUDIT_PLAN'].includes(openedFrom)\">\r\n                <div *ngIf=\"!(uiKitService.isSmileyOn || policy?.showCreateDocuments)\" class=\"form-group-row\" #dropdownRow\r\n                    [class.disabled]=\"mode === 'EDIT' || !isWorkflowSelectorEnabled || disableWorkflowChange\">\r\n                    <div class=\"left\" [class.checked]=\"currentWorkflow\">\r\n                        <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                        </svg>\r\n                    </div>\r\n                    <div class=\"right \">\r\n                        <div class=\"vx-form-group\" #dropdown>\r\n                            <label class=\"vx-control-panel\">Select a Workflow<span class=\"required\">*</span></label>\r\n                            <div class=\"select\" *ngIf=\"!currentWorkflow\" (click)=\"editWorkflow()\">\r\n                                <input type=\"text\" placeholder=\"Select a Workflow\" readonly>\r\n                            </div>\r\n                            <div class=\"selected first-field\" *ngIf=\"currentWorkflow\">\r\n                              <!-- {{currentWorkflow | json}} -->\r\n                                <div class=\"chip-container\">\r\n                                    <span class=\"chip\" [class.disabled]=\"false\">{{currentWorkflow?.workflowName}}</span>\r\n                                </div>\r\n                                <button class=\"edit\" type=\"button\" (click)=\"editWorkflow()\" *ngIf=\"!workflowList\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                            </div>\r\n                            <div *ngIf=\"currentWorkflow?.code === 'CAPR' && currentBusinessCycle\" class=\"program-business-cycle vx-fs-11 vx-txt-white vx-d-flex vx-align-center vx-pt-2 vx-pb-1 vx-pl-2 vx-pr-1\"><i class=\"icons vx-fs-12 vx-mr-1\">&#xe963;</i> This program is being set-up for the business cycle: <span class=\"vx-fw-600 vx-ml-1\">{{currentBusinessCycle}}</span></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                </ng-container>\r\n                <!-- <app-create-documents></app-create-documents> -->\r\n                <!-- <app-bulk-view></app-bulk-view> -->\r\n                <!-- <app-bulk-responsibility-view></app-bulk-responsibility-view> -->\r\n                <app-workflow-compliance (disconnectRefresh)=\"isHostRefreshActive = $event\" [isEntrust]=\"entrustButtonName.toLowerCase() == 'entrust' \"  [responsibilityId]=\"id\" [mode]=\"mode\" [frameworkDetails]=\"frameworkDetails\"\r\n                    (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CAR'\" #responsibility\r\n                    (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\r\n                    (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\" [selectedRC]=\"selectedRC\"\r\n                    [openedFrom]=\"openedFrom\" (rcSelected)=\"onRcSelected($event)\" (resetForm)=\"onResetForm()\" (onRemovingCheckpoint)=\"onRemovingCheckpoint($event, false, true)\" (isAssessmentDisabled)=\"isAssessmentDisabled($event)\" (checkpointCountUpdated)=\"checkpointCount = $event;\"></app-workflow-compliance>\r\n                <app-workflow-risk [secondaryOpenPortal]=\"secondaryOpenPortal\" [openedFrom]=\"openedFrom\" (disconnectRefresh)=\"isHostRefreshActive = $event\"  *ngSwitchCase=\"'AAR'\" #risk (showConfirmationAlert)=\"showConfirmationPopup($event)\"\r\n                (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\"\r\n                    (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [riskId]=\"id\"></app-workflow-risk>\r\n                <app-workflow-policy (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'CAP'\" #policy\r\n                 (showConfirmationAlert)=\"showConfirmationPopup($event)\"  (shiftToEditMode)=\"shiftToEditMode()\"\r\n                 [policyId]=\"id\" [mode]=\"mode\" [convertFileData]=\"convertFileData\" [selectedCategory]=\"selectedCategory\"\r\n                (populateOption)=\"populateMoreOption($event)\"(pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-policy>\r\n                <app-workflow-survey-form *ngSwitchCase=\"'CAS'\" #surveyForm></app-workflow-survey-form>\r\n                <app-add-multiple-risk (disconnectRefresh)=\"isHostRefreshActive = $event\"   *ngSwitchCase=\"'AMR'\" #multipleRisk\r\n                    (pickerChanged)=\"decideViewMoreOption($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"></app-add-multiple-risk>\r\n                <app-add-multiple-responsibility  (disconnectRefresh)=\"isHostRefreshActive = $event\"    (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CMR'\" #multipleResponsibility>\r\n                </app-add-multiple-responsibility>\r\n                <!-- New Log an Issue -->\r\n                <app-log-an-issue [issueDetails]=\"issueData\" *ngSwitchCase=\"'LAI'\" [reponsibilityData]=\"reponsibilityData\" [openedFrom]=\"openedFrom\" [issueId]=\"id\"\r\n                    #logAnIssue (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\r\n                    (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" [(mode)]=\"mode\">\r\n                </app-log-an-issue>\r\n                <!-- Old Log an issue -->\r\n                <!-- <app-log-an-issue *ngSwitchCase=\"'LAI'\" [responsibilitiesData]=\"reponsibiltyData\" [openedFrom]=\"openedFrom\"\r\n                #logAnIssue (closeWorkflow)=\"closeWorkflowEngine($event)\"\r\n                (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\">\r\n            </app-log-an-issue> -->\r\n\r\n            <app-workflow-assessment [assessmentId]=\"id\" (pickerChanged)=\"decideViewMoreOption($event)\" [openedFrom]=\"openedFrom\" (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAA'\" (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" [mode]=\"mode\" #assessment></app-workflow-assessment>\r\n            <app-import-an-assessment  (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'IAA'\" (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" #importAssessment></app-import-an-assessment>\r\n            <!-- <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"></app-workflow-program> -->\r\n            <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\" (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [programId]=\"id\"></app-workflow-program>\r\n            </div>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAR'\"\r\n                (click)=\"submit()\">{{mode==='EDIT' && openedFrom !== 'MOVE_TO_REGISTER' ? 'Update' : 'Add'}}</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !riskBulkUpload?.category?.selectedCategory\"\r\n             (click)=\"bulkUploadBrowse('AMR')\"\r\n                *ngSwitchCase=\"'AMR'\">Browse</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('CMR')\"\r\n                *ngSwitchCase=\"'CMR'\">Browse</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\"\r\n                *ngSwitchCase=\"'CAR'\">{{entrustButtonName !== '' ? entrustButtonName : 'Entrust'}}</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\"\r\n             *ngSwitchCase=\"'CAP'\">{{(convertFileData.fileName)?'NEXT':((mode=='EDIT')? 'Update':'Continue to draft')}}</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'CAS'\">\r\n               Continue to draft </button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'LAI'\"\r\n                (click)=\"submit()\">{{mode==='EDIT' ? 'Update' : 'Add'}}</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAA'\" (click)=\"submit()\">{{mode === 'EDIT' ? 'Update' : 'Continue to draft'}}</button>\r\n            <button  class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('IAA')\"\r\n                *ngSwitchCase=\"'IAA'\">Browse</button>\r\n                <button  class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\r\n                *ngSwitchCase=\"'CAPR'\">Save</button>\r\n            <div class=\"dropdown\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\" [style.top.px]=\"dropdownTop\"\r\n                [style.left.px]=\"dropdownLeft\" [style.width.px]=\"dropdownWidth\">\r\n                <ul class=\"dropdown-list\">\r\n                    <li *ngFor=\"let workflow of workflowTypeList\" (click)=\"changeWorkflow($event,workflow)\">\r\n                        <app-cs-radio [value]=\"workflow?.code\" [checked]=\"currentWorkflow?.code===workflow?.code\">\r\n                            {{workflow?.workflowName}}</app-cs-radio>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div class=\"dropdown-overlay\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\"></div>\r\n        </div>\r\n        <app-confirmation-alert (action)=\"confirmWorkflowChange($event)\" *ngIf=\"confirmationAlertConfig?.isVisible\"\r\n            [message]=\"confirmationAlertConfig?.message\" [config]=\"confirmationAlertConfig\"></app-confirmation-alert>\r\n    </div>\r\n</div>\r\n",
+                    template: "<app-snack-bar></app-snack-bar>\r\n<div class=\"workflow-engine-overlay\"></div>\r\n<div class=\"workflow-engine\" [class.animate]=\"animation\" [class.bg]=\"(!isWorkflowSelectorEnabled || riskBulkUpload?.showCategoryList) && (!policy?.showCreateDocuments)\">\r\n    <div class=\"workflow-engine-container\" [ngSwitch]=\"currentWorkflow?.code\" [class.with-preview-assessment]=\"(auth?.previewPanel | async) === true\">\r\n        <button (click)=\"closeWorkflowEngine()\" id = \"close-workflow-engine-btn\" class=\"close\" [appTooltip]=\"'[Esc] to close'\" placement=\"left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\"\r\n            [class.disabled]=\"confirmationAlertConfig?.isVisible || !isWorkflowSelectorEnabled\"\r\n            [class.smiley-opened]=\"riskComponent?.showSmiley || logIssueComponent?.showSmiley || compliance?.showSmiley || (policy?.showCreateDocuments)\r\n         || responsibilityBulkUpload?.showSmiley || responsibilityBulkUpload?.showExcel || riskBulkUpload?.showSmiley || riskBulkUpload?.showExcel || program?.showSmiley\">\r\n            <i class=\"icons\">&#xe93f;</i>\r\n        </button>\r\n        <div *ngIf=\"!(uiKitService.isSmileyOn)\" class=\"workflow-engine-more\" [hidden]=\"showMoreOption === false || policy?.showCreateDocuments\"\r\n            [class.disabled]=\"confirmationAlertConfig?.isVisible\" [class.read-only]=\"uiKitService?.isLoader\">\r\n            <app-more-option #moreOption [currentWorkflow]=\"currentWorkflow.code\"  [isEditMode]=\"mode ==='EDIT'\"  [isRCSelected]=\"isRCSelected\" [openedFrom]=\"openedFrom\"\r\n                (selectedOption)=\"addMoreInfo($event)\">\r\n            </app-more-option>\r\n        </div>\r\n        <div  class=\"workflow-engine-form\"\r\n            [class.disabled]=\"confirmationAlertConfig?.isVisible\"\r\n            [class.no-shadow]=\"currentWorkflow?.code == 'AMR'|| currentWorkflow?.code == 'CMR' || currentWorkflow?.code == 'AAA' || uiKitService.isSmileyOn || policy?.showCreateDocuments\">\r\n            <div class=\"container\" (scroll)=\"scrollForm()\">\r\n               <ng-container *ngIf=\"!['VIEW_AUDIT_EXECUTION_SUMMARY','EXECUTE_AUDIT_PLAN'].includes(openedFrom)\">\r\n                <div *ngIf=\"!(uiKitService.isSmileyOn || policy?.showCreateDocuments)\" class=\"form-group-row\" #dropdownRow\r\n                    [class.disabled]=\"mode === 'EDIT' || !isWorkflowSelectorEnabled || disableWorkflowChange\">\r\n                    <div class=\"left\" [class.checked]=\"currentWorkflow\">\r\n                        <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                            <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                            <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                        </svg>\r\n                    </div>\r\n                    <div class=\"right \">\r\n                        <div class=\"vx-form-group\" #dropdown>\r\n                            <label class=\"vx-control-panel\">Select a Workflow<span class=\"required\">*</span></label>\r\n                            <div class=\"select\" *ngIf=\"!currentWorkflow\" (click)=\"editWorkflow()\">\r\n                                <input type=\"text\" placeholder=\"Select a Workflow\" readonly>\r\n                            </div>\r\n                            <div class=\"selected first-field\" *ngIf=\"currentWorkflow\">\r\n                              <!-- {{currentWorkflow | json}} -->\r\n                                <div class=\"chip-container\">\r\n                                    <span class=\"chip\" [class.disabled]=\"false\">{{currentWorkflow?.workflowName}}</span>\r\n                                </div>\r\n                                <button class=\"edit\" type=\"button\" (click)=\"editWorkflow()\" *ngIf=\"!workflowList\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                            </div>\r\n                            <div *ngIf=\"currentWorkflow?.code === 'CAPR' && currentBusinessCycle\" class=\"program-business-cycle vx-fs-11 vx-txt-white vx-d-flex vx-align-center vx-pt-2 vx-pb-1 vx-pl-2 vx-pr-1\"><i class=\"icons vx-fs-12 vx-mr-1\">&#xe963;</i> This program is being set-up for the business cycle: <span class=\"vx-fw-600 vx-ml-1\">{{currentBusinessCycle}}</span></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                </ng-container>\r\n                <!-- <app-create-documents></app-create-documents> -->\r\n                <!-- <app-bulk-view></app-bulk-view> -->\r\n                <!-- <app-bulk-responsibility-view></app-bulk-responsibility-view> -->\r\n                <app-workflow-compliance (disconnectRefresh)=\"isHostRefreshActive = $event\" [isEntrust]=\"entrustButtonName.toLowerCase() == 'entrust' \"  [responsibilityId]=\"id\" [mode]=\"mode\" [frameworkDetails]=\"frameworkDetails\"\r\n                    (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CAR'\" #responsibility\r\n                    (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\"\r\n                    (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\" [selectedRC]=\"selectedRC\"\r\n                    [openedFrom]=\"openedFrom\" (rcSelected)=\"onRcSelected($event)\" (resetForm)=\"onResetForm()\" (onRemovingCheckpoint)=\"onRemovingCheckpoint($event, false, true)\" (isAssessmentDisabled)=\"isAssessmentDisabled($event)\" (checkpointCountUpdated)=\"checkpointCount = $event;\" [selectedProgram]=\"selectedProgram\"></app-workflow-compliance>\r\n                <app-workflow-risk [secondaryOpenPortal]=\"secondaryOpenPortal\" [openedFrom]=\"openedFrom\" (disconnectRefresh)=\"isHostRefreshActive = $event\"  *ngSwitchCase=\"'AAR'\" #risk (showConfirmationAlert)=\"showConfirmationPopup($event)\"\r\n                (hideElementsFromMoreOptions)=\"hideElementsFromMoreOptions($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\"\r\n                    (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [riskId]=\"id\"></app-workflow-risk>\r\n                <app-workflow-policy (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'CAP'\" #policy\r\n                 (showConfirmationAlert)=\"showConfirmationPopup($event)\"  (shiftToEditMode)=\"shiftToEditMode()\"\r\n                 [policyId]=\"id\" [mode]=\"mode\" [convertFileData]=\"convertFileData\" [selectedCategory]=\"selectedCategory\"\r\n                (populateOption)=\"populateMoreOption($event)\"(pickerChanged)=\"decideViewMoreOption($event)\"></app-workflow-policy>\r\n                <app-workflow-survey-form *ngSwitchCase=\"'CAS'\" #surveyForm></app-workflow-survey-form>\r\n                <app-add-multiple-risk (disconnectRefresh)=\"isHostRefreshActive = $event\"   *ngSwitchCase=\"'AMR'\" #multipleRisk\r\n                    (pickerChanged)=\"decideViewMoreOption($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\"></app-add-multiple-risk>\r\n                <app-add-multiple-responsibility  (disconnectRefresh)=\"isHostRefreshActive = $event\"    (closeWorkflow)=\"closeWorkflowEngine($event)\" *ngSwitchCase=\"'CMR'\" #multipleResponsibility>\r\n                </app-add-multiple-responsibility>\r\n                <!-- New Log an Issue -->\r\n                <app-log-an-issue [issueDetails]=\"issueData\" *ngSwitchCase=\"'LAI'\" [reponsibilityData]=\"reponsibilityData\" [openedFrom]=\"openedFrom\" [issueId]=\"id\"\r\n                    #logAnIssue (disconnectRefresh)=\"isHostRefreshActive = $event\" (closeWorkflow)=\"closeWorkflowEngine($event)\"\r\n                    (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" [(mode)]=\"mode\">\r\n                </app-log-an-issue>\r\n                <!-- Old Log an issue -->\r\n                <!-- <app-log-an-issue *ngSwitchCase=\"'LAI'\" [responsibilitiesData]=\"reponsibiltyData\" [openedFrom]=\"openedFrom\"\r\n                #logAnIssue (closeWorkflow)=\"closeWorkflowEngine($event)\"\r\n                (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\">\r\n            </app-log-an-issue> -->\r\n\r\n            <app-workflow-assessment [assessmentId]=\"id\" (pickerChanged)=\"decideViewMoreOption($event)\" [openedFrom]=\"openedFrom\" (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'AAA'\" (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" [mode]=\"mode\" #assessment></app-workflow-assessment>\r\n            <app-import-an-assessment  (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\" *ngSwitchCase=\"'IAA'\" (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" #importAssessment></app-import-an-assessment>\r\n            <!-- <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\"></app-workflow-program> -->\r\n            <app-workflow-program #program *ngSwitchCase=\"'CAPR'\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\" (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [programId]=\"id\"></app-workflow-program>\r\n            </div>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAR'\"\r\n                (click)=\"submit()\">{{mode==='EDIT' && openedFrom !== 'MOVE_TO_REGISTER' ? 'Update' : 'Add'}}</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !riskBulkUpload?.category?.selectedCategory\"\r\n             (click)=\"bulkUploadBrowse('AMR')\"\r\n                *ngSwitchCase=\"'AMR'\">Browse</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('CMR')\"\r\n                *ngSwitchCase=\"'CMR'\">Browse</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\"\r\n                *ngSwitchCase=\"'CAR'\">{{entrustButtonName !== '' ? entrustButtonName : 'Entrust'}}</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\"\r\n             *ngSwitchCase=\"'CAP'\">{{(convertFileData.fileName)?'NEXT':((mode=='EDIT')? 'Update':'Continue to draft')}}</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'CAS'\">\r\n               Continue to draft </button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'LAI'\"\r\n                (click)=\"submit()\">{{mode==='EDIT' ? 'Update' : 'Add'}}</button>\r\n            <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" *ngSwitchCase=\"'AAA'\" (click)=\"submit()\">{{mode === 'EDIT' ? 'Update' : 'Continue to draft'}}</button>\r\n            <button  class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"bulkUploadBrowse('IAA')\"\r\n                *ngSwitchCase=\"'IAA'\">Browse</button>\r\n                <button  class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled || !program?.valid\" (click)=\"submit('CAPR')\"\r\n                *ngSwitchCase=\"'CAPR'\">Save</button>\r\n            <div class=\"dropdown\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\" [style.top.px]=\"dropdownTop\"\r\n                [style.left.px]=\"dropdownLeft\" [style.width.px]=\"dropdownWidth\">\r\n                <ul class=\"dropdown-list\">\r\n                    <li *ngFor=\"let workflow of workflowTypeList\" (click)=\"changeWorkflow($event,workflow)\">\r\n                        <app-cs-radio [value]=\"workflow?.code\" [checked]=\"currentWorkflow?.code===workflow?.code\">\r\n                            {{workflow?.workflowName}}</app-cs-radio>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n            <div class=\"dropdown-overlay\" *ngIf=\"workflowList\" (click)=\"closeWorkflowList()\"></div>\r\n        </div>\r\n        <app-confirmation-alert (action)=\"confirmWorkflowChange($event)\" *ngIf=\"confirmationAlertConfig?.isVisible\"\r\n            [message]=\"confirmationAlertConfig?.message\" [config]=\"confirmationAlertConfig\"></app-confirmation-alert>\r\n    </div>\r\n</div>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");.dropdown-overlay{z-index:2}.dropdown-overlay,.workflow-engine{position:fixed;top:0;right:0;bottom:0;left:0}.workflow-engine{background:rgba(0,0,0,.7);z-index:10}.workflow-engine button.close{position:absolute;background:transparent;cursor:pointer;border:none;font-size:18px;color:#000;top:5px;right:2px;z-index:12;padding:0;display:flex;align-items:center;justify-content:center;height:36px;width:36px;border-radius:2px}.workflow-engine button.close.bulk-opened,.workflow-engine button.close.smiley-opened{z-index:10}.workflow-engine button.close:hover{background:#f1f1f1}.workflow-engine button.close.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-container{position:fixed;top:0;right:0;bottom:0;background:#fff;display:flex;z-index:10;border-top:3px solid #1e5dd3}.workflow-engine-container:before{content:\"\";height:30px;position:absolute;top:0;right:0;width:499px;z-index:11;background:linear-gradient(180deg,#fff 0,hsla(0,0%,100%,.75) 66%,hsla(0,0%,100%,.42) 81%,hsla(0,0%,100%,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#ffffff\",endColorstr=\"#00ffffff\",GradientType=0)}.workflow-engine-container.with-preview-assessment:before,.workflow-engine-container.with-preview-assessment button.close{display:none}.workflow-engine-container.with-preview-assessment .workflow-engine-form{right:-470px}.workflow-engine-container.with-preview-assessment .workflow-engine-form .container ::ng-deep app-workflow-compliance .workflw-compliance{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-container.with-preview-assessment .workflow-engine-form button.submit{filter:grayscale(1)!important;pointer-events:none!important}.workflow-engine-more{width:318px;padding:36px 22px 36px 40px;height:100vh;overflow:auto;margin-left:-18px;scrollbar-width:none}@media screen and (max-height:900px){.workflow-engine-more{padding:20px 22px 36px 40px}}.workflow-engine-more::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.workflow-engine-more::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.workflow-engine-more::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.workflow-engine-more.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-more.read-only{pointer-events:none}.workflow-engine-form{width:500px;position:relative}.workflow-engine-form .container{height:calc(100vh - 53px);padding:35px 24px 12px 62px;overflow:hidden;overflow-y:auto;margin-left:-22px;scrollbar-width:thin}.workflow-engine-form .container.disabled{pointer-events:none}.workflow-engine-form:before{content:\"\";top:0;bottom:-50px;left:0;width:1px;background:#f1f1f1;position:absolute}.workflow-engine-form button.submit{position:sticky;height:50px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:48px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%;bottom:0;padding:0}.workflow-engine-form button.submit:disabled{background:#f1f1f1;border-color:#f1f1f1;pointer-events:none;cursor:not-allowed;color:#747576}.workflow-engine-form button.submit.disabled{pointer-events:none;opacity:.3;filter:grayscale(1)}.workflow-engine-form.disabled{filter:grayscale(1);pointer-events:none}.workflow-engine-form label.browse{padding:0;margin:0;display:block;position:sticky;bottom:0}.workflow-engine-form label.browse span{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:100%}.workflow-engine-form label.browse input{position:absolute;width:100%;height:100%;z-index:1;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.workflow-engine-form .file-browsed{display:flex;align-items:center;background:#fff;border-top:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1}.workflow-engine-form .file-browsed span{display:block;width:calc(100% - 164px);color:#161b2f;font-size:13px;font-weight:400;line-height:20px;padding:0 16px}.workflow-engine-form .file-browsed button{height:50px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:19px;letter-spacing:3.08px;color:#fff;background:#1e5dd3;cursor:pointer;border:1px solid #1e5dd3;outline:none;border-radius:0;text-transform:uppercase;font-weight:600;width:164px;bottom:0}.workflow-engine-form:after{content:\"\";height:30px;position:absolute;right:0;bottom:50px;z-index:10;background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.75) 22%,#fff);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#00ffffff\",endColorstr=\"#ffffff\",GradientType=0)}.workflow-engine-form.no-shadow:after{display:none}.workflow-engine.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}.workflow-engine.bg{background:#fff}.program-business-cycle{background:#f2bf19;border-radius:0 0 .25rem .25rem;position:relative;top:-.25rem;z-index:1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.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}.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}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.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}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.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}.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}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}"]
                 },] }
     ];
@@ -777,11 +779,13 @@
         defaultRiskType: [{ type: i0.Input }],
         moveToRegisterMode: [{ type: i0.Input }],
         reponsibilityData: [{ type: i0.Input }],
+        pid: [{ type: i0.Input }],
         issueData: [{ type: i0.Input }],
         entrustButtonName: [{ type: i0.Input }],
         config: [{ type: i0.Input }],
         convertFileData: [{ type: i0.Input }],
         selectedCategory: [{ type: i0.Input }],
+        selectedProgram: [{ type: i0.Input }],
         riskComponent: [{ type: i0.ViewChild, args: ['risk', { static: false },] }],
         riskBulkUpload: [{ type: i0.ViewChild, args: ['multipleRisk', { static: false },] }],
         responsibilityBulkUpload: [{ type: i0.ViewChild, args: ['multipleResponsibility', { static: false },] }],
@@ -2028,16 +2032,16 @@
                 this.env = config.envConfig;
             }
         }
-        ResponsibilityService.prototype.getResponsibilityCenterList = function () {
+        ResponsibilityService.prototype.getResponsibilityCenterList = function (params) {
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
             return this.http.get(this.env.complianceGet + 'responsibilityCenterTree', {
-                headers: headers,
+                params: params, headers: headers
             }).pipe(operators.retry(2));
         };
-        ResponsibilityService.prototype.getOrganizationGroups = function () {
+        ResponsibilityService.prototype.getOrganizationGroups = function (params) {
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
             return this.http.get(this.env.organizationGet + 'groupsList&status=1&type=compliance', {
-                headers: headers,
+                params: params, headers: headers,
             }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getOrganizationUsers = function () {
@@ -2046,10 +2050,10 @@
                 headers: headers,
             }).pipe(operators.retry(2));
         };
-        ResponsibilityService.prototype.getOrganizationPeople = function () {
+        ResponsibilityService.prototype.getOrganizationPeople = function (params) {
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
             return this.http.get(this.env.organizationGet + 'people', {
-                headers: headers,
+                params: params, headers: headers
             }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getAssignorsList = function () {
@@ -2064,6 +2068,18 @@
                 headers: headers,
             }).pipe(operators.retry(2));
         };
+        ResponsibilityService.prototype.getProgramsList = function (params) {
+            var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
+            return this.http.get(this.env.complianceGet + 'complianceCategory/programList', {
+                params: params, headers: headers
+            }).pipe(operators.retry(2));
+        };
+        ResponsibilityService.prototype.getCategoriesUnderProgram = function (params) {
+            var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
+            return this.http.get(this.env.complianceGet + 'complianceCategory/CategoryListTree', {
+                params: params, headers: headers
+            }).pipe(operators.retry(2));
+        };
         ResponsibilityService.prototype.getAssurance = function () {
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
             return this.http.get(this.env.assuranceGet + 'category/list&id=1', {
@@ -2109,13 +2125,13 @@
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
             return this.http.post(this.env.compliancePost + 'file/upload', file, { headers: headers }).pipe(operators.retry(2));
         };
-        ResponsibilityService.prototype.getAssessmentCategory = function (payload) {
+        ResponsibilityService.prototype.getAssessmentCategory = function (payload, program_ids) {
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.post(this.env.assessmentEnpoint + 'category/list&isCreateResponsibility=true', payload, { headers: headers }).pipe(operators.retry(2));
+            return this.http.post(this.env.assessmentEnpoint + 'category/list&isCreateResponsibility=true' + (program_ids ? '&program_ids=' + program_ids : ''), payload, { headers: headers }).pipe(operators.retry(2));
         };
-        ResponsibilityService.prototype.getAssessmentList = function (payload, id) {
+        ResponsibilityService.prototype.getAssessmentList = function (payload, id, program_ids) {
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
-            return this.http.post(this.env.assessmentEnpoint + 'assessment/selectAssessment&isCreateResponsibility=true&catid=' + id, payload, { headers: headers }).pipe(operators.retry(2));
+            return this.http.post(this.env.assessmentEnpoint + 'assessment/selectAssessment&isCreateResponsibility=true&catid=' + id + (program_ids ? '&program_ids=' + program_ids : ''), payload, { headers: headers }).pipe(operators.retry(2));
         };
         ResponsibilityService.prototype.getAssessmentDetailsByID = function (id) {
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
@@ -2583,12 +2599,14 @@
     ]; };
     var WorkflowComplianceComponent = /** @class */ (function () {
-        function WorkflowComplianceComponent(authService, responsibilityService, frequencyService, uiKitService, snackBar) {
+        function WorkflowComplianceComponent(authService, responsibilityService, frequencyService, uiKitService, snackBar, permission) {
+            var _this = this;
             this.authService = authService;
             this.responsibilityService = responsibilityService;
             this.frequencyService = frequencyService;
             this.uiKitService = uiKitService;
             this.snackBar = snackBar;
+            this.permission = permission;
             this.mode = 'CREATE';
             this.responsibilityId = '';
             this.frameworkDetails = [];
@@ -2602,6 +2620,7 @@
             this.checkpointCountUpdated = new i0.EventEmitter();
             this.rcSelected = new i0.EventEmitter();
             this.selectedRC = 0; // 4-5 digit id of selected rc by default when opened from risk treatment
+            this.selectedProgram = null;
             this.scrollToBottom = false;
             this.description = {
                 mode: 'prime',
@@ -2658,6 +2677,8 @@
                 objective: '',
                 rc: [],
                 category: [],
+                program: [],
+                program_selected_ids: [],
                 checkpointInstruction: '',
                 customTags: [],
                 checkpoints: [],
@@ -2699,6 +2720,7 @@
                 OBJECTIVE: false,
                 RC: false,
                 CATEGORY: false,
+                PROGRAM: false,
                 FORMATE_EVIDENCE: false,
                 CHECKPOINTS: false,
                 ASSESSMENT: false,
@@ -2711,7 +2733,7 @@
                 CHECKPOINTS_NEW: false
             };
             this.activeSelector = '';
-            this.sideSelectorElements = ['assurance', 'framework', 'assignors', 'assignees', 'category', 'rc', 'checkpoints', 'frequency', 'reviewer', 'reviewerFrequency', 'overseer', 'overseerNotify', 'riskCalculator', 'isAssessment', 'requires_audit', 'checkpoints-new'];
+            this.sideSelectorElements = ['assurance', 'framework', 'assignors', 'assignees', 'category', 'program', 'rc', 'checkpoints', 'frequency', 'reviewer', 'reviewerFrequency', 'overseer', 'overseerNotify', 'riskCalculator', 'isAssessment', 'requires_audit', 'checkpoints-new'];
             this.displayList = {
             // assignors: false,
             // assignees: false,
@@ -2751,6 +2773,7 @@
                     selectedList: []
                 }
             };
+            this.allPrograms = [];
             this.riskClassification = [
                 { name: 'Low', value: 1, class: 'low' },
                 { name: 'Low-Medium', value: 2, class: 'low-med' },
@@ -2761,6 +2784,7 @@
             this.rcMode = 'checkbox';
             this.invalidType = '';
             this.assigneeRadioSelect = false;
+            this.programsList = [];
             // frequency variable declaration
             this.frequencyDetails = {
                 pattern: '',
@@ -2790,9 +2814,25 @@
             this.isSample = false;
             this.tempCheckValue = -1;
             this.isAssessment = false;
+            this.managePermission = false;
             this.checkpointCount = 0;
             this.onRemovingCheckpoint = new i0.EventEmitter();
             this.isAssessmentDisabled = new i0.EventEmitter();
+            this.unSubscribeProgram = new rxjs.Subject();
+            this.authService.getUserInfo().subscribe(function (res) {
+                var complianceSubmodule = res.roleActions[res.roleActions.findIndex(function (ele) { return ele.moduleName == 'compliance'; })].subModule;
+                var permissions = complianceSubmodule[complianceSubmodule.findIndex(function (ele) { return ele.subModuleName == 'Programs'; })].permissions;
+                _this.managePermission = (permissions[permissions.findIndex(function (ele) { return ele.name == 'manage programs'; })].enable) ? true : false;
+                if (_this.managePermission) {
+                    _this.hiddenList.push('CATEGORY');
+                    _this.categoriesListLoaded = true;
+                }
+                else {
+                    _this.hiddenList.push('PROGRAM');
+                    _this.getCategoryList();
+                }
+                _this.hideElementsFromMoreOptions.emit(_this.hiddenList);
+            });
         }
         WorkflowComplianceComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -2802,7 +2842,6 @@
             this.uiKitService.isLoader = true;
             this.hiddenList.push('ASSESSMENT');
             this.getRCList();
-            this.getCategoryList();
             this.getAssignorsList();
             this.getAssigneesList();
             this.getAssurance();
@@ -2827,7 +2866,6 @@
             });
             this.authService.getSubscriptionDetails().subscribe(function (res) {
                 _this.subscriptionDetails = res;
-                console.log("this.subscriptionDetails.assessment_flag", _this.subscriptionDetails);
                 if (_this.subscriptionDetails[0].assessment_flag) {
                     _this.hiddenList = _this.hiddenList.filter(function (ele) { return ele !== 'ASSESSMENT'; });
                     _this.hideElementsFromMoreOptions.emit(_this.hiddenList);
@@ -2870,9 +2908,13 @@
                 this.moreOptions[event.code] = event.checked;
             }
         };
-        WorkflowComplianceComponent.prototype.getRCList = function () {
+        WorkflowComplianceComponent.prototype.getRCList = function (program_id) {
             var _this = this;
-            this.responsibilityService.getResponsibilityCenterList().subscribe(function (res) {
+            var params = new i1.HttpParams();
+            if (program_id) {
+                params = params.append('program_ids', program_id);
+            }
+            this.responsibilityService.getResponsibilityCenterList(params).subscribe(function (res) {
                 _this.responsibilityCentersList = res;
                 _this.rcListLoaded = true;
                 if (_this.openedFrom === 'RISK_TREATMENT') {
@@ -2958,6 +3000,27 @@
                 _this.categoriesListLoaded = true;
             });
         };
+        WorkflowComplianceComponent.prototype.filterListsAccordingToProgram = function (program_id) {
+            this.responsibilityForm.rc = [];
+            this.responsibilityForm.assignees.list = [];
+            this.responsibilityForm.reviewers.list = [];
+            this.responsibilityForm.overseers.list = [];
+            this.responsibilityForm.overseers.notifyList = [];
+            this.responsibilityForm.assessment = { assessment_id: "", category_id: "" };
+            this.groupsList = [];
+            this.unSubscribeProgram.next();
+            this.unSubscribeProgram.complete();
+            if (program_id) {
+                this.getPeopleListAgainstPID(program_id);
+                this.getRCList(program_id);
+                this.getGroupsList(program_id);
+            }
+            else {
+                this.getAssigneesList();
+                this.getRCList();
+                this.getGroupsList();
+            }
+        };
         WorkflowComplianceComponent.prototype.getAssignorsList = function () {
             var _this = this;
             this.responsibilityService.getAssignorsList().subscribe(function (res) {
@@ -2969,9 +3032,13 @@
                 _this.assignorsListLoaded = true;
             });
         };
-        WorkflowComplianceComponent.prototype.getAssigneesList = function () {
+        WorkflowComplianceComponent.prototype.getAssigneesList = function (program_id) {
             var _this = this;
-            this.responsibilityService.getOrganizationPeople().subscribe(function (res) {
+            var params = new i1.HttpParams();
+            if (program_id) {
+                params = params.append('program_ids', program_id);
+            }
+            this.responsibilityService.getOrganizationPeople(params).subscribe(function (res) {
                 _this.allUsersList = res.map(function (user) {
                     user.member_name = user.employee_name;
                     return user;
@@ -2983,12 +3050,39 @@
                 _this.assigneesListLoaded = true;
             });
         };
-        WorkflowComplianceComponent.prototype.getGroupsList = function () {
+        WorkflowComplianceComponent.prototype.getPeopleListAgainstPID = function (program_id) {
             var _this = this;
-            this.responsibilityService.getOrganizationGroups().subscribe(function (res) {
+            var params = new i1.HttpParams();
+            if (program_id) {
+                params = params.append('program_ids', program_id);
+            }
+            this.responsibilityService.getOrganizationPeople(params).subscribe(function (res) {
+                _this.assigneesList = res.assignee.map(function (user) {
+                    user.member_name = user.employee_name;
+                    return user;
+                });
+                _this.overseersList = res.overseer.map(function (user) {
+                    user.member_name = user.employee_name;
+                    return user;
+                });
+                _this.reviewersList = res.reviewer.map(function (user) {
+                    user.member_name = user.employee_name;
+                    return user;
+                });
+            }, function (err) {
+                console.error(err);
+            });
+        };
+        WorkflowComplianceComponent.prototype.getGroupsList = function (program_id) {
+            var _this = this;
+            var params = new i1.HttpParams();
+            if (program_id) {
+                params = params.append('program_ids', program_id);
+            }
+            this.responsibilityService.getOrganizationGroups(params).pipe(rxjs.takeUntil(this.unSubscribeProgram)).subscribe(function (res) {
                 var data = res;
                 var groups = [];
-                data.forEach(function (element) {
+                data === null || data === void 0 ? void 0 : data.forEach(function (element) {
                     var obj = {
                         groupName: element.group_name,
                         userIds: element.member_ids,
@@ -3016,7 +3110,6 @@
                         organisation_id: currentUser.organisation_id,
                         _id: _this.authService.getUserDetails()._id
                     };
-                    console.log("currentsUerInfocurrentsUerInfo", currentsUerInfo, _this.authService.getUserDetails());
                     var testPlanCategory = typeof (res === null || res === void 0 ? void 0 : res.testplan_category_id) === 'string' ? [] : res === null || res === void 0 ? void 0 : res.testplan_category_id;
                     var requiredAuditCategoryId = ((_b = res === null || res === void 0 ? void 0 : res.audit_category_details) === null || _b === void 0 ? void 0 : _b.category_id) ? [(_c = res === null || res === void 0 ? void 0 : res.audit_category_details) === null || _c === void 0 ? void 0 : _c.category_id] : [];
                     var reviewerDetails = Object.keys(res === null || res === void 0 ? void 0 : res.reviewer_arr);
@@ -3170,6 +3263,7 @@
         };
         WorkflowComplianceComponent.prototype.checkWhetherAllListsLoaded = function () {
             var _this = this;
+            var _a, _b, _c, _d, _e, _f;
             if (this.rcListLoaded && this.assigneesListLoaded && this.assignorsListLoaded &&
                 this.categoriesListLoaded && this.assuranceCategoryListLoaded && this.groupsListLoaded) {
                 if (this.frameworkDetails.length > 0) {
@@ -3181,6 +3275,31 @@
                 else {
                     this.loader = false;
                     this.uiKitService.isLoader = false;
+                    if (this.selectedProgram) {
+                        this.responsibilityForm.program.push(this.selectedProgram);
+                        var programCustomTags = (_b = (_a = this.selectedProgram) === null || _a === void 0 ? void 0 : _a.custom_tags) !== null && _b !== void 0 ? _b : [];
+                        programCustomTags.forEach(function (element) {
+                            var tag = element.custom_tags !== '' && element.custom_tags !== "null" && element.custom_tags != "[]" ? JSON.parse(element.custom_tags) : [];
+                            if (tag.length > 0) {
+                                tag.forEach(function (tagData) {
+                                    var index = _this.responsibilityForm.customTags.findIndex(function (tagElement) { return tagElement.tag_name == tagData.tag_name; });
+                                    if (index == -1) {
+                                        _this.responsibilityForm.customTags.push(tagData);
+                                    }
+                                });
+                            }
+                        });
+                        this.responsibilityForm.formatAndEvidence.evidenceRequired = (_d = (_c = this.selectedProgram) === null || _c === void 0 ? void 0 : _c.evidence_upload_flag) !== null && _d !== void 0 ? _d : false;
+                        var checkedMoreOptions = [];
+                        this.moreOptions.PROGRAM = true;
+                        checkedMoreOptions.push('PROGRAM');
+                        if ((_e = this.selectedProgram) === null || _e === void 0 ? void 0 : _e.evidence_upload_flag) {
+                            checkedMoreOptions.push('FORMATE_EVIDENCE');
+                            this.moreOptions.FORMATE_EVIDENCE = true;
+                        }
+                        this.populateOption.emit(checkedMoreOptions);
+                        this.filterListsAccordingToProgram((_f = this.selectedProgram) === null || _f === void 0 ? void 0 : _f._id);
+                    }
                 }
             }
             else {
@@ -3191,7 +3310,7 @@
         };
         WorkflowComplianceComponent.prototype.saveSelectedList = function (type, selectedItems) {
             var _this = this;
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             switch (type) {
                 case 'assignors':
                     if (this.invalidType === 'whom') {
@@ -3206,11 +3325,15 @@
                     }
                     if (this.assigneeRadioSelect) {
                         this.responsibilityForm.assignees.list = this.setList(this.assigneesList, [selectedItems.employee_id], 'employee_id');
-                        this.refreshAllLists();
+                        if (this.responsibilityForm.program.length == 0) {
+                            this.refreshAllLists();
+                        }
                     }
                     else {
                         this.responsibilityForm.assignees.list = this.setList(this.assigneesList, selectedItems, 'my_member_id');
-                        this.refreshAllLists();
+                        if (this.responsibilityForm.program.length == 0) {
+                            this.refreshAllLists();
+                        }
                     }
                     break;
                 case 'rc':
@@ -3235,17 +3358,64 @@
                         }
                     });
                     break;
+                case 'program':
+                    this.responsibilityForm.category = (selectedItems.categories) ? selectedItems.categories : [];
+                    this.responsibilityForm.program = [];
+                    this.responsibilityForm.category_id = '';
+                    this.responsibilityForm.program_selected_ids = [];
+                    this.responsibilityForm.customTags = [];
+                    this.responsibilityForm.program = (selectedItems.program) ? [selectedItems.program] : [];
+                    var categoryId = (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _a === void 0 ? void 0 : _a.toString();
+                    if ((_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _b === void 0 ? void 0 : _b.length) {
+                        this.responsibilityForm.category_id = ((_c = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _c === void 0 ? void 0 : _c.category_id) + ',' + categoryId;
+                    }
+                    else {
+                        this.responsibilityForm.category_id = (_e = (_d = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _d === void 0 ? void 0 : _d.category_id) === null || _e === void 0 ? void 0 : _e.toString();
+                    }
+                    this.responsibilityForm.program_selected_ids = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories;
+                    var programCustomTags = (_g = (_f = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _f === void 0 ? void 0 : _f.custom_tags) !== null && _g !== void 0 ? _g : [];
+                    programCustomTags.forEach(function (element) {
+                        var tag = element.custom_tags !== '' && element.custom_tags !== "null" && element.custom_tags != "[]" ? JSON.parse(element.custom_tags) : [];
+                        if (tag.length > 0) {
+                            tag.forEach(function (tagData) {
+                                var index = _this.responsibilityForm.customTags.findIndex(function (tagElement) { return tagElement.tag_name == tagData.tag_name; });
+                                if (index == -1) {
+                                    _this.responsibilityForm.customTags.push(tagData);
+                                }
+                            });
+                        }
+                    });
+                    this.responsibilityForm.formatAndEvidence.evidenceRequired = (_j = (_h = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _h === void 0 ? void 0 : _h.evidence_upload_flag) !== null && _j !== void 0 ? _j : false;
+                    if ((_k = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _k === void 0 ? void 0 : _k.evidence_upload_flag) {
+                        this.moreOptions.FORMATE_EVIDENCE = true;
+                    }
+                    if (((_l = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.categories) === null || _l === void 0 ? void 0 : _l.length) == 0) {
+                        this.responsibilityForm.program_selected_ids.push((_m = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _m === void 0 ? void 0 : _m.category_id);
+                    }
+                    if ((_o = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.program) === null || _o === void 0 ? void 0 : _o._id) {
+                        this.filterListsAccordingToProgram(selectedItems.program._id);
+                    }
+                    else {
+                        this.filterListsAccordingToProgram();
+                    }
+                    break;
                 case 'reviewer':
                     this.responsibilityForm.reviewers.list = this.setList(this.reviewersList, selectedItems, 'employee_id');
-                    this.refreshAllLists();
+                    if (this.responsibilityForm.program.length == 0) {
+                        this.refreshAllLists();
+                    }
                     break;
                 case 'overseer':
                     this.responsibilityForm.overseers.list = this.setList(this.overseersList, selectedItems, 'employee_id');
-                    this.refreshAllLists();
+                    if (this.responsibilityForm.program.length == 0) {
+                        this.refreshAllLists();
+                    }
                     break;
                 case 'overseerNotify':
                     this.responsibilityForm.overseers.notifyList = this.setList(this.overseersList, selectedItems, 'employee_id');
-                    this.refreshAllLists();
+                    if (this.responsibilityForm.program.length == 0) {
+                        this.refreshAllLists();
+                    }
                     break;
                 // case 'assurance':
                 //   this.responsibilityForm.assuranceList = this.setList(this.assuranceCategoriesList, [selectedItems?.category_id], 'category_id');
@@ -3269,10 +3439,10 @@
                     this.responsibilityForm.riskMatrix = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.riskMatrix;
                     break;
                 case 'formate_evidence':
-                    this.responsibilityForm.formatAndEvidence.formatRequired = (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isFormateUploaded) !== null && _a !== void 0 ? _a : false;
-                    this.responsibilityForm.formatAndEvidence.formatFiles = (_b = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.files) !== null && _b !== void 0 ? _b : [];
-                    this.responsibilityForm.formatAndEvidence.formatLinks = (_c = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.links) !== null && _c !== void 0 ? _c : [];
-                    this.responsibilityForm.formatAndEvidence.evidenceRequired = (_d = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isEvidenceRequired) !== null && _d !== void 0 ? _d : false;
+                    this.responsibilityForm.formatAndEvidence.formatRequired = (_p = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isFormateUploaded) !== null && _p !== void 0 ? _p : false;
+                    this.responsibilityForm.formatAndEvidence.formatFiles = (_q = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.files) !== null && _q !== void 0 ? _q : [];
+                    this.responsibilityForm.formatAndEvidence.formatLinks = (_r = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.links) !== null && _r !== void 0 ? _r : [];
+                    this.responsibilityForm.formatAndEvidence.evidenceRequired = (_s = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.isEvidenceRequired) !== null && _s !== void 0 ? _s : false;
                     break;
                 case 'reviewFrequency':
                     this.responsibilityForm.reviewers.reviewFrequency = {
@@ -3302,22 +3472,30 @@
                 case 'assignees':
                     var entrustIndex = this.responsibilityForm.assignees.list.findIndex(function (owner) { return owner.employee_id == event.employee_id; });
                     this.responsibilityForm.assignees.list.splice(entrustIndex, 1);
-                    this.refreshAllLists();
+                    if (this.responsibilityForm.program.length == 0) {
+                        this.refreshAllLists();
+                    }
                     break;
                 case 'reviewer':
                     var reviewerIndex = this.responsibilityForm.reviewers.list.findIndex(function (reviewer) { return reviewer.employee_id == event.employee_id; });
                     this.responsibilityForm.reviewers.list.splice(reviewerIndex, 1);
-                    this.refreshAllLists();
+                    if (this.responsibilityForm.program.length == 0) {
+                        this.refreshAllLists();
+                    }
                     break;
                 case 'overseer':
                     var overseerIndex = this.responsibilityForm.overseers.list.findIndex(function (overseer) { return overseer.employee_id == event.employee_id; });
                     this.responsibilityForm.overseers.list.splice(overseerIndex, 1);
-                    this.refreshAllLists();
+                    if (this.responsibilityForm.program.length == 0) {
+                        this.refreshAllLists();
+                    }
                     break;
                 case 'overseerNotifyList':
                     var overseerNotifyIndex = this.responsibilityForm.overseers.notifyList.findIndex(function (overseerN) { return overseerN.employee_id == event.employee_id; });
                     this.responsibilityForm.overseers.notifyList.splice(overseerNotifyIndex, 1);
-                    this.refreshAllLists();
+                    if (this.responsibilityForm.program.length == 0) {
+                        this.refreshAllLists();
+                    }
                     break;
                 case 'category':
                     var categoryIndex = this.responsibilityForm.category.findIndex(function (category) { return category.category_id == event.category_id; });
@@ -3345,6 +3523,11 @@
                         });
                     }
                     break;
+                case 'program':
+                    this.responsibilityForm.category = [];
+                    this.responsibilityForm.program = [];
+                    this.filterListsAccordingToProgram();
+                    break;
                 case 'requires_audit':
                     this.responsibilityForm.requiresAuditList = [];
                     this.responsibilityForm.audit_category_details = {
@@ -3546,7 +3729,7 @@
         };
         WorkflowComplianceComponent.prototype.entrustResponsibility = function (entrustForm) {
             var _this = this;
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             console.log("entrustForm ==>", entrustForm);
             this.loader = true;
             this.uiKitService.isLoader = true;
@@ -3576,7 +3759,7 @@
             var payload = {
                 app_association: [],
                 assigned_to: this.returnIds(entrustForm.assignees.list, 'employee_id').toString(),
-                category_id: (moreOptions.CATEGORY) ? this.returnIds(entrustForm.category, 'category_id').toString() : '',
+                category_id: (moreOptions.CATEGORY) ? this.returnIds(entrustForm.category, 'category_id').toString() : ((((_b = (_a = this.responsibilityForm) === null || _a === void 0 ? void 0 : _a.program_selected_ids) === null || _b === void 0 ? void 0 : _b.length) > 0) ? (_c = this.responsibilityForm) === null || _c === void 0 ? void 0 : _c.category_id : ''),
                 cc_email: (moreOptions.OVERSEER) ? this.returnIds(entrustForm.overseers.list, 'employee_id').toString() : '',
                 checkpoint_description: (moreOptions.CHECKPOINTS) ? entrustForm.checkpointInstruction : '',
                 checkpoint_details: (moreOptions.CHECKPOINTS) ? JSON.stringify(this.responsibilityForm.checkpoints) : '',
@@ -3585,7 +3768,7 @@
                 comment: '',
                 continuous_failed_days: checkContinuousFailedValue(entrustForm.frequency) ? entrustForm.continuous_failed_days : 0,
                 cost_of_compliance: '',
-                created_by: ((_a = entrustForm.assignors.list) === null || _a === void 0 ? void 0 : _a.length) < 1 ? 0 : this.memberId,
+                created_by: ((_d = entrustForm.assignors.list) === null || _d === void 0 ? void 0 : _d.length) < 1 ? 0 : this.memberId,
                 creation_window: 0,
                 custom_tags: JSON.stringify(entrustForm.customTags),
                 entity_tree: (moreOptions.RC) ? rcDetails : [],
@@ -3594,15 +3777,16 @@
                 failed_time_utc: entrustForm.failed_time_utc,
                 failure_cc_email: (moreOptions.OVERSEER) ? this.returnIds(entrustForm.overseers.notifyList, 'employee_id').toString() : '',
                 frequency_details: entrustForm.frequency,
-                frequency_time: (_b = entrustForm.timeIn24Hr) !== null && _b !== void 0 ? _b : "23:59:00",
+                frequency_time: (_e = entrustForm.timeIn24Hr) !== null && _e !== void 0 ? _e : "23:59:00",
                 grc_object_id: 0,
                 grc_relationship: '',
                 if_testplan_failed: 0,
                 impact: '',
+                program_cat_ids: (entrustForm.program.length) ? [entrustForm.program[0].category_id] : [],
                 isGroupAssignTo: (entrustForm.assignees.whoCanComplete == 'ANY_ONE') ? 1 : 0,
                 is_key_compliance: entrustForm.responsibility.keyResponsibility ? 1 : 0,
                 library_report_id: 0,
-                lifecycle_details: (_c = entrustForm.lifecycleDetails) !== null && _c !== void 0 ? _c : '0000-00-00~~0',
+                lifecycle_details: (_f = entrustForm.lifecycleDetails) !== null && _f !== void 0 ? _f : '0000-00-00~~0',
                 link_for_details: (moreOptions.FORMATE_EVIDENCE) ? entrustForm.formatAndEvidence.formatLinks : [],
                 linkages: { compliance: [] },
                 member_id: this.returnIds(entrustForm.assignors.list, 'member_id').length > 0 ? this.returnIds(entrustForm.assignors.list, 'member_id')[0] : this.memberId,
@@ -3639,7 +3823,7 @@
                 test_required_flag: (moreOptions.ASSURANCE) ? (entrustForm.assuranceList.length > 0 ? 1 : 0) : 0,
                 testplan_category_id: (moreOptions.ASSURANCE) ? this.returnIds(entrustForm.assuranceList, 'category_id') : [],
                 testplan_category_manager: '',
-                audit_category_details: ((_e = (_d = this.responsibilityForm) === null || _d === void 0 ? void 0 : _d.audit_category_details) === null || _e === void 0 ? void 0 : _e.category_id) ? {
+                audit_category_details: ((_h = (_g = this.responsibilityForm) === null || _g === void 0 ? void 0 : _g.audit_category_details) === null || _h === void 0 ? void 0 : _h.category_id) ? {
                     category_id: this.responsibilityForm.audit_category_details.category_id,
                     sample: this.selectedSample === 0 ? this.sampleValue : 0,
                     percentage: this.selectedSample === 1 ? this.samplePercentage : 0,
@@ -3653,14 +3837,13 @@
                     frequency_time: ''
                 },
                 assessment: {
-                    category_id: moreOptions.ASSESSMENT ? (_f = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _f === void 0 ? void 0 : _f.category_id : '',
-                    assessment_id: moreOptions.ASSESSMENT ? (_g = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _g === void 0 ? void 0 : _g.assessment_id : ''
+                    category_id: moreOptions.ASSESSMENT ? (_j = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _j === void 0 ? void 0 : _j.category_id : '',
+                    assessment_id: moreOptions.ASSESSMENT ? (_k = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _k === void 0 ? void 0 : _k.assessment_id : ''
                 },
                 assessment_checkpoint: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints : {}) : {},
-                questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_h = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _h === void 0 ? void 0 : _h.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : ''
+                questionnaire_type: moreOptions.CHECKPOINTS_NEW ? (Object.keys(entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.new_checkpoints).length > 0 ? 'assessment_checkpoint' : (moreOptions.ASSESSMENT && ((_l = entrustForm === null || entrustForm === void 0 ? void 0 : entrustForm.assessment) === null || _l === void 0 ? void 0 : _l.category_id) ? 'assessment' : (JSON.stringify(this.responsibilityForm.checkpoints) != '' && moreOptions.CHECKPOINTS ? 'checkpoint' : ''))) : ''
             };
             this.responsibilityPayload = payload;
-            console.log("payloaddd", payload, this.mode);
             if (this.mode == 'CREATE' && !this.isDuplicateEntrust) {
                 this.responsibilityService.submitEntrust(payload).subscribe(function (res) {
                     _this.loader = false;
@@ -4276,6 +4459,7 @@
         // TODO:  select Assessment list and set id to payload
         WorkflowComplianceComponent.prototype.onAssessmentSelect = function (event) {
             this.isAssessment = false;
+            debugger;
             this.responsibilityForm.assessment = event;
         };
         // TODO: Populate assessment data from already selected data
@@ -4340,7 +4524,7 @@
     WorkflowComplianceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-workflow-compliance',
-                    template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n\r\n    <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row \" [class.active]=\"activeSelector === 'assignors'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'assignors' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length==0 || activeSelector === 'assignors'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\" >\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    I am creating this responsibility on behalf of someone else\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\"\r\n                        (ngValueChange)=\"responsibilityForm.assignors.enable = $event; responsibilityForm.assignors.list = [];\"></app-cs-switch>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assignors?.list?.length === 0 || activeSelector === 'assignors'\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignors',true)\"\r\n                        placeholder=\"Who is responsible for managing this responsibility?\" readonly [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 0 && activeSelector !== 'assignors'\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                            {{b_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assignors',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #behalf [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li\r\n                                *ngFor=\"let b_user of responsibilityForm?.assignors?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                                        {{ b_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <p *ngIf=\"invalidType === 'whom'\" class=\"error-message\">Please select the person responsible for managing this responsibility.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- What -->\r\n\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'responsibilityName' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n                *ngIf=\"(responsibilityForm?.responsibility?.name.trim() === '') || focus.responsibilityName\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\" >\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    What?<span class=\"required\">*</span>\r\n                    <button *ngIf=\"isFrameworkAvailable && mode !== 'EDIT' && openedFrom !=='RISK_TREATMENT'\" (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n                </label>\r\n                <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\" [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\" type=\"black\" delay=\"0\"\r\n                [tooltipMandatory]=\"true\">\r\n                    <i class=\"icons\">&#xea70;</i>\r\n                </span>\r\n                <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\"  type=\"text\" [ngModel]=\"responsibilityForm.responsibility.name\"\r\n                        placeholder=\"What is the responsibility?\"\r\n                        (change)=\"whatChanged($event)\"\r\n                        (focusin)=\"activateSelector('responsibilityName',true)\"\r\n                        (focusout)=\"activeDeselector()\"\r\n                         (clickOutside)=\"testFunction()\"  #what >\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.responsibility?.name.trim() !='' && isEditWhat\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"value\">{{responsibilityForm.responsibility?.name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\" ><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'what'\" class=\"error-message\">Please enter a name for this responsibility.</p>\r\n                <div class=\"switch-row align-right\">\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n                        (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n                        Responsibility\r\n                    </app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Who -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length==0 || activeSelector === 'assignees'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assignees?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n                        placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                            {{e_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assignees',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'who'\" class=\"error-message\">Please select the person responsible for completing this responsibility.</p>\r\n                <app-cs-radio  *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n                    [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED PERSONS NEED TO\r\n                    COMPLETE THIS<i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\r\n                <app-cs-radio  *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n                    [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED PERSON CAN COMPLETE\r\n                    THIS <i class=\"icons\" [appTooltip]=\"'If selected, only one responsibility will be created.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\r\n                <app-popover #assignees [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                                        {{ e_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- When? -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"(!responsibilityForm?.frequency || activeSelector === 'frequency')\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n                *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.frequency  && activeSelector !== 'frequency' && responsibilityForm?.frequency != '' && responsibilityForm?.frequency != '5~0~0~0'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">When?<span class=\"required\">*</span></label>\r\n                <div *ngIf=\"responsibilityForm?.frequency == '' || responsibilityForm?.frequency == '5~0~0~0'\" class=\"select button-sec\">\r\n                    <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\" readonly>\r\n                    <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                </div>\r\n                <div *ngIf=\"responsibilityForm?.frequency != '' && responsibilityForm?.frequency !== '5~0~0~0'\"  class=\"selected button-sec\">\r\n                    <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n                    <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\" (click)=\"activateSelector('frequency',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i>Edit\r\n                    </button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'when'\" class=\"error-message\">Please select the frequency of occurrence for this responsibility.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Notes -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'notes' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.description).trim() === '') || focus.description\">\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Notes</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                id:'notes',\r\n                placeholder: 'Add more information about completing the responsibility'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Objective -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\" [attr.id]=\"'OBJECTIVE'\" [class.active]=\"activeSelector === 'objective'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'objective' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.objective).trim() !=='' && !focus.objective\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"im\" *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() === '') || focus.objective\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim()  !== '') && !focus.objective\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Objective</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                id:'objective',\r\n                link: true,\r\n                placeholder: 'This option lets you specify an objective for the responsibility.'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Center -->\r\n    <div  [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\"  [attr.id]=\"'RC'\" [class.active]=\"activeSelector === 'rc'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.rc?.length==0 || activeSelector === 'rc'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Center </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('rc',true)\" aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\"></div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\" [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n                  <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i\r\n                              class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>\r\n                          {{rc?.item_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\"\r\n                        appPopover (click)=\"rc.popover()\" placement=\"right\"  placement=\"right\">+\r\n                          {{responsibilityForm?.rc?.slice(2).length}}</button>\r\n                  </div>\r\n                  <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('rc',true)\"><i\r\n                          class=\"icons\">&#xe9ba;</i>\r\n                      Edit</button>\r\n              </div>\r\n              <app-popover #rc [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let rc of responsibilityForm?.rc | slice: 2; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                    {{ rc.item_name }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Category -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\"  [attr.id]=\"'CATEGORY'\" [class.active]=\"activeSelector === 'category'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" *ngIf=\"responsibilityForm?.category?.length==0 || activeSelector === 'category'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Category </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.category?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('category',true)\" aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\"></div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('category',true)\" placeholder=\"Select Responsibility Category(s)\" readonly> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.category?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.category?.length>1\" [class.plus]=\"responsibilityForm?.category?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let category of responsibilityForm?.category?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                            {{category.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.category?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"category.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.category?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button  *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('category',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #category [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let category of responsibilityForm?.category | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                        {{ category.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                    <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                        <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Format & Evidence -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"  [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'formate_evidence' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img\r\n                *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired == false && this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 && this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n                alt=\"im\"\r\n            >\r\n\r\n            <svg\r\n             *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatFiles.length || this.responsibilityForm.formatAndEvidence.formatLinks?.length\"\r\n             class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence',$event)\" [mode]=\"'responsibility'\"\r\n                [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\"></app-format-and-evidence>\r\n        </div>\r\n\r\n    </div>\r\n    <!-- Assessment -->\r\n    <div *ngIf=\"moreOptions?.ASSESSMENT\"  [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [attr.id]=\"'ASSESSMENT'\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\r\n            <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\" src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n                alt=\"im\">\r\n\r\n            <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n                <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n                    <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\" placeholder=\"Select an assessment for this responsibility\" [disabled]=\"responsibilityForm.checkpoints?.length\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"false\" [class.plus]=\"false\">\r\n                        <span class=\"chip with-question\">\r\n                            <span class=\"value\" [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i\r\n                                class=\"icons\" (click)=\"remove('assessment',category)\">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n                            <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}} {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions': 'Question'}}</span>\r\n                        </span>\r\n                    </div>\r\n                    <button  (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\" type=\"button\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    <!-- Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"  [attr.id]=\"'CHECKPOINTS'\"  [class.active]=\"activeSelector === 'checkpoints'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length>0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div  class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\r\n                    <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\" (click)=\"activateSelector('checkpoints',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                        <button [disabled]=\"!responsibilityForm.checkpoints?.length\" (click)=\"activateSelector('checkpoints',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\r\n                    <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">\r\n                            {{checkpoint?.label}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\"\r\n                            appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\r\n                <i class=\"icons alert-icon\">&#xe930;</i>\r\n                <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature instead of the old checkpoints functionality to create analytical questions. <button class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to continue.</span>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n     <!-- New  Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"  [attr.id]=\"'CHECKPOINTS-NEW'\"  [class.active]=\"activeSelector === 'checkpoints-new'\"\r\n    >\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints \r\n                    <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n                    <!-- <button  class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div  class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n                    <input  type=\"text\" (click)=\"activateSelector('checkpoints-new',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                        <button  (click)=\"activateSelector('checkpoints-new',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n                    <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n                        <span class=\"chip\">\r\n                          <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n                            {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints-new',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Classification -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"  [attr.id]=\"'RISK_CLASSIFICATION'\"  [class.active]=\"activeSelector === 'riskCalculator'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'riskCalculator' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    Risk Classification\r\n                    <button (click)=\"activateSelector('riskCalculator',true)\" class=\"button\">+ Risk Calculator</button>\r\n                </label>\r\n\r\n                <div class=\"classification\">\r\n                    <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\r\n                        <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\r\n                            [value]=\"risk?.value\">\r\n                        <span>{{risk?.name}}</span>\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Reviewer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\"  [attr.id]=\"'REVIEWER'\"  [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'reviewer' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length==0 || activeSelector === 'reviewer'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.reviewers?.list?.length>0 && activeSelector !== 'reviewer'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Reviewer</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.reviewers?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select Reviewer\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\" [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                            {{reviewer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"reviewer.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button  *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-cs-radio *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\" (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\"\r\n                [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\">\r\n                    SEQUENTIAL <i\r\n                            class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n                            placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\" (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\"\r\n                [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\">\r\n                    ANY REVIEWER CAN MARK THIS AS REVIEWED <i class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                        {{ reviewer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <!-- <div class=\"switch-row\">\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.reviewers.sequentialWorkflow\"\r\n                        (ngValueChange)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\">SEQUENTIAL <i\r\n                            class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">&#xea58;</i></app-cs-switch>\r\n                    <app-cs-switch [ngValue]=\"!responsibilityForm.reviewers.sequentialWorkflow\"\r\n                        (ngValueChange)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\">ANY REVIEWER CAN\r\n                        MARK THIS AS REVIEWED <i class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\" placement=\"bottom-right\" delay=\"0\" [tooltipMandatory]=\"true\">&#xea58;</i></app-cs-switch>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\"  [attr.id]=\"'OVERSEER'\"  [class.active]=\" activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\"\r\n    [class.disabled]=\"activeSelector &&  !['overseerNotify','overseerNotify'].includes(activeSelector) && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n                *ngIf=\"(responsibilityForm?.overseers?.list?.length==0 && responsibilityForm?.overseers?.notifyList?.length == 0)|| activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\">\r\n            <svg class=\"checkIcon\" *ngIf=\"(responsibilityForm?.overseers?.list?.length>0 || responsibilityForm?.overseers?.notifyList?.length>0)\r\n                && !( activeSelector === 'overseerNotify' ||  activeSelector === 'overseer')\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Overseer </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.overseers?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseer',true)\"\r\n                        placeholder=\"Who should have oversight of the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                            {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"overseers.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('overseer',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseerNotify',true)\"\r\n                        placeholder=\"Who should be notified if the responsibility is not complet...\" readonly  [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\">\r\n                        <span class=\"chip\"\r\n                            *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                            {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\"\r\n                            type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button  *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('overseerNotify',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #overseers [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseers?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notify [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li\r\n                                *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\"\r\n                                            (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Assurance -->\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\"  class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\"  [attr.id]=\"'ASSURANCE'\"  [class.active]=\"activeSelector === 'assurance'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'assurance' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.assuranceList?.length==0 || activeSelector === 'assurance'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.assuranceList?.length>0 && activeSelector !== 'assurance'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Assurance</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                            {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\"  class=\"form-group-row\" *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\"  [attr.id]=\"'REQUIRES_AUDIT'\"  [class.active]=\"activeSelector === 'requires_audit'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'requires_audit' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.requiresAuditList?.length==0 || activeSelector === 'requires_audit'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.requiresAuditList?.length>0 && activeSelector !== 'requires_audit'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length ==0\">\r\n                    <!-- <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div> -->\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n\r\n                    <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly (click)=\"activateSelector('requires_audit',true)\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                            {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <!-- <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n                            class=\"icons\">&#xe90c;</i>\r\n                        Edit</button> -->\r\n\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\" (click)=\"remove('requires_audit',overseer)\">&#xe90d;</i> {{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i class=\"icons\">&#xe90c;</i> Edit</button>\r\n                            <!-- class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button> -->\r\n                </div>\r\n                <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n                    <label class=\"vx-control-panel vx-mt-8\">\r\n                        SAMPLE SIZE\r\n                        <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\r\n                    </label>\r\n                    <div class=\"sample-part\"  [class.disabled]=\"!isSample\" >\r\n                        <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\" [checked]=\"selectedSample === 0\">\r\n                            <div class=\"name\">COUNT</div>\r\n                            <input type=\"number\" placeholder=\"--\"  (keypress)=\"checkInputValue($event)\"  [(ngModel)]=\"sampleValue\" >\r\n                        </app-cs-radio>\r\n                        <div class=\"or\">OR</div>\r\n                        <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\" [checked]=\"selectedSample === 1\">\r\n                            <div class=\"name\">PERCENTAGE</div>\r\n                            <input type=\"number\"  (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\" placeholder=\"--\">\r\n                        </app-cs-radio>\r\n                    </div>\r\n                    <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\r\n                    <div class=\"reminder-part\">\r\n                        Send reminder every <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\"> Day by\r\n                        <div class=\"picker-group\">\r\n                            <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\"  [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"  [min]=\"currentTime\" readonly>\r\n                            <i class=\"icons\">&#xe955;</i>\r\n                            <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n                            </ngx-material-timepicker>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\r\n    [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignors',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n\r\n<ng-container  *ngIf=\"activeSelector === 'assignees'\">\r\n <app-group-users-list *ngIf=\"isEntrust\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\" [groupsList]=\"groupsList\"\r\n    [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'my_member_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n </app-group-users-list>\r\n <app-users-radio-list *ngIf=\"!isEntrust\" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\"\r\n [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n</ng-container>\r\n\r\n\r\n\r\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\" [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n    [checkpointData]=\"responsibilityForm?.checkpoints\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"\r\n    (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\r\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\"  [frequencyDetails]=\"frequencyDetails\"\r\n(selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\"></app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\"\r\n    [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"(mode == 'EDIT')?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n    [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\"\r\n    (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\" [allCategories]=\"allCategories\"\r\n    [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n    (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer'\" [listHeading]=\"'Select a Reviewer'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"reviewersList\" [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"  [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n    (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('overseer',$event)\" (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\"\r\n    (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\" [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\" [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n[noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\" [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\" [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\" [auditCategory]=\"assuranceRequiresAuditList\"  (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\" [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-framework-list *ngIf=\"activeSelector === 'framework'\" [categoryList]=\"categories\"\r\n    (closeFramework)=\"activeDeselector()\" (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator' \" [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n    (saveList)=\"saveSelectedList('calculatedrisk',$event)\" (closeList)=\"activeDeselector()\">\r\n</app-risk-classification>\r\n\r\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [reviewCompleteDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\"\r\n    [reviewNOtCompletedDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\"\r\n    (saveReviewFrequency)=\"saveSelectedList('reviewFrequency',$event)\"\r\n    (closeReviewFrequency)=\"activeDeselector();activateSelector('reviewer',false);responsibilityForm.reviewers.list = [];\"\r\n    (backToUserList) = \"activeDeselector();activateSelector('reviewer',true)\"\r\n    >\r\n</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\" [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\" [selectedAssessment]=\"responsibilityForm?.assessment\" (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\" (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\"  *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n  <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\" (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\" [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n  </app-create-assessment-container>`\r\n</div>\r\n\r\n",
+                    template: "<div class=\"workflw-compliance\" *ngIf=\"!showSmiley\">\r\n\r\n    <div *ngIf=\"mode !== 'EDIT'\" class=\"form-group-row \" [class.active]=\"activeSelector === 'assignors'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'assignors' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length==0 || activeSelector === 'assignors'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignors?.list?.length>0 && activeSelector !== 'assignors'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\" >\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    I am creating this responsibility on behalf of someone else\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.assignors.enable\"\r\n                        (ngValueChange)=\"responsibilityForm.assignors.enable = $event; responsibilityForm.assignors.list = [];\"></app-cs-switch>\r\n                </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assignors?.list?.length === 0 || activeSelector === 'assignors'\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignors',true)\"\r\n                        placeholder=\"Who is responsible for managing this responsibility?\" readonly [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 0 && activeSelector !== 'assignors'\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\" *ngFor=\"let b_user of responsibilityForm?.assignors?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                            {{b_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignors?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"behalf.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignors?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assignors'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assignors',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #behalf [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li\r\n                                *ngFor=\"let b_user of responsibilityForm?.assignors?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignors',b_user)\">&#xe90d;</i>\r\n                                        {{ b_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <p *ngIf=\"invalidType === 'whom'\" class=\"error-message\">Please select the person responsible for managing this responsibility.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- What -->\r\n\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'framework'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'responsibilityName' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\"\r\n                *ngIf=\"(responsibilityForm?.responsibility?.name.trim() === '') || focus.responsibilityName\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.responsibility?.name.trim() !== '' && !focus.responsibilityName\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\" >\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    What?<span class=\"required\">*</span>\r\n                    <button *ngIf=\"isFrameworkAvailable && mode !== 'EDIT' && openedFrom !=='RISK_TREATMENT'\" (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n                </label>\r\n                <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\" [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\" type=\"black\" delay=\"0\"\r\n                [tooltipMandatory]=\"true\">\r\n                    <i class=\"icons\">&#xea70;</i>\r\n                </span>\r\n                <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\"  type=\"text\" [ngModel]=\"responsibilityForm.responsibility.name\"\r\n                        placeholder=\"What is the responsibility?\"\r\n                        (change)=\"whatChanged($event)\"\r\n                        (focusin)=\"activateSelector('responsibilityName',true)\"\r\n                        (focusout)=\"activeDeselector()\"\r\n                         (clickOutside)=\"testFunction()\"  #what >\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.responsibility?.name.trim() !='' && isEditWhat\">\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"value\">{{responsibilityForm.responsibility?.name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"onEditWhat($event)\" ><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'what'\" class=\"error-message\">Please enter a name for this responsibility.</p>\r\n                <div class=\"switch-row align-right\">\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.responsibility?.keyResponsibility\"\r\n                        (ngValueChange)=\"responsibilityForm.responsibility.keyResponsibility = $event\">Key\r\n                        Responsibility\r\n                    </app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Who -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length==0 || activeSelector === 'assignees'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.assignees?.list?.length>0 && activeSelector !== 'assignees'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Who? <span class=\"required\">*</span></label>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assignees?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n                        placeholder=\"Who is responsible for completing the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assignees?.length>1\" [class.plus]=\"responsibilityForm?.assignees?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let e_user of responsibilityForm?.assignees?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                            {{e_user.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assignees?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assignees.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assignees?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assignees'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assignees',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'who'\" class=\"error-message\">Please select the person responsible for completing this responsibility.</p>\r\n                <app-cs-radio  *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n                    [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED PERSONS NEED TO\r\n                    COMPLETE THIS<i class=\"icons\" [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\r\n                <app-cs-radio  *ngIf=\"mode !== 'EDIT'\" (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n                    [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED PERSON CAN COMPLETE\r\n                    THIS <i class=\"icons\" [appTooltip]=\"'If selected, only one responsibility will be created.'\"\r\n                    placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-radio>\r\n                <app-popover #assignees [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let e_user of responsibilityForm?.assignees?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assignees',e_user)\">&#xe90d;</i>\r\n                                        {{ e_user.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- When? -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"(!responsibilityForm?.frequency || activeSelector === 'frequency')\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\"\r\n                *ngIf=\"!responsibilityForm?.frequency || activeSelector === 'frequency'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.frequency  && activeSelector !== 'frequency' && responsibilityForm?.frequency != '' && responsibilityForm?.frequency != '5~0~0~0'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">When?<span class=\"required\">*</span></label>\r\n                <div *ngIf=\"responsibilityForm?.frequency == '' || responsibilityForm?.frequency == '5~0~0~0'\" class=\"select button-sec\">\r\n                    <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\" readonly>\r\n                    <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                </div>\r\n                <div *ngIf=\"responsibilityForm?.frequency != '' && responsibilityForm?.frequency !== '5~0~0~0'\"  class=\"selected button-sec\">\r\n                    <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n                    <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\" (click)=\"activateSelector('frequency',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i>Edit\r\n                    </button>\r\n                </div>\r\n                <p *ngIf=\"invalidType === 'when'\" class=\"error-message\">Please select the frequency of occurrence for this responsibility.</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Notes -->\r\n    <div class=\"form-group-row\" [class.active]=\"activeSelector === 'notes'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'notes' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/notes.svg\" alt=\"im\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.description).trim() === '') || focus.description\">\r\n\r\n            <svg class=\"checkIcon\" *ngIf=\"checkBlank(responsibilityForm?.description).trim() !== '' && !focus.description\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Notes</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.description\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                link: true,\r\n                id:'notes',\r\n                placeholder: 'Add more information about completing the responsibility'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Objective -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\" [attr.id]=\"'OBJECTIVE'\" [class.active]=\"activeSelector === 'objective'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'objective' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"checkBlank(responsibilityForm?.objective).trim() !=='' && !focus.objective\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"im\" *ngIf=\"(checkBlank(responsibilityForm?.objective).trim() === '') || focus.objective\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"(checkBlank(responsibilityForm?.objective).trim()  !== '') && !focus.objective\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Objective</label>\r\n                <marx-editor [(ngModel)]=\"responsibilityForm.objective\" [editorConfig]=\"{mode: 'prime',\r\n                colorPalette: true,\r\n                id:'objective',\r\n                link: true,\r\n                placeholder: 'This option lets you specify an objective for the responsibility.'}\"></marx-editor>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Center -->\r\n    <div  [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RC\"  [attr.id]=\"'RC'\" [class.active]=\"activeSelector === 'rc'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.rc?.length==0 || activeSelector === 'rc'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.rc?.length>0 && activeSelector !== 'rc'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Center </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.rc?.length === 0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('rc',true)\" aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\"></div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('rc',true)\" placeholder=\"Select Responsibility Center(s)\" readonly> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.rc?.length > 0\" [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n                  <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\" [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n                      <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i\r\n                              class=\"icons\" (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\">&#xe90d;</i>\r\n                          {{rc?.item_name}}</span>\r\n                      <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\"\r\n                        appPopover (click)=\"rc.popover()\" placement=\"right\"  placement=\"right\">+\r\n                          {{responsibilityForm?.rc?.slice(2).length}}</button>\r\n                  </div>\r\n                  <button *ngIf=\"activeSelector !== 'rc' && openedFrom !== 'RISK_TREATMENT'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('rc',true)\"><i\r\n                          class=\"icons\">&#xe9ba;</i>\r\n                      Edit</button>\r\n              </div>\r\n              <app-popover #rc [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let rc of responsibilityForm?.rc | slice: 2; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                    {{ rc.item_name }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Responsibility Category -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\"  [attr.id]=\"'CATEGORY'\" [class.active]=\"activeSelector === 'category'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" *ngIf=\"responsibilityForm?.category?.length==0 || activeSelector === 'category'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.category?.length>0 && activeSelector !== 'category'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Responsibility Category </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.category?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('category',true)\" aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\"></div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('category',true)\" placeholder=\"Select Responsibility Category(s)\" readonly> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.category?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.category?.length>1\" [class.plus]=\"responsibilityForm?.category?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let category of responsibilityForm?.category?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                            {{category.item_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.category?.length > 2\" type=\"button\" appPopover\r\n                            (click)=\"category.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.category?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button  *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('category',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #category [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let category of responsibilityForm?.category | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                        {{ category.item_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                    <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                        <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Program -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\"  [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\"\r\n      [class.disabled]=\"activeSelector && activeSelector !== 'program' && sideSelectorElements.includes(activeSelector)\">\r\n          <div class=\"left\" [class.checked]=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n              <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/program.svg\" alt=\"\" *ngIf=\"responsibilityForm?.program?.length==0 || activeSelector === 'program'\">\r\n  \r\n              <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                  *ngIf=\"responsibilityForm?.program?.length>0 && activeSelector !== 'program'\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n          </div>\r\n          <div class=\"right\">\r\n              <div class=\"vx-form-group\">\r\n                  <label class=\"vx-control-panel\">Program</label>\r\n                  <div class=\"select\" *ngIf=\"responsibilityForm?.program?.length ==0\">\r\n                      <div class=\"custom-input\" (click)=\"activateSelector('program',true)\" aria-placeholder=\"Select the responsibility program or categories that this responsibility relates to.\"></div>\r\n                      <!-- <input type=\"text\" (click)=\"activateSelector('program',true)\" placeholder=\"Select Responsibility program(s)\" readonly> -->\r\n                  </div>\r\n                  <div class=\"selected\" *ngIf=\"responsibilityForm?.program?.length > 0\">\r\n                      <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.program?.length>1\" [class.plus]=\"responsibilityForm?.program?.length>2\">\r\n                          <span class=\"chip\" *ngFor=\"let program of responsibilityForm?.program?.slice(0,2)\"><i\r\n                                  class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n                              {{program?.name??'--'}}</span>\r\n                          <button class=\"count\" *ngIf=\"responsibilityForm?.program?.length > 2\" type=\"button\" appPopover\r\n                              (click)=\"program.popover()\" placement=\"right\">+\r\n                              {{responsibilityForm?.program?.slice(2).length}}</button>\r\n                      </div>\r\n                      <button  *ngIf=\"activeSelector !== 'program'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i\r\n                              class=\"icons\">&#xe9ba;</i>\r\n                          Edit</button>\r\n                  </div>\r\n                  <app-popover #program [dontCloseonClick]=\"true\">\r\n                      <div class=\"action-list\">\r\n                          <ul class=\"action-item\">\r\n                              <li *ngFor=\"let program of responsibilityForm?.program | slice: 2; let j = index\">\r\n                                  <div class=\"avatar-card\">\r\n                                      <span class=\"value\">\r\n                                          <i class=\"icons\" (click)=\"remove('program',program)\">&#xe90d;</i>\r\n                                          {{ program.item_name }}\r\n                                      </span>\r\n                                  </div>\r\n                              </li>\r\n                          </ul>\r\n                      </div>\r\n                  </app-popover>\r\n                  <div *ngIf=\"responsibilityForm?.customTags?.length >0\">\r\n                      <ng-container *ngFor=\" let tag of responsibilityForm?.customTags\">\r\n                          <label class=\"vx-control-panel\">{{tag.tag_name}}</label>\r\n                          <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tag_name}}\">\r\n                      </ng-container>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n    </div>\r\n    <!-- Format & Evidence -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"  [attr.id]=\"'FORMATE_EVIDENCE'\" [class.active]=\"activeSelector === 'formate_evidence'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'formate_evidence' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img\r\n                *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired == false && this.responsibilityForm.formatAndEvidence.formatFiles.length == 0 && this.responsibilityForm.formatAndEvidence.formatLinks?.length == 0\"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n                alt=\"im\"\r\n            >\r\n\r\n            <svg\r\n             *ngIf=\"this.responsibilityForm.formatAndEvidence.evidenceRequired || this.responsibilityForm.formatAndEvidence.formatFiles.length || this.responsibilityForm.formatAndEvidence.formatLinks?.length\"\r\n             class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <app-format-and-evidence (updateFiles)=\"saveSelectedList('formate_evidence',$event)\" [mode]=\"'responsibility'\"\r\n                [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\"></app-format-and-evidence>\r\n        </div>\r\n\r\n    </div>\r\n    <!-- Assessment -->\r\n    <div *ngIf=\"moreOptions?.ASSESSMENT\"  [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [attr.id]=\"'ASSESSMENT'\" [class.active]=\"false\" [class.disabled]=\"false\">\r\n        <div class=\"left\" [class.checked]=\"responsibilityForm.assessment?.assessment_id\">\r\n            <img *ngIf=\"!responsibilityForm.assessment?.assessment_id\" src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n                alt=\"im\">\r\n\r\n            <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n                <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n                    <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\" placeholder=\"Select an assessment for this responsibility\" [disabled]=\"responsibilityForm.checkpoints?.length\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.assessment?.assessment_id\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"false\" [class.plus]=\"false\">\r\n                        <span class=\"chip with-question\">\r\n                            <span class=\"value\" [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i\r\n                                class=\"icons\" (click)=\"remove('assessment',category)\">&#xe90d;</i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n                            <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}} {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions': 'Question'}}</span>\r\n                        </span>\r\n                    </div>\r\n                    <button  (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\" type=\"button\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    <!-- Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS\"  [attr.id]=\"'CHECKPOINTS'\"  [class.active]=\"activeSelector === 'checkpoints'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length>0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints\r\n                    <!-- <button *ngIf=\"responsibilityForm?.checkpoints?.length === 0\" class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div  class=\"select button-sec\" *ngIf=\"responsibilityForm?.checkpoints?.length === 0\">\r\n                    <input [disabled]=\"!responsibilityForm.checkpoints?.length\" type=\"text\" (click)=\"activateSelector('checkpoints',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                        <button [disabled]=\"!responsibilityForm.checkpoints?.length\" (click)=\"activateSelector('checkpoints',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm.checkpoints?.length > 0\">\r\n                    <div class=\"chip-container checkpoints\" [class.more-one]=\"responsibilityForm.checkpoints?.length>1\" [class.plus]=\"responsibilityForm.checkpoints?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let checkpoint of responsibilityForm.checkpoints?.slice(0,1)\">\r\n                            {{checkpoint?.label}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm.checkpoints?.length > 1\" type=\"button\"\r\n                            appPopover (click)=\"checkpoint.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm.checkpoints?.length- 1}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"this.responsibilityForm.checkpoints?.length\" class=\"assessment-text\">\r\n                <i class=\"icons alert-icon\">&#xe930;</i>\r\n                <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature instead of the old checkpoints functionality to create analytical questions. <button class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to continue.</span>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n     <!-- New  Checkpoints -->\r\n    <!-- *ngIf=\"moreOptions.checkpoints\" -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CHECKPOINTS_NEW\"  [attr.id]=\"'CHECKPOINTS-NEW'\"  [class.active]=\"activeSelector === 'checkpoints-new'\"\r\n    >\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\"\r\n                *ngIf=\"responsibilityForm?.checkpoints?.length==0 || activeSelector === 'checkpoints'\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                *ngIf=\"checkpointCount > 0 && activeSelector !== 'checkpoints'\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    <!-- {{responsibilityForm.checkpoints|json}}\r\n                  {{responsibilityForm.checkpointInstruction}} -->\r\n\r\n                    Checkpoints \r\n                    <!-- <span class=\"checkpoint-version\"> V2.0</span> -->\r\n                    <!-- <button  class=\"button\"\r\n                        (click)=\"activateSelector('checkpoints-new',true)\">+ Add Checkpoints</button> -->\r\n                </label>\r\n                <div  class=\"select button-sec\" *ngIf=\"checkpointCount === 0\">\r\n                    <input  type=\"text\" (click)=\"activateSelector('checkpoints-new',true)\"\r\n                        placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n                        <button  (click)=\"activateSelector('checkpoints-new',true)\" type=\"button\">Add Checkpoints</button>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"checkpointCount > 0\">\r\n                    <div class=\"chip-container checkpoints\" [class.more-one]=\"checkpointCount > 0\">\r\n                        <span class=\"chip\">\r\n                          <i class=\"icons\" (click)=\"onRemoveCheckpoints('new-checkpoints')\">&#xe90d;</i>\r\n                            {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints-new',true)\">\r\n                        <i class=\"icons\">&#xe9ba;</i> Edit\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <app-popover #checkpoint [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let checkpoint of responsibilityForm.checkpoints | slice: 1; let j = index\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    {{ checkpoint?.label }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </div>\r\n    </div>\r\n    <!-- Risk Classification -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.RISK_CLASSIFICATION\"  [attr.id]=\"'RISK_CLASSIFICATION'\"  [class.active]=\"activeSelector === 'riskCalculator'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'riskCalculator' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\">\r\n\r\n            <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">\r\n                    Risk Classification\r\n                    <button (click)=\"activateSelector('riskCalculator',true)\" class=\"button\">+ Risk Calculator</button>\r\n                </label>\r\n\r\n                <div class=\"classification\">\r\n                    <label class=\"low\" *ngFor=\"let risk of riskClassification\" [ngClass]=\"[risk.class]\">\r\n                        <input type=\"radio\" name=\"classification\" [(ngModel)]=\"responsibilityForm.riskClass\"\r\n                            [value]=\"risk?.value\">\r\n                        <span>{{risk?.name}}</span>\r\n                    </label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Reviewer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.REVIEWER\"  [attr.id]=\"'REVIEWER'\"  [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'reviewer' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.reviewers?.list?.length==0 || activeSelector === 'reviewer'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.reviewers?.list?.length>0 && activeSelector !== 'reviewer'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Reviewer</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.reviewers?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select Reviewer\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.reviewers?.list?.length>1\" [class.plus]=\"responsibilityForm?.reviewers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                            {{reviewer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.reviewers?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"reviewer.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.reviewers?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button  *ngIf=\"activeSelector !== 'reviewer'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-cs-radio *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\" (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\"\r\n                [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\">\r\n                    SEQUENTIAL <i\r\n                            class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n                            placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\" (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\"\r\n                [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\">\r\n                    ANY REVIEWER CAN MARK THIS AS REVIEWED <i class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let reviewer of responsibilityForm?.reviewers?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                        {{ reviewer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <!-- <div class=\"switch-row\">\r\n                    <app-cs-switch [ngValue]=\"responsibilityForm.reviewers.sequentialWorkflow\"\r\n                        (ngValueChange)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\">SEQUENTIAL <i\r\n                            class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">&#xea58;</i></app-cs-switch>\r\n                    <app-cs-switch [ngValue]=\"!responsibilityForm.reviewers.sequentialWorkflow\"\r\n                        (ngValueChange)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\">ANY REVIEWER CAN\r\n                        MARK THIS AS REVIEWED <i class=\"icons\" [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\" placement=\"bottom-right\" delay=\"0\" [tooltipMandatory]=\"true\">&#xea58;</i></app-cs-switch>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Overseer -->\r\n    <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OVERSEER\"  [attr.id]=\"'OVERSEER'\"  [class.active]=\" activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\"\r\n    [class.disabled]=\"activeSelector &&  !['overseerNotify','overseerNotify'].includes(activeSelector) && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\"\r\n                *ngIf=\"(responsibilityForm?.overseers?.list?.length==0 && responsibilityForm?.overseers?.notifyList?.length == 0)|| activeSelector === 'overseerNotify' ||  activeSelector === 'overseer'\">\r\n            <svg class=\"checkIcon\" *ngIf=\"(responsibilityForm?.overseers?.list?.length>0 || responsibilityForm?.overseers?.notifyList?.length>0)\r\n                && !( activeSelector === 'overseerNotify' ||  activeSelector === 'overseer')\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Overseer </label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.overseers?.list?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseer',true)\"\r\n                        placeholder=\"Who should have oversight of the responsibility?\" readonly>\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.list?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.list?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let overseer of responsibilityForm?.overseers?.list?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                            {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.list?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"overseers.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.overseers?.list?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('overseer',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length == 0\">\r\n                    <input type=\"text\" (click)=\"activateSelector('overseerNotify',true)\"\r\n                        placeholder=\"Who should be notified if the responsibility is not complet...\" readonly  [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.overseers?.notifyList?.length>1\" [class.plus]=\"responsibilityForm?.overseers?.notifyList?.length>2\">\r\n                        <span class=\"chip\"\r\n                            *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                            {{overseer.member_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.overseers?.notifyList?.length > 2\"\r\n                            type=\"button\" appPopover (click)=\"notify.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.overseers?.notifyList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button  *ngIf=\"activeSelector !== 'overseerNotify'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('overseerNotify',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #overseers [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let overseer of responsibilityForm?.overseers?.list | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('overseer',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n                <app-popover #notify [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li\r\n                                *ngFor=\"let overseer of responsibilityForm?.overseers?.notifyList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\"\r\n                                            (click)=\"remove('overseerNotifyList',overseer)\">&#xe90d;</i>\r\n                                        {{ overseer.member_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <!-- Assurance -->\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\"  class=\"form-group-row\" *ngIf=\"moreOptions?.ASSURANCE\"  [attr.id]=\"'ASSURANCE'\"  [class.active]=\"activeSelector === 'assurance'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'assurance' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.assuranceList?.length==0 || activeSelector === 'assurance'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.assuranceList?.length>0 && activeSelector !== 'assurance'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">Assurance</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.assuranceList?.length ==0\">\r\n                    <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div>\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.assuranceList?.length > 0\">\r\n                    <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                            {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div>\r\n                    <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n                            class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n                <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [appScrollInView]=\"scrollToBottom\"  class=\"form-group-row\" *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\"  [attr.id]=\"'REQUIRES_AUDIT'\"  [class.active]=\"activeSelector === 'requires_audit'\"\r\n    [class.disabled]=\"activeSelector && activeSelector !== 'requires_audit' && sideSelectorElements.includes(activeSelector)\">\r\n        <div class=\"left\" [class.checked]=\"false\">\r\n            <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/audit.svg\" alt=\"\"\r\n                *ngIf=\"responsibilityForm?.requiresAuditList?.length==0 || activeSelector === 'requires_audit'\">\r\n\r\n            <svg *ngIf=\"responsibilityForm?.requiresAuditList?.length>0 && activeSelector !== 'requires_audit'\" class=\"checkIcon\"\r\n                xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n            </svg>\r\n        </div>\r\n        <div class=\"right\">\r\n            <div class=\"vx-form-group\">\r\n                <label class=\"vx-control-panel\">REQUIRES AUDIT?</label>\r\n                <div class=\"select\" *ngIf=\"responsibilityForm?.requiresAuditList?.length ==0\">\r\n                    <!-- <div class=\"custom-input\" (click)=\"activateSelector('assurance',true)\" aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\"></div> -->\r\n                    <!-- <input type=\"text\" (click)=\"activateSelector('assurance',true)\"\r\n                        placeholder=\"Select the test plan categories that you would like to add...\"\r\n                        readonly [appTooltip]=\"'Select the test plan categories that you would like to add this responsibility to.'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"> -->\r\n\r\n                    <input type=\"text\" placeholder=\"If yes, select an Audit Category.\" readonly (click)=\"activateSelector('requires_audit',true)\">\r\n                </div>\r\n                <div class=\"selected\" *ngIf=\"responsibilityForm?.requiresAuditList?.length > 0\">\r\n                    <!-- <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.assuranceList?.length>1\" [class.plus]=\"responsibilityForm?.assuranceList?.length>2\">\r\n                        <span class=\"chip\" *ngFor=\"let assurance of responsibilityForm?.assuranceList?.slice(0,2)\"><i\r\n                                class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                            {{assurance.category_name}}</span>\r\n                        <button class=\"count\" *ngIf=\"responsibilityForm?.assuranceList?.length > 2\" type=\"button\"\r\n                            appPopover (click)=\"assurance.popover()\" placement=\"right\">+\r\n                            {{responsibilityForm?.assuranceList?.slice(2).length}}</button>\r\n                    </div> -->\r\n                    <!-- <button *ngIf=\"activeSelector !== 'assurance'\" class=\"edit\" type=\"button\" (click)=\"activateSelector('assurance',true)\"><i\r\n                            class=\"icons\">&#xe90c;</i>\r\n                        Edit</button> -->\r\n\r\n                    <div class=\"chip-container\">\r\n                        <span class=\"chip\"><i class=\"icons\" (click)=\"remove('requires_audit',overseer)\">&#xe90d;</i> {{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n                    </div>\r\n                    <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i class=\"icons\">&#xe90c;</i> Edit</button>\r\n                            <!-- class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button> -->\r\n                </div>\r\n                <ng-container *ngIf=\"responsibilityForm?.requiresAuditList?.length\">\r\n                    <label class=\"vx-control-panel vx-mt-8\">\r\n                        SAMPLE SIZE\r\n                        <app-cs-switch [(ngValue)]=\"isSample\" (ngValueChange)=\"switchEnable($event)\"></app-cs-switch>\r\n                    </label>\r\n                    <div class=\"sample-part\"  [class.disabled]=\"!isSample\" >\r\n                        <app-cs-radio value=\"0\" class=\"sample-radio\" (click)=\"selectedSampleData(0)\" [checked]=\"selectedSample === 0\">\r\n                            <div class=\"name\">COUNT</div>\r\n                            <input type=\"number\" placeholder=\"--\"  (keypress)=\"checkInputValue($event)\"  [(ngModel)]=\"sampleValue\" >\r\n                        </app-cs-radio>\r\n                        <div class=\"or\">OR</div>\r\n                        <app-cs-radio value=\"1\" class=\"sample-radio\" (click)=\"selectedSampleData(1)\" [checked]=\"selectedSample === 1\">\r\n                            <div class=\"name\">PERCENTAGE</div>\r\n                            <input type=\"number\"  (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\" placeholder=\"--\">\r\n                        </app-cs-radio>\r\n                    </div>\r\n                    <label class=\"vx-control-panel vx-mt-8\">SET A REMINDER IF THE AUDIT PLAN IS NOT CREATED.</label>\r\n                    <div class=\"reminder-part\">\r\n                        Send reminder every <input type=\"number\" value=\"2\" [(ngModel)]=\"sendAuditRemindersValue\"> Day by\r\n                        <div class=\"picker-group\">\r\n                            <input class=\"time\" aria-label=\"12hr format\" [(ngModel)]=\"auditTime\"  [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"  [min]=\"currentTime\" readonly>\r\n                            <i class=\"icons\">&#xe955;</i>\r\n                            <ngx-material-timepicker #dailyTime [defaultTime]=\"auditTime\">\r\n                            </ngx-material-timepicker>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- <app-popover #assurance [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let assurance of responsibilityForm?.assuranceList | slice: 2; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('assurance',assurance)\">&#xe90d;</i>\r\n                                        {{ assurance.category_name }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<app-users-radio-list *ngIf=\"activeSelector === 'assignors'\" [usersList]=\"assignorsList\"\r\n    [selectedUsers]=\"responsibilityForm.assignors.list\" [itemEmailKey]=\"'member_email'\" [userIdKey]=\"'member_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignors',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n\r\n<ng-container  *ngIf=\"activeSelector === 'assignees'\">\r\n <app-group-users-list *ngIf=\"isEntrust\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\" [groupsList]=\"groupsList\"\r\n    [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'my_member_id'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n </app-group-users-list>\r\n <app-users-radio-list *ngIf=\"!isEntrust\" [itemEmailKey]=\"'employee_email'\" [usersList]=\"assigneesList\"\r\n [selectedUsers]=\"responsibilityForm.assignees.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"activeDeselector()\">\r\n</app-users-radio-list>\r\n</ng-container>\r\n\r\n\r\n\r\n<app-checkpoints *ngIf=\"activeSelector === 'checkpoints'\" [checkpointInstruction]=\"responsibilityForm?.checkpointInstruction\"\r\n    [checkpointData]=\"responsibilityForm?.checkpoints\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"\r\n    (closeCheckPoint)=\"activeDeselector()\"></app-checkpoints>\r\n<app-frequency-container *ngIf=\"activeSelector === 'frequency'\"  [frequencyDetails]=\"frequencyDetails\"\r\n(selectedFrequency)=\"frequencyData($event)\" [mode]=\"'responsibility'\" (closeFrequency)=\"activeDeselector()\"></app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\"\r\n    [responsibilityCentersList]=\"responsibilityCentersList\" [radioSelection]=\"(mode == 'EDIT')?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n    [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\"\r\n    (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\" [allCategories]=\"allCategories\"\r\n    [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n    (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\"  [programsList]=\"programsList\" \r\n[selectedCategories]=\"responsibilityForm.category\" [selectedProgram]=\"responsibilityForm.program\"\r\n(saveSelectedProgram)=\"saveSelectedList('program',$event)\"\r\n (closeEvent)=\"activeDeselector()\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer'\" [listHeading]=\"'Select a Reviewer'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"reviewersList\" [showWorkflow]=\"true\"\r\n    [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"  [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n    (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\" [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('overseer',$event)\" (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n    [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\"\r\n    (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\" [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\" [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n[noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\" [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n    (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\" [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\" [auditCategory]=\"assuranceRequiresAuditList\"  (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\" [selectedData]=\"responsibilityForm?.requiresAuditList[0]\"></app-audit-category-list>\r\n\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<app-framework-list *ngIf=\"activeSelector === 'framework'\" [categoryList]=\"categories\"\r\n    (closeFramework)=\"activeDeselector()\" (entrustFramework)=\"entrustFramework($event)\"></app-framework-list>\r\n\r\n<!-- risk-calculator here -->\r\n<app-risk-classification *ngIf=\"activeSelector === 'riskCalculator' \" [currentRiskValue]=\"responsibilityForm.riskClass\"\r\n    (saveList)=\"saveSelectedList('calculatedrisk',$event)\" (closeList)=\"activeDeselector()\">\r\n</app-risk-classification>\r\n\r\n<app-review-frequency *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n    [reviewCompleteDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewCompleteDays\"\r\n    [reviewNOtCompletedDays]=\"responsibilityForm.reviewers.reviewFrequency.reviewNOtCompletedDays\"\r\n    (saveReviewFrequency)=\"saveSelectedList('reviewFrequency',$event)\"\r\n    (closeReviewFrequency)=\"activeDeselector();activateSelector('reviewer',false);responsibilityForm.reviewers.list = [];\"\r\n    (backToUserList) = \"activeDeselector();activateSelector('reviewer',true)\"\r\n    >\r\n</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\" (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\" [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\" [selectedAssessment]=\"responsibilityForm?.assessment\" (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\" (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog-inline>\r\n\r\n<div class=\"import\"  *ngIf=\"activeSelector === 'checkpoints-new'\">\r\n  <app-create-assessment-container #editor [openPortal]=\"'RESPONSIBILITY_CHECKPOINT'\" (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\" [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n  </app-create-assessment-container>\r\n</div>\r\n\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .workflw-compliance{display:block;position:relative}::ng-deep .workflw-compliance marx-editor .editor-container{border-radius:4px}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block{min-height:72px;padding:11px 15px;line-height:20px;font-size:14px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){::ng-deep .workflw-compliance marx-editor .editor-container .editable-block:before{opacity:.72}}}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ul li{list-style:unset}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .workflw-compliance marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .workflw-compliance marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .workflw-compliance .sample-part{display:flex;align-items:center;margin-bottom:4px}::ng-deep .workflw-compliance .sample-part .sample-radio{width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item{position:relative;width:100%}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .radio{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:8px 8px 8px 36px;margin:0;max-width:100%;width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value .name{color:#747576;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input{border:1px solid #dcdcdc;background:#fff;border-radius:4px;height:24px;width:64px;text-align:center;padding:4px;color:#747576;font-size:13px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item .value input:focus{outline:none;box-shadow:none}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~svg{position:absolute;left:12px;top:12px}::ng-deep .workflw-compliance .sample-part .sample-radio .radio-item input:checked~.value{border:1px solid #34aa44;background:#eefcf0;pointer-events:auto}::ng-deep .workflw-compliance .sample-part .or{color:#161b2f;font-size:9px;font-weight:500;text-transform:uppercase;margin:0 10px}::ng-deep .workflw-compliance .sample-part.disabled{pointer-events:none}::ng-deep .workflw-compliance .sample-part.disabled .sample-radio .radio-item .value{background:#fbfbfb;border:1px solid #f1f1f1}::ng-deep .workflw-compliance .reminder-part{border:1px solid #dbdbdb;border-radius:4px;height:40px;padding:4px 12px;color:#747576;font-size:12px;display:flex;align-items:center}::ng-deep .workflw-compliance .reminder-part input{width:30px;border-radius:0;border:none;border-bottom:1px solid #dbdbdb;text-align:center;color:#747576;font-size:13px;font-weight:500;margin:0 4px}::ng-deep .workflw-compliance .reminder-part input:focus{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group{position:relative}::ng-deep .workflw-compliance .reminder-part .picker-group input{border:1px solid #f1f1f1!important;border-radius:4px!important;width:104px!important;height:28px!important;margin-left:8px!important;padding:6px 8px!important;cursor:pointer;color:#747576!important;font-size:12px!important;font-weight:500!important;text-align:left!important}::ng-deep .workflw-compliance .reminder-part .picker-group input:focus,::ng-deep .workflw-compliance .reminder-part .picker-group input:hover{outline:none!important;box-shadow:none!important}::ng-deep .workflw-compliance .reminder-part .picker-group i{color:#1e5dd3;position:absolute;top:6px;right:10px;font-size:16px}.assessment-text{color:#747576;font-size:11px;display:flex;align-items:center;padding:0 8px;margin:-16px 0 20px}.assessment-text i.alert-icon{color:#f2bf19;font-size:16px;margin-right:8px}.assessment-text strong{font-weight:600}.assessment-text button.remove-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3;font-size:10px;font-weight:600;padding:0;margin:0}.import{position:fixed;top:0;right:30px;bottom:0;left:0;z-index:-1;width:calc(100vw - 30px)}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.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}.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}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.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}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.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}.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}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}"]
                 },] }
     ];
@@ -4349,7 +4533,8 @@
         { type: ResponsibilityService },
         { type: FrequencyService },
         { type: UiKitService },
-        { type: SnackBarService }
+        { type: SnackBarService },
+        { type: AuthService }
     ]; };
     WorkflowComplianceComponent.propDecorators = {
         mode: [{ type: i0.Input }],
@@ -4366,6 +4551,7 @@
         rcSelected: [{ type: i0.Output }],
         openedFrom: [{ type: i0.Input }],
         selectedRC: [{ type: i0.Input }],
+        selectedProgram: [{ type: i0.Input }],
         onRemovingCheckpoint: [{ type: i0.Output }],
         isAssessmentDisabled: [{ type: i0.Output }],
         whatInput: [{ type: i0.ViewChild, args: ['what',] }]
@@ -5617,7 +5803,7 @@
     WorkflowPolicyComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-workflow-policy',
-                    template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n    <div class=\"workflow-policy\">\r\n        <div class=\"form-group-row\"  [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"name\"\r\n                    *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\">\r\n\r\n                <svg *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Policy Name <span class=\"required\">*</span>\r\n                    </label>\r\n                    <input  type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\"  *ngIf=\"policyForm.policyName =='' || activeSelector === 'name'\"\r\n                        (focusout)=\"activateSelector('name',false)\" [(ngModel)]=\"policyForm.policyName\"\r\n                        placeholder=\"Name this policy\">\r\n                        <div class=\"selected\" *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\">\r\n                            <div class=\"chip-container\">\r\n                                <span class=\"value\">{{policyForm.policyName}}</span>\r\n                            </div>\r\n                            <button class=\"edit\" (click)=\"activateSelector('name',true)\" type=\"button\"><i\r\n                                    class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                        </div>\r\n\r\n                    <p *ngIf=\"submitted && (!policyForm.policyName) \" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for this\r\n                        policy. </p>\r\n                    <marx-editor [(ngModel)]=\"policyForm.policyNotes\" [editorConfig]=\"description\"></marx-editor>\r\n                    <app-cs-switch [(ngValue)]=\"policyForm.availableOnPortal\"\r\n                        (ngValueChange)=\"availabilityOnPortal($event)\">\r\n                        Do you want this policy to be available on the portal? <i class=\"icons\"\r\n                        [appTooltip]=\"'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\"\r\n                         placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                    </app-cs-switch>\r\n                    <app-cs-switch *ngIf=\"policyForm.availableOnPortal\" [(ngValue)]=\"policyForm.acceptSuggestions\">\r\n                        Accept\r\n                        suggestions <i class=\"icons\" [appTooltip]=\"'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i></app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedCategories?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedCategories?.length==0 || activeSelector === 'category'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" />\r\n\r\n                <svg *ngIf=\"policyForm?.selectedCategories?.length>0 && activeSelector !== 'category'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Policy Category <span class=\"required\">*</span> </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedCategories?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('category',true)\"\r\n                            placeholder=\"Select a category for this policy.\" readonly>\r\n                    </div>\r\n\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedCategories?.length>0\">\r\n                        <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\r\n                            [class.plus]=\"policyForm?.selectedCategories?.length>2\">\r\n                            <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                {{category.item_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\r\n                                appPopover (click)=\"category.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedCategories?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                            (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                            Edit</button>\r\n                    </div>\r\n                    <app-popover #category [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let category of policyForm?.selectedCategories | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                            {{ category.item_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedCategories?.length==0) \" [appScrollInView]=\"true\" class=\"error-message\">Please\r\n                        select\r\n                        the category for this policy.</p>\r\n                </div>\r\n\r\n                <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length >0\">\r\n                    <ng-container *ngFor=\" let tag of policyForm?.customTags\">\r\n                        <label class=\"vx-control-panel\">{{tag.tagname}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tagname}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'approvers'\"\r\n        [class.disabled]=\" (activeSelector && activeSelector !== 'approvers' && sideSelectorElements.includes(activeSelector))\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedApprovers?.length==0 || activeSelector === 'approvers'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedApprovers?.length>0 && activeSelector !== 'approvers'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group approval-workflow\" [class.disabled]=\"(policyApprovalFlag!==0)\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Approval workflow <span class=\"required\">*</span>\r\n                        <button (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \"\r\n                            class=\"button\">Create a new Approval Workflow</button>\r\n                    </label>\r\n                    <div class=\"select\" [class.disabled]=\"approverWorkFlowList?.length==0\"\r\n                        *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length==0 ||policyForm?.selectedApprovers.length==0 \">\r\n\r\n                        <cs-select [ngModel]=\"selectedApprovalWorkflow\"\r\n                            (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n                            [placeholder]=\"'Select approval workflow for this policy'\" name=\"selectedApprovalWorkflow\"\r\n                            [setMaxWidth]=\"true\">\r\n                            <cs-option *ngFor=\"let data of approverWorkFlowList\" [value]=\"data\">\r\n                                {{data.workflow_name}}\r\n                            </cs-option>\r\n                            <cs-option [value]=\"-1\" (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \"\r\n                             >Create a new approval workflow</cs-option>\r\n\r\n                        </cs-select>\r\n                    </div>\r\n                    <ng-container *ngIf=\" policyForm?.selectedApprovers[0]?.approvers?.length>0\">\r\n                        <div class=\"selected\" *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\">\r\n                            <div class=\"workflow-label\">\r\n                                <p class=\"title\">Level {{i+1}}</p>\r\n                                <p class=\"description\">{{level.name}}</p>\r\n                            </div>\r\n                            <div class=\"vx-d-flex vx-align-center\">\r\n                                <div class=\"chip-container\">\r\n                                    <span class=\"chip\" *ngFor=\"let approver of level.approvers.slice(0,1);let j=index\"><i class=\"icons\"\r\n                                            (click)=\"remove('approvers',approver,i)\">&#xe90d;</i> <span\r\n                                            class=\"step\" *ngIf=\"level.name=='SEQUENTIAL'\" >{{j+1}}</span>{{approver.member_name}}</span>\r\n\r\n\r\n                                    <button class=\"count\" *ngIf=\"level.approvers?.length > 1\" type=\"button\" appPopover\r\n                                        (click)=\"labelName.popover()\" placement=\"right\">+\r\n\r\n                                        {{level.approvers.slice(1).length}}\r\n\r\n                                    </button>\r\n                                    <app-popover #labelName [dontCloseonClick]=\"true\">\r\n                                        <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                                <li *ngFor=\"let approver of level.approvers | slice: 1; let j = index\">\r\n                                                    <div class=\"avatar-card\">\r\n                                                        <span class=\"value\">\r\n                                                            <i class=\"icons\"\r\n                                                                (click)=\"remove('approvers',approver,i)\">&#xe90d;</i>\r\n                                                                <span class=\"step\" *ngIf=\"level.name=='SEQUENTIAL'\">\r\n                                                                    {{(j==level.approvers.slice(1).length-1)? 'Final' : (j+2) }}\r\n                                                                  </span>\r\n                                                            {{ approver.member_name }}\r\n                                                        </span>\r\n                                                    </div>\r\n                                                </li>\r\n                                            </ul>\r\n                                        </div>\r\n                                    </app-popover>\r\n\r\n                                </div>\r\n                                <button class=\"edit\" type=\"button\"\r\n                                    (click)=\"activateSelector('approvers',true,level.name);approversListIndex = i\"><i\r\n                                        class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                                <button class=\"close-btn\" (click)=\"remove('workflowLevel',level,i)\" >\r\n                                    <i class=\"icons\">&#xe90d;</i>\r\n                                </button>\r\n                            </div>\r\n\r\n\r\n\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedApprovers?.length==0) && (policyApprovalFlag === 0)\"  [appScrollInView]=\"true\" class=\"error-message\">\r\n                        Select or create an approval workflow for this policy.</p>\r\n\r\n                    <label class=\"vx-control-panel\" *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length>0\"><button\r\n                            class=\"button\"\r\n                            (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \">+\r\n                            Add More Levels</button></label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedAssignees?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedAssignees?.length==0 || activeSelector === 'assignees'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedAssignees?.length>0 && activeSelector !== 'assignees'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who?</label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedAssignees?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n                            placeholder=\"Select the persons responsible for attesting this policy.\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedAssignees?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let assignee of policyForm?.selectedAssignees?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('assignees',assignee)\">&#xe90d;</i>\r\n                                {{assignee.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedAssignees?.length > 2\" type=\"button\"\r\n                                appPopover (click)=\"assigneePopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedAssignees?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('assignees',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedAssignees?.length==0 && policyForm?.frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select the persons responsible for attesting this policy.</p>\r\n                    <app-cs-switch [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n                    [class.disabled]=\"policyForm?.selectedAssignees?.length==0\" class=\"who-toggle\">THIS POLICY REQUIRES\r\n                        E-SIGNATURE\r\n                        FOR ATTESTATION <i class=\"icons\" [appTooltip]=\"'If selected, the readers will be required to attest this policy using their electronic signature.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\r\n                    <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let assignee of policyForm?.selectedAssignees | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('assignees',assignee)\">&#xe90d;</i>\r\n                                            {{ assignee.employee_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.frequency_details\">\r\n                <img *ngIf=\"(!policyForm?.frequency_details) || activeSelector === 'frequency'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.frequency_details && activeSelector !== 'frequency'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">When?</label>\r\n               \r\n                    <div *ngIf=\"policyForm?.frequency_details == ''\" class=\"select button-sec\">\r\n                        <div class=\"custom-input frequency-custom-input\" (click)=\"activateSelector('frequency',true)\">{{frequencyPlaceholder}}</div>\r\n                    \r\n                        <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                    </div>\r\n                    <div *ngIf=\"policyForm?.frequency_details != ''\" class=\"selected button-sec\">\r\n                        <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n                        <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\r\n                            (click)=\"activateSelector('frequency',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i>Edit\r\n                        </button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && ((policyForm?.selectedAssignees?.length>0) && (!policyForm?.frequency_details))\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select an attestation schedule for this policy.</p>\r\n\r\n                    <label class=\"vx-control-panel\">Effective Date</label>\r\n                    <div class=\"date-time-picker\">\r\n                        <div class=\"picker-group\">\r\n                            <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\r\n                                [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\r\n                                [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\r\n                            </dp-date-picker>\r\n                            <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\" *ngIf=\"showRiskClassification\"\r\n            [class.disabled]=\"activeSelector  && activeSelector !== 'name'\">\r\n            <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\"\r\n                    *ngIf=\"!policyForm?.riskRating\">\r\n\r\n                <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                    *ngIf=\"policyForm?.riskRating\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Risk Classification</label>\r\n                    <div class=\"classification\">\r\n                        <label class=\"low\" *ngFor=\" let class of riskClassification\" [ngClass]=\"[class.class]\">\r\n                            <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\r\n                                [checked]=\"policyForm?.riskRating === class.value\" [(ngModel)]=\"policyForm.riskRating\">\r\n                            <span>{{class.name}}</span>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addResponsibilityCenters\"\r\n            [class.active]=\"activeSelector === 'rc'\"\r\n            [class.disabled]=\" activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedRCs?.length==0 || activeSelector === 'rc'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                    alt=\"\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedRCs?.length>0 &&  activeSelector !== 'rc'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Responsibility Center</label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('rc',true)\"\r\n                            placeholder=\"Select Responsibility Center(s) that this policy relates to.\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0,2)\"><i class=\"icons\"\r\n                                    (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                {{rc.item_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedRCs?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"rcPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedRCs?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('rc',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let rc of policyForm?.selectedRCs | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                            {{ rc.item_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addReviewers\"\r\n            [class.active]=\"activeSelector === 'reviewer'\"\r\n            [class.disabled]=\"activeSelector && (activeSelector !== 'reviewer' && activeSelector !== 'reviewerFrequency' ) && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedReviewers?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedReviewers?.length==0 || activeSelector === 'reviewer'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedReviewers?.length>0 && activeSelector !== 'reviewer'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Reviewer </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedReviewers?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select the person responsible for reviewing this policy\"\r\n                            readonly>\r\n                    </div>\r\n\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedReviewers?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let reviewer of policyForm?.selectedReviewers\"><i class=\"icons\"\r\n                                    (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                {{reviewer.member_name}}</span>\r\n\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedReviewers?.length==0) && (policyForm?.review_frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select a reviewer for this policy.</p>\r\n\r\n\r\n\r\n                    <label class=\"vx-control-panel\">When? </label>\r\n\r\n\r\n                    <div *ngIf=\"policyForm?.review_frequency_details == '' \" class=\"select button-sec\">\r\n                        <input type=\"text\" (click)=\"activateSelector('reviewerFrequency',true)\"\r\n                            [placeholder]=\"reviewerFrequencyPlaceholder\" readonly>\r\n                        <button (click)=\"activateSelector('reviewerFrequency',true)\" type=\"button\">Set A\r\n                            frequency</button>\r\n                    </div>\r\n                    <div *ngIf=\"policyForm?.review_frequency_details != '' \" class=\"selected button-sec\">\r\n                        <span class=\"chip\">{{reviewerFrequencyPlaceholder}}</span>\r\n                        <button *ngIf=\"activeSelector !== 'reviewerFrequency'\" type=\"button\" class=\"edit\"\r\n                            (click)=\"activateSelector('reviewerFrequency',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i>Edit\r\n                        </button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedReviewers?.length>0) && (!policyForm?.review_frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select the review schedule for this policy.</p>\r\n\r\n                    <app-format-and-evidence (updateFiles)=\"saveSelectedList('reviewer_attachments',$event)\" #formatEvidence\r\n                        [mode]=\"'policyReviewer'\" [organization_id]=\"organization_id\" [formatEvidanceData]=\"policyForm?.documentsAndLinks\">\r\n                    </app-format-and-evidence>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addCheckpoints\"\r\n        [class.active]=\"activeSelector === 'checkpoints'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.checkpointDetails?.length>0\">\r\n                <img *ngIf=\"policyForm?.checkpointDetails?.length==0 || activeSelector === 'checkpoints'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.checkpointDetails?.length>0 && activeSelector !== 'checkpoints'\"\r\n                    class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Checkpoints\r\n                        <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button>\r\n                    </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.checkpointDetails?.length===0\" (click)=\"activateSelector('checkpoints',true)\">\r\n                        <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\r\n                        <div class=\"custom-input \">Set up a questionnaire to confirm the reader\u2019s<br>understanding of the policy.</div>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.checkpointDetails?.length > 0\">\r\n                      <div class=\"chip-container\">\r\n                        <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\r\n\r\n                        <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\r\n\r\n                        <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\r\n                      </div>\r\n                      <button class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints',true)\">\r\n                          <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                  </div>\r\n                  <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\r\n                                        {{ checkpoint?.question }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addOverseers\"\r\n        [class.active]=\"activeSelector === 'ccEmail' ||activeSelector === 'ccFail'\"\r\n        [class.disabled]=\"activeSelector && ((activeSelector !== 'ccEmail' && activeSelector !== 'ccFail')) && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.CCEmail?.length>0 || policyForm?.CCFailEmail?.length>0 \">\r\n                <img *ngIf=\"(policyForm?.CCFailEmail?.length==0 && policyForm?.CCEmail?.length==0 )|| (activeSelector === 'ccEmail' || activeSelector === 'ccFail' )\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"(policyForm?.CCFailEmail?.length>0 || policyForm?.CCEmail?.length>0 )&& (activeSelector !== 'ccEmail' && activeSelector !== 'ccFail' )\"\r\n                    class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Overseer </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.CCEmail?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('ccEmail',true)\"\r\n                            placeholder=\"Who should have oversight of this policy?\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.CCEmail?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0,2)\"><i class=\"icons\"\r\n                                    (click)=\"remove('ccEmail',ccEmail)\">&#xe90d;</i>\r\n                                {{ccEmail.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.CCEmail?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"ccEmailPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.CCEmail?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccEmail',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n\r\n\r\n                    <div class=\"select\" *ngIf=\"policyForm?.CCFailEmail?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('ccFail',true)\"\r\n                            placeholder=\"Who should be notified if the policy is not attested on time?\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.CCFailEmail?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('ccFail',ccFail)\">&#xe90d;</i>\r\n                                {{ccFail.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.CCFailEmail?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"ccFailPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.CCFailEmail?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccFail',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let ccEmail of policyForm?.CCEmail | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('ccEmail',ccEmail)\">&#xe90d;</i>\r\n                                            {{ ccEmail.employee_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                    <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let ccFail of policyForm?.CCFailEmail | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('ccFail',ccFail)\">&#xe90d;</i>\r\n                                            {{ ccFail.employee_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addAssociatedDocuments\"\r\n        [class.disabled]=\"activeSelector  && activeSelector !== 'name'\">\r\n            <div class=\"left\">\r\n                <img *ngIf=\"policyForm.associatedDocuments.formatFiles?.length==0 \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n                    alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm.associatedDocuments.formatFiles?.length>0 \"\r\n                 class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Associated Documents\r\n                    </label>\r\n                    <app-format-and-evidence (updateFiles)=\"saveSelectedList('associatedDocuments',$event)\"\r\n                    [mode]=\"'policy'\" [organization_id]=\"organization_id\" [formatEvidanceData]=\"policyForm?.associatedDocuments\"></app-format-and-evidence>\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n\r\n\r\n    <app-checkbox-list [config]=\"categoryConfig\" [twoColumn]=\"true\" [itemsList]=\"categoryList\"\r\n        [selectedItems]=\"policyForm.selectedCategories\" [identifierKey]=\"'_id'\" [displayKey]=\"'item_name'\"\r\n        [tooltipKey]=\"'item_name'\" *ngIf=\"activeSelector==='category'\" (saveList)=\"saveSelectedList('category',$event)\"\r\n        (closeList)=\"disableSelector()\">\r\n    </app-checkbox-list>\r\n    <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\r\n    [itemsList]=\"\"\r\n    [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n    *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_CC')\">\r\n</app-checkbox-list> -->\r\n\r\n    <app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"rcList\"\r\n        [selectedResponsibilityCenters]=\"policyForm.selectedRCs\" [rcIdKey]=\"'item_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"disableSelector()\">\r\n    </app-responsibility-centers-list>\r\n\r\n\r\n    <app-users-radio-list *ngIf=\"activeSelector === 'reviewer'\" [itemEmailKey]=\"'member_email'\"\r\n        [usersList]=\"allReviewers\" [selectedUsers]=\"policyForm.selectedReviewers\" [userIdKey]=\"'member_id'\"\r\n        [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('reviewer',$event)\"\r\n        (closeUsersList)=\"disableSelector()\">\r\n    </app-users-radio-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector === 'ccEmail'\" [usersList]=\"overseersList\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n        [selectedUsers]=\"policyForm.CCEmail\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('ccEmail',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-owner-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector ==='ccFail'\" [usersList]=\"overseersList\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n        [selectedUsers]=\"policyForm.CCFailEmail\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('ccFail',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-owner-list>\r\n\r\n    <app-group-users-list *ngIf=\"activeSelector === 'assignees'\" [usersList]=\"assigneesList\" [groupsList]=\"groupsList\"\r\n        [selectedUsers]=\"policyForm.selectedAssignees\" [userIdKey]=\"'my_member_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-group-users-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector === 'approvers'\" [listHeading]=\"'Select Approvers'\"\r\n        [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\"\r\n        [showWorkflow]=\"true\"\r\n        [selectedUsers]=\"addMoreLevels?[]: policyForm.selectedApprovers[approversListIndex].approvers\"\r\n        [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('approvers',$event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\r\n        [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n        [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\r\n    </app-owner-list>\r\n\r\n    <app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [mode]=\"'policy'\"\r\n        [frequencyDetails]=\"frequencyDetails\" (selectedFrequency)=\"frequencyData($event)\"\r\n        (closeFrequency)=\"disableSelector()\"></app-frequency-container>\r\n\r\n    <app-frequency-container *ngIf=\"activeSelector === 'reviewerFrequency'\" [mode]=\"'reviewerFrequency'\"\r\n        [frequencyDetails]=\"reviewerFrequencyDetails\" (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n        (closeFrequency)=\"disableSelector()\"></app-frequency-container>\r\n    <app-checkpoints-policy-container (closeCheckPoint)=\"disableSelector()\" [checkpointData]=\"policyForm?.checkpointDetails\" [requiredPoint]=\"policyForm?.passingMarks\" *ngIf=\"activeSelector === 'checkpoints'\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"></app-checkpoints-policy-container>\r\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n</ng-container>\r\n<ng-container *ngIf=\"showCreateDocuments\">\r\n    <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\r\n     [organization_id]=\"organization_id\"\r\n     [member_obj_id]=\"member_obj_id\"\r\n     [userInfo]=\"userInfo\"\r\n     [policyId]=\"policyId\"\r\n     [policyName]=\"policyForm.policyName\"\r\n     (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n     (editPolicy)=\"editPolicyFromDocuments()\"\r\n     ></app-create-documents> -->\r\n     <lib-document-section *ngIf=\"showCreateDocuments\"\r\n     [organization_id]=\"organization_id\"\r\n     [member_obj_id]=\"member_obj_id\"\r\n     [userInfo]=\"userInfo\"\r\n     [policyId]=\"policyId\"\r\n     [policyName]=\"policyForm.policyName\"\r\n     (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n     (editPolicy)=\"editPolicyFromDocuments()\"\r\n     ></lib-document-section>\r\n\r\n</ng-container>\r\n",
+                    template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n    <div class=\"workflow-policy\">\r\n        <div class=\"form-group-row\"  [class.disabled]=\"activeSelector && activeSelector !== 'name'\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"name\"\r\n                    *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\">\r\n\r\n                <svg *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Policy Name <span class=\"required\">*</span>\r\n                    </label>\r\n                    <input  type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\"  *ngIf=\"policyForm.policyName =='' || activeSelector === 'name'\"\r\n                        (focusout)=\"activateSelector('name',false)\" [(ngModel)]=\"policyForm.policyName\"\r\n                        placeholder=\"Name this policy\">\r\n                        <div class=\"selected\" *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\">\r\n                            <div class=\"chip-container\">\r\n                                <span class=\"value\">{{policyForm.policyName}}</span>\r\n                            </div>\r\n                            <button class=\"edit\" (click)=\"activateSelector('name',true)\" type=\"button\"><i\r\n                                    class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                        </div>\r\n\r\n                    <p *ngIf=\"submitted && (!policyForm.policyName.trim()) \" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for this\r\n                        policy. </p>\r\n                    <marx-editor [(ngModel)]=\"policyForm.policyNotes\" [editorConfig]=\"description\"></marx-editor>\r\n                    <app-cs-switch [(ngValue)]=\"policyForm.availableOnPortal\"\r\n                        (ngValueChange)=\"availabilityOnPortal($event)\">\r\n                        Do you want this policy to be available on the portal? <i class=\"icons\"\r\n                        [appTooltip]=\"'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\"\r\n                         placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n                    </app-cs-switch>\r\n                    <app-cs-switch *ngIf=\"policyForm.availableOnPortal\" [(ngValue)]=\"policyForm.acceptSuggestions\">\r\n                        Accept\r\n                        suggestions <i class=\"icons\" [appTooltip]=\"'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\" placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe932;</i></app-cs-switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedCategories?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedCategories?.length==0 || activeSelector === 'category'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" />\r\n\r\n                <svg *ngIf=\"policyForm?.selectedCategories?.length>0 && activeSelector !== 'category'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Policy Category <span class=\"required\">*</span> </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedCategories?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('category',true)\"\r\n                            placeholder=\"Select a category for this policy.\" readonly>\r\n                    </div>\r\n\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedCategories?.length>0\">\r\n                        <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\r\n                            [class.plus]=\"policyForm?.selectedCategories?.length>2\">\r\n                            <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                {{category.item_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\r\n                                appPopover (click)=\"category.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedCategories?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n                            (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n                            Edit</button>\r\n                    </div>\r\n                    <app-popover #category [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let category of policyForm?.selectedCategories | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\r\n                                            {{ category.item_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedCategories?.length==0) \" [appScrollInView]=\"true\" class=\"error-message\">Please\r\n                        select\r\n                        the category for this policy.</p>\r\n                </div>\r\n\r\n                <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length >0\">\r\n                    <ng-container *ngFor=\" let tag of policyForm?.customTags\">\r\n                        <label class=\"vx-control-panel\">{{tag.tagname}}</label>\r\n                        <input type=\"text\" [(ngModel)]=\"tag.value\" placeholder=\"{{tag.tagname}}\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'approvers'\"\r\n        [class.disabled]=\" (activeSelector && activeSelector !== 'approvers' && sideSelectorElements.includes(activeSelector))\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedApprovers?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedApprovers?.length==0 || activeSelector === 'approvers'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedApprovers?.length>0 && activeSelector !== 'approvers'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group approval-workflow\" [class.disabled]=\"(policyApprovalFlag!==0)\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Approval workflow <span class=\"required\">*</span>\r\n                        <button (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \"\r\n                            class=\"button\">Create a new Approval Workflow</button>\r\n                    </label>\r\n                    <div class=\"select\" [class.disabled]=\"approverWorkFlowList?.length==0\"\r\n                        *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length==0 ||policyForm?.selectedApprovers.length==0 \">\r\n\r\n                        <cs-select [ngModel]=\"selectedApprovalWorkflow\"\r\n                            (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n                            [placeholder]=\"'Select approval workflow for this policy'\" name=\"selectedApprovalWorkflow\"\r\n                            [setMaxWidth]=\"true\">\r\n                            <cs-option *ngFor=\"let data of approverWorkFlowList\" [value]=\"data\">\r\n                                {{data.workflow_name}}\r\n                            </cs-option>\r\n                            <cs-option [value]=\"-1\" (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \"\r\n                             >Create a new approval workflow</cs-option>\r\n\r\n                        </cs-select>\r\n                    </div>\r\n                    <ng-container *ngIf=\" policyForm?.selectedApprovers[0]?.approvers?.length>0\">\r\n                        <div class=\"selected\" *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\">\r\n                            <div class=\"workflow-label\">\r\n                                <p class=\"title\">Level {{i+1}}</p>\r\n                                <p class=\"description\">{{level.name}}</p>\r\n                            </div>\r\n                            <div class=\"vx-d-flex vx-align-center\">\r\n                                <div class=\"chip-container\">\r\n                                    <span class=\"chip\" *ngFor=\"let approver of level.approvers.slice(0,1);let j=index\"><i class=\"icons\"\r\n                                            (click)=\"remove('approvers',approver,i)\">&#xe90d;</i> <span\r\n                                            class=\"step\" *ngIf=\"level.name=='SEQUENTIAL'\" >{{j+1}}</span>{{approver.member_name}}</span>\r\n\r\n\r\n                                    <button class=\"count\" *ngIf=\"level.approvers?.length > 1\" type=\"button\" appPopover\r\n                                        (click)=\"labelName.popover()\" placement=\"right\">+\r\n\r\n                                        {{level.approvers.slice(1).length}}\r\n\r\n                                    </button>\r\n                                    <app-popover #labelName [dontCloseonClick]=\"true\">\r\n                                        <div class=\"action-list\">\r\n                                            <ul class=\"action-item\">\r\n                                                <li *ngFor=\"let approver of level.approvers | slice: 1; let j = index\">\r\n                                                    <div class=\"avatar-card\">\r\n                                                        <span class=\"value\">\r\n                                                            <i class=\"icons\"\r\n                                                                (click)=\"remove('approvers',approver,i)\">&#xe90d;</i>\r\n                                                                <span class=\"step\" *ngIf=\"level.name=='SEQUENTIAL'\">\r\n                                                                    {{(j==level.approvers.slice(1).length-1)? 'Final' : (j+2) }}\r\n                                                                  </span>\r\n                                                            {{ approver.member_name }}\r\n                                                        </span>\r\n                                                    </div>\r\n                                                </li>\r\n                                            </ul>\r\n                                        </div>\r\n                                    </app-popover>\r\n\r\n                                </div>\r\n                                <button class=\"edit\" type=\"button\"\r\n                                    (click)=\"activateSelector('approvers',true,level.name);approversListIndex = i\"><i\r\n                                        class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                                <button class=\"close-btn\" (click)=\"remove('workflowLevel',level,i)\" >\r\n                                    <i class=\"icons\">&#xe90d;</i>\r\n                                </button>\r\n                            </div>\r\n\r\n\r\n\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedApprovers?.length==0) && (policyApprovalFlag === 0)\"  [appScrollInView]=\"true\" class=\"error-message\">\r\n                        Select or create an approval workflow for this policy.</p>\r\n\r\n                    <label class=\"vx-control-panel\" *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length>0\"><button\r\n                            class=\"button\"\r\n                            (click)=\"activateSelector('approvers',true);addMoreLevels=true; workflowType = 'SEQUENTIAL' \">+\r\n                            Add More Levels</button></label>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assignees'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'assignees' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedAssignees?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedAssignees?.length==0 || activeSelector === 'assignees'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedAssignees?.length>0 && activeSelector !== 'assignees'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Who?</label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedAssignees?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('assignees',true)\"\r\n                            placeholder=\"Select the persons responsible for attesting this policy.\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedAssignees?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let assignee of policyForm?.selectedAssignees?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('assignees',assignee)\">&#xe90d;</i>\r\n                                {{assignee.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedAssignees?.length > 2\" type=\"button\"\r\n                                appPopover (click)=\"assigneePopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedAssignees?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('assignees',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedAssignees?.length==0 && policyForm?.frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select the persons responsible for attesting this policy.</p>\r\n                    <app-cs-switch [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n                    [class.disabled]=\"policyForm?.selectedAssignees?.length==0\" class=\"who-toggle\">THIS POLICY REQUIRES\r\n                        E-SIGNATURE\r\n                        FOR ATTESTATION <i class=\"icons\" [appTooltip]=\"'If selected, the readers will be required to attest this policy using their electronic signature.'\"  placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\">&#xe91f;</i></app-cs-switch>\r\n                    <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let assignee of policyForm?.selectedAssignees | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('assignees',assignee)\">&#xe90d;</i>\r\n                                            {{ assignee.employee_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [class.active]=\"activeSelector === 'frequency'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'frequency' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.frequency_details\">\r\n                <img *ngIf=\"(!policyForm?.frequency_details) || activeSelector === 'frequency'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.frequency_details && activeSelector !== 'frequency'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">When?</label>\r\n\r\n                    <div *ngIf=\"policyForm?.frequency_details == ''\" class=\"select button-sec\">\r\n                        <div class=\"custom-input frequency-custom-input\" (click)=\"activateSelector('frequency',true)\">{{frequencyPlaceholder}}</div>\r\n\r\n                        <button (click)=\"activateSelector('frequency',true)\" type=\"button\">Set A frequency</button>\r\n                    </div>\r\n                    <div *ngIf=\"policyForm?.frequency_details != ''\" class=\"selected button-sec\">\r\n                        <span class=\"chip\">{{frequencyPlaceholder}}</span>\r\n                        <button *ngIf=\"activeSelector !== 'frequency'\" type=\"button\" class=\"edit\"\r\n                            (click)=\"activateSelector('frequency',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i>Edit\r\n                        </button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && ((policyForm?.selectedAssignees?.length>0) && (!policyForm?.frequency_details))\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select an attestation schedule for this policy.</p>\r\n\r\n                    <label class=\"vx-control-panel\">Effective Date</label>\r\n                    <div class=\"date-time-picker\">\r\n                        <div class=\"picker-group\">\r\n                            <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\r\n                                [value]=\"policyForm.policyDueDate  | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\r\n                                [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\r\n                            </dp-date-picker>\r\n                            <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\" *ngIf=\"showRiskClassification\"\r\n            [class.disabled]=\"activeSelector  && activeSelector !== 'name'\">\r\n            <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n                <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\" alt=\"im\"\r\n                    *ngIf=\"!policyForm?.riskRating\">\r\n\r\n                <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\"\r\n                    *ngIf=\"policyForm?.riskRating\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Risk Classification</label>\r\n                    <div class=\"classification\">\r\n                        <label class=\"low\" *ngFor=\" let class of riskClassification\" [ngClass]=\"[class.class]\">\r\n                            <input type=\"radio\" name=\"classification\" [value]=\"class.value\"\r\n                                [checked]=\"policyForm?.riskRating === class.value\" [(ngModel)]=\"policyForm.riskRating\">\r\n                            <span>{{class.name}}</span>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addResponsibilityCenters\"\r\n            [class.active]=\"activeSelector === 'rc'\"\r\n            [class.disabled]=\" activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedRCs?.length==0 || activeSelector === 'rc'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n                    alt=\"\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedRCs?.length>0 &&  activeSelector !== 'rc'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Responsibility Center</label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('rc',true)\"\r\n                            placeholder=\"Select Responsibility Center(s) that this policy relates to.\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0,2)\"><i class=\"icons\"\r\n                                    (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                {{rc.item_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.selectedRCs?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"rcPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.selectedRCs?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('rc',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let rc of policyForm?.selectedRCs | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('rc',rc)\">&#xe90d;</i>\r\n                                            {{ rc.item_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addReviewers\"\r\n            [class.active]=\"activeSelector === 'reviewer'\"\r\n            [class.disabled]=\"activeSelector && (activeSelector !== 'reviewer' && activeSelector !== 'reviewerFrequency' ) && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.selectedReviewers?.length>0\">\r\n                <img *ngIf=\"policyForm?.selectedReviewers?.length==0 || activeSelector === 'reviewer'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\" alt=\"\">\r\n\r\n                <svg *ngIf=\"policyForm?.selectedReviewers?.length>0 && activeSelector !== 'reviewer'\" class=\"checkIcon\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Reviewer </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.selectedReviewers?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('reviewer',true)\" placeholder=\"Select the person responsible for reviewing this policy\"\r\n                            readonly>\r\n                    </div>\r\n\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.selectedReviewers?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let reviewer of policyForm?.selectedReviewers\"><i class=\"icons\"\r\n                                    (click)=\"remove('reviewer',reviewer)\">&#xe90d;</i>\r\n                                {{reviewer.member_name}}</span>\r\n\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('reviewer',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedReviewers?.length==0) && (policyForm?.review_frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select a reviewer for this policy.</p>\r\n\r\n\r\n\r\n                    <label class=\"vx-control-panel\">When? </label>\r\n\r\n\r\n                    <div *ngIf=\"policyForm?.review_frequency_details == '' \" class=\"select button-sec\">\r\n                        <input type=\"text\" (click)=\"activateSelector('reviewerFrequency',true)\"\r\n                            [placeholder]=\"reviewerFrequencyPlaceholder\" readonly>\r\n                        <button (click)=\"activateSelector('reviewerFrequency',true)\" type=\"button\">Set A\r\n                            frequency</button>\r\n                    </div>\r\n                    <div *ngIf=\"policyForm?.review_frequency_details != '' \" class=\"selected button-sec\">\r\n                        <span class=\"chip\">{{reviewerFrequencyPlaceholder}}</span>\r\n                        <button *ngIf=\"activeSelector !== 'reviewerFrequency'\" type=\"button\" class=\"edit\"\r\n                            (click)=\"activateSelector('reviewerFrequency',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i>Edit\r\n                        </button>\r\n                    </div>\r\n                    <p *ngIf=\"submitted && (policyForm?.selectedReviewers?.length>0) && (!policyForm?.review_frequency_details)\"\r\n                        class=\"error-message\"  [appScrollInView]=\"true\">Select the review schedule for this policy.</p>\r\n\r\n                    <app-format-and-evidence (updateFiles)=\"saveSelectedList('reviewer_attachments',$event)\" #formatEvidence\r\n                        [mode]=\"'policyReviewer'\" [organization_id]=\"organization_id\" [formatEvidanceData]=\"policyForm?.documentsAndLinks\">\r\n                    </app-format-and-evidence>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addCheckpoints\"\r\n        [class.active]=\"activeSelector === 'checkpoints'\"\r\n        [class.disabled]=\" activeSelector && activeSelector !== 'checkpoints' && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.checkpointDetails?.length>0\">\r\n                <img *ngIf=\"policyForm?.checkpointDetails?.length==0 || activeSelector === 'checkpoints'\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm?.checkpointDetails?.length>0 && activeSelector !== 'checkpoints'\"\r\n                    class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Checkpoints\r\n                        <button  *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button>\r\n                    </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.checkpointDetails?.length===0\" (click)=\"activateSelector('checkpoints',true)\">\r\n                        <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\r\n                        <div class=\"custom-input \">Set up a questionnaire to confirm the reader\u2019s<br>understanding of the policy.</div>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.checkpointDetails?.length > 0\">\r\n                      <div class=\"chip-container\">\r\n                        <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\r\n\r\n                        <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\r\n\r\n                        <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\r\n                      </div>\r\n                      <button class=\"edit\" type=\"button\" (click)=\"activateSelector('checkpoints',true)\">\r\n                          <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                  </div>\r\n                  <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\r\n                                <div class=\"avatar-card\">\r\n                                    <span class=\"value\">\r\n                                        <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\r\n                                        {{ checkpoint?.question }}\r\n                                    </span>\r\n                                </div>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addOverseers\"\r\n        [class.active]=\"activeSelector === 'ccEmail' ||activeSelector === 'ccFail'\"\r\n        [class.disabled]=\"activeSelector && ((activeSelector !== 'ccEmail' && activeSelector !== 'ccFail')) && sideSelectorElements.includes(activeSelector)\">\r\n            <div class=\"left\" [class.checked]=\"policyForm?.CCEmail?.length>0 || policyForm?.CCFailEmail?.length>0 \">\r\n                <img *ngIf=\"(policyForm?.CCFailEmail?.length==0 && policyForm?.CCEmail?.length==0 )|| (activeSelector === 'ccEmail' || activeSelector === 'ccFail' )\"\r\n                    src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"im\">\r\n\r\n                <svg *ngIf=\"(policyForm?.CCFailEmail?.length>0 || policyForm?.CCEmail?.length>0 )&& (activeSelector !== 'ccEmail' && activeSelector !== 'ccFail' )\"\r\n                    class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                    <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                    <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">Overseer </label>\r\n                    <div class=\"select\" *ngIf=\"policyForm?.CCEmail?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('ccEmail',true)\"\r\n                            placeholder=\"Who should have oversight of this policy?\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.CCEmail?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0,2)\"><i class=\"icons\"\r\n                                    (click)=\"remove('ccEmail',ccEmail)\">&#xe90d;</i>\r\n                                {{ccEmail.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.CCEmail?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"ccEmailPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.CCEmail?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccEmail',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n\r\n\r\n                    <div class=\"select\" *ngIf=\"policyForm?.CCFailEmail?.length==0\">\r\n                        <input type=\"text\" (click)=\"activateSelector('ccFail',true)\"\r\n                            placeholder=\"Who should be notified if the policy is not attested on time?\" readonly>\r\n                    </div>\r\n                    <div class=\"selected\" *ngIf=\"policyForm?.CCFailEmail?.length > 0\">\r\n                        <div class=\"chip-container\">\r\n                            <span class=\"chip\" *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0,2)\"><i\r\n                                    class=\"icons\" (click)=\"remove('ccFail',ccFail)\">&#xe90d;</i>\r\n                                {{ccFail.employee_name}}</span>\r\n                            <button class=\"count\" *ngIf=\"policyForm?.CCFailEmail?.length > 2\" type=\"button\" appPopover\r\n                                (click)=\"ccFailPopover.popover()\" placement=\"right\">+\r\n                                {{policyForm?.CCFailEmail?.slice(2).length}}</button>\r\n                        </div>\r\n                        <button class=\"edit\" type=\"button\" (click)=\"activateSelector('ccFail',true)\">\r\n                            <i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                    </div>\r\n                    <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let ccEmail of policyForm?.CCEmail | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('ccEmail',ccEmail)\">&#xe90d;</i>\r\n                                            {{ ccEmail.employee_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                    <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\r\n                        <div class=\"action-list\">\r\n                            <ul class=\"action-item\">\r\n                                <li *ngFor=\"let ccFail of policyForm?.CCFailEmail | slice: 2; let j = index\">\r\n                                    <div class=\"avatar-card\">\r\n                                        <span class=\"value\">\r\n                                            <i class=\"icons\" (click)=\"remove('ccFail',ccFail)\">&#xe90d;</i>\r\n                                            {{ ccFail.employee_name }}\r\n                                        </span>\r\n                                    </div>\r\n                                </li>\r\n                            </ul>\r\n                        </div>\r\n                    </app-popover>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"form-group-row\" [appScrollInView]=\"scrollToBottom\" *ngIf=\"policyForm.addAssociatedDocuments\"\r\n        [class.disabled]=\"activeSelector  && activeSelector !== 'name'\">\r\n            <div class=\"left\">\r\n                <img *ngIf=\"policyForm.associatedDocuments.formatFiles?.length==0 \"\r\n                src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n                    alt=\"im\">\r\n\r\n                <svg *ngIf=\"policyForm.associatedDocuments.formatFiles?.length>0 \"\r\n                 class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                  <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                  <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n              </svg>\r\n            </div>\r\n            <div class=\"right\">\r\n                <div class=\"vx-form-group\">\r\n                    <label class=\"vx-control-panel\">\r\n                        Associated Documents\r\n                    </label>\r\n                    <app-format-and-evidence (updateFiles)=\"saveSelectedList('associatedDocuments',$event)\"\r\n                    [mode]=\"'policy'\" [organization_id]=\"organization_id\" [formatEvidanceData]=\"policyForm?.associatedDocuments\"></app-format-and-evidence>\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n\r\n\r\n    <app-checkbox-list [config]=\"categoryConfig\" [twoColumn]=\"true\" [itemsList]=\"categoryList\"\r\n        [selectedItems]=\"policyForm.selectedCategories\" [identifierKey]=\"'_id'\" [displayKey]=\"'item_name'\"\r\n        [tooltipKey]=\"'item_name'\" *ngIf=\"activeSelector==='category'\" (saveList)=\"saveSelectedList('category',$event)\"\r\n        (closeList)=\"disableSelector()\">\r\n    </app-checkbox-list>\r\n    <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\r\n    [itemsList]=\"\"\r\n    [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n    *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\r\n    (closeList)=\"fieldDeselector('ISSUE_CC')\">\r\n</app-checkbox-list> -->\r\n\r\n    <app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"rcList\"\r\n        [selectedResponsibilityCenters]=\"policyForm.selectedRCs\" [rcIdKey]=\"'item_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"disableSelector()\">\r\n    </app-responsibility-centers-list>\r\n\r\n\r\n    <app-users-radio-list *ngIf=\"activeSelector === 'reviewer'\" [itemEmailKey]=\"'member_email'\"\r\n        [usersList]=\"allReviewers\" [selectedUsers]=\"policyForm.selectedReviewers\" [userIdKey]=\"'member_id'\"\r\n        [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('reviewer',$event)\"\r\n        (closeUsersList)=\"disableSelector()\">\r\n    </app-users-radio-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector === 'ccEmail'\" [usersList]=\"overseersList\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n        [selectedUsers]=\"policyForm.CCEmail\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('ccEmail',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-owner-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector ==='ccFail'\" [usersList]=\"overseersList\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n        [selectedUsers]=\"policyForm.CCFailEmail\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'employee_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('ccFail',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-owner-list>\r\n\r\n    <app-group-users-list *ngIf=\"activeSelector === 'assignees'\" [usersList]=\"assigneesList\" [groupsList]=\"groupsList\"\r\n        [selectedUsers]=\"policyForm.selectedAssignees\" [userIdKey]=\"'my_member_id'\"\r\n        (saveSelectedList)=\"saveSelectedList('assignees',$event)\" (closeUsersList)=\"disableSelector()\">\r\n    </app-group-users-list>\r\n\r\n    <app-owner-list *ngIf=\"activeSelector === 'approvers'\" [listHeading]=\"'Select Approvers'\"\r\n        [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\"\r\n        [showWorkflow]=\"true\"\r\n        [selectedUsers]=\"addMoreLevels?[]: policyForm.selectedApprovers[approversListIndex].approvers\"\r\n        [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\"\r\n        (saveSelectedList)=\"saveSelectedList('approvers',$event)\" (closeUsersList)=\"disableSelector()\" [mode]=\"mode\"\r\n        [reviewerWorkflowType]=\"workflowType\" (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n        [workflowList]=\"workflowList\" [workflowText]=\"'Approval Workflow'\">\r\n    </app-owner-list>\r\n\r\n    <app-frequency-container *ngIf=\"activeSelector === 'frequency'\" [mode]=\"'policy'\"\r\n        [frequencyDetails]=\"frequencyDetails\" (selectedFrequency)=\"frequencyData($event)\"\r\n        (closeFrequency)=\"disableSelector()\"></app-frequency-container>\r\n\r\n    <app-frequency-container *ngIf=\"activeSelector === 'reviewerFrequency'\" [mode]=\"'reviewerFrequency'\"\r\n        [frequencyDetails]=\"reviewerFrequencyDetails\" (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n        (closeFrequency)=\"disableSelector()\"></app-frequency-container>\r\n    <app-checkpoints-policy-container (closeCheckPoint)=\"disableSelector()\" [checkpointData]=\"policyForm?.checkpointDetails\" [requiredPoint]=\"policyForm?.passingMarks\" *ngIf=\"activeSelector === 'checkpoints'\" (saveCheckPoint)=\"saveSelectedList('checkpoints',$event)\"></app-checkpoints-policy-container>\r\n    <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n</ng-container>\r\n<ng-container *ngIf=\"showCreateDocuments\">\r\n    <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\r\n     [organization_id]=\"organization_id\"\r\n     [member_obj_id]=\"member_obj_id\"\r\n     [userInfo]=\"userInfo\"\r\n     [policyId]=\"policyId\"\r\n     [policyName]=\"policyForm.policyName\"\r\n     (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n     (editPolicy)=\"editPolicyFromDocuments()\"\r\n     ></app-create-documents> -->\r\n     <lib-document-section *ngIf=\"showCreateDocuments\"\r\n     [organization_id]=\"organization_id\"\r\n     [member_obj_id]=\"member_obj_id\"\r\n     [userInfo]=\"userInfo\"\r\n     [policyId]=\"policyId\"\r\n     [policyName]=\"policyForm.policyName\"\r\n     (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n     (editPolicy)=\"editPolicyFromDocuments()\"\r\n     ></lib-document-section>\r\n\r\n</ng-container>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{justify-content:flex-end!important;line-height:16px}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#4681ef;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}.disabled{opacity:.5;pointer-events:none}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.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}.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}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.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}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.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}.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}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}"]
                 },] }
     ];
@@ -5749,23 +5935,32 @@
                         hidden: false,
                     },
                     {
-                        imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg',
-                        name: 'Responsibility Center',
-                        code: 'RC',
-                        tooltipTitle: 'Responsibility Center',
-                        tooltipMessage: "Responsibility Centers represent your organizational and operational infrastructure.<br>\n          You can assign a responsibility to one or more Responsibility Centers. Where you assign a responsibility to a Responsibility Center,\n          that responsibility will be shown as a responsibility that is required to be completed by the Responsibility Center.\n          The performance of a responsibility assigned to a Responsibility Center will also contribute to the overall performance of the Responsibility Center.",
+                        imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg',
+                        name: 'Responsibility Category',
+                        code: 'CATEGORY',
+                        tooltipTitle: 'Responsibility Category',
+                        tooltipMessage: "Responsibility Categories enable you to group similar responsibilities together.\n          Allocating a responsibility to a Responsibility Category allows you to view a group or similar responsibilities at once.\n          It also allows you to view the performance of those collective responsibilities.",
                         checked: false,
                         hidden: false,
                     },
                     {
                         imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg',
-                        name: 'Responsibility Category',
-                        code: 'CATEGORY',
-                        tooltipTitle: 'Responsibility Category',
+                        name: 'Program',
+                        code: 'PROGRAM',
+                        tooltipTitle: 'Program',
                         tooltipMessage: "Responsibility Categories enable you to group similar responsibilities together.\n          Allocating a responsibility to a Responsibility Category allows you to view a group or similar responsibilities at once.\n          It also allows you to view the performance of those collective responsibilities.",
                         checked: false,
                         hidden: false,
                     },
+                    {
+                        imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg',
+                        name: 'Responsibility Center',
+                        code: 'RC',
+                        tooltipTitle: 'Responsibility Center',
+                        tooltipMessage: "Responsibility Centers represent your organizational and operational infrastructure.<br>\n          You can assign a responsibility to one or more Responsibility Centers. Where you assign a responsibility to a Responsibility Center,\n          that responsibility will be shown as a responsibility that is required to be completed by the Responsibility Center.\n          The performance of a responsibility assigned to a Responsibility Center will also contribute to the overall performance of the Responsibility Center.",
+                        checked: false,
+                        hidden: false,
+                    },
                     {
                         imageUrl: 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg',
                         name: 'Format & Evidence',
@@ -11884,7 +12079,6 @@
         }
         PopoverLongpressDirective.prototype.mousedown = function (event) {
             var _this = this;
-            alert('Tong');
             this.currentTime = Date.now();
             // console.log('Current Time', this.currentTime);
             this.timer = setInterval(function () {
@@ -11892,7 +12086,6 @@
                     _this.longPressPopover.emit();
                     clearInterval(_this.timer);
                     _this.getEventPosition(event);
-                    alert('Ting tong');
                 }
             }, 10);
         };
@@ -16818,6 +17011,7 @@
             this.isDeleted = false;
             this.searchAssessments = '';
             this.isPreview = false;
+            this.program_ids = '';
             this.onAssessmentSelect = new i0.EventEmitter();
             this.cancelAssessment = new i0.EventEmitter();
             this.dataPerPage = this.responsibilityService.dataPerPage;
@@ -16905,7 +17099,7 @@
         AssessmentListComponent.prototype.getAssessmentCategoryList = function () {
             var _this = this;
             this.isLoader = true;
-            this.responsibilityService.getAssessmentCategory(this.assessmentPayload).subscribe(function (res) {
+            this.responsibilityService.getAssessmentCategory(this.assessmentPayload, this.program_ids).subscribe(function (res) {
                 _this.assessmentCategory = res;
                 _this.isLoader = false;
             });
@@ -16920,7 +17114,7 @@
             var payload = {
                 search_title: "",
             };
-            this.responsibilityService.getAssessmentList(payload, id).subscribe(function (res) {
+            this.responsibilityService.getAssessmentList(payload, id, this.program_ids).subscribe(function (res) {
                 _this.assessmentCategory.data[index].assessmentData = __spreadArray([], __read(new Set(res)));
             });
         };
@@ -16970,6 +17164,7 @@
         isEdit: [{ type: i0.Input }],
         selectedAssessment: [{ type: i0.Input }],
         selectedAssessmentData: [{ type: i0.Input }],
+        program_ids: [{ type: i0.Input }],
         onAssessmentSelect: [{ type: i0.Output }],
         cancelAssessment: [{ type: i0.Output }]
     };
@@ -17191,7 +17386,7 @@
         { type: i0.Component, args: [{
                     selector: 'app-pagination',
                     template: "<div class=\"wk-pagination-sec-ds vx-d-flex vx-align-center \" [class.right-align]=\"false\">\r\n    <div class=\"left vx-label-txt vx-fw-400 vx-tt-uppercase vx-lh-7\">\r\n        SHOWING {{start}} - {{end}} OF {{total}} RECORDS\r\n        <div class=\"pagination-box\" *ngIf=\"false\">\r\n            <ul class=\"vx-d-flex vx-align-center vx-m-0 vx-p-0\">\r\n                <li class=\"vx-d-flex\"><button class=\"vx-d-inline-flex vx-align-center vx-justify-center vx-label-txt vx-fw-400  vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\" [class.active]=\"true\">All</button></li>\r\n                <li class=\"vx-d-flex\">\r\n                    <button class=\"vx-d-inline-flex vx-align-center vx-justify-center vx-label-txt vx-fw-400 vx-tt-uppercase vx-pl-2 vx-pr-2 vx-m-0\" [class.active]=\"false\">A</button>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"right vx-d-flex vx-align-center\">\r\n        <div class=\"pagination-box\">\r\n            <ul class=\"vx-d-flex vx-align-center vx-m-0 vx-p-0\">\r\n                <li class=\"vx-d-flex vx-mr-1\">\r\n                    <button class=\"vx-m-0\"  [disabled]=\"currentPage === 1\" [class.disabled]=\"currentPage === 1\" (click)=\"increaseOrDecrease(-1)\" >\r\n                        <i class=\"icons\">&#xe96b;</i>\r\n                    </button>\r\n                </li>\r\n\r\n                <li class=\"vx-d-flex\" *ngFor=\"let page of pageArray; let i = index\">\r\n                    <button class=\"vx-label-txt vx-fw-400 vx-pl-1 vx-pr-1 vx-d-inline-flex vx-align-center vx-justify-center vx-m-0 vx-ml-1\"\r\n                     [disabled]=\"page === currentPage\" (click)=\"goToPageArrayGenerate(page,true)\" [class.active]=\"page === currentPage\" >\r\n                      {{page}}\r\n                    </button>\r\n                </li>\r\n               \r\n\r\n                <li class=\"vx-d-flex vx-ml-2\">\r\n                    <button class=\"vx-m-0\" (click)=\"increaseOrDecrease(1)\" [class.disabled]=\"currentPage === pageCount\">\r\n                        <i class=\"icons\">&#xe970;</i>\r\n                    </button>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n\r\n        <div class=\"goto-page vx-d-flex vx-align-center vx-ml-2\">\r\n            <div class=\"goto-page-text vx-label-txt vx-tt-uppercase vx-d-block vx-pl-2 vx-pr-2\">GO TO</div>\r\n            <div class=\"goto-page-input\">\r\n                <input  [class.invalid]=\"(isInvalidInput && !enterPageNumber) || pageCount < enterPageNumber\"\r\n                type=\"number\"\r\n                placeholder=\"Page No.\"\r\n                [(ngModel)]=\"enterPageNumber\"\r\n                type=\"number\"\r\n                placeholder=\"Page No.\"\r\n                (keyup)=\"onEnterPress($event)\"\r\n                onkeydown=\"if(event.key==='.'){event.preventDefault();}\"  oninput=\"event.target.value = event.target.value.replace(/[^0-9]*/g,'');\" type=\"text\" type=\"number\" placeholder=\"Page No.\" />\r\n                <button (click)=\"onEnterPress({ key: 'enter' })\" >\r\n                    <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/enter-icon.svg\" alt=\"\"  />\r\n                </button>\r\n            </div>\r\n            <div class=\"goto-page-text vx-label-txt vx-tt-uppercase vx-d-block vx-pl-2 vx-pr-2\">OF {{ pageCount }}</div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");.wk-pagination-sec-ds{border-radius:2px 2px 0 0;justify-content:space-between;padding:8px 0}.wk-pagination-sec-ds.right-align{justify-content:flex-end}.wk-pagination-sec-ds .left{font-size:12px;width:auto}.wk-pagination-sec-ds .left .pagination-box ul li{font-size:11px;list-style:none}.wk-pagination-sec-ds .left .pagination-box ul li:first-of-type{margin-right:4px}.wk-pagination-sec-ds .left .pagination-box ul li+li{margin-left:16px}.wk-pagination-sec-ds .left .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;font-size:11px;height:20px;min-width:20px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .left .pagination-box ul li button.active,.wk-pagination-sec-ds .left .pagination-box ul li button:hover{border-color:#1e5dd3;background:#1e5dd3;color:#fff}.wk-pagination-sec-ds .left .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important}.wk-pagination-sec-ds .left .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.wk-pagination-sec-ds .right{width:auto}.wk-pagination-sec-ds .right .pagination-box ul li{list-style:none}.wk-pagination-sec-ds .right .pagination-box ul li:first-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li:last-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;font-size:11px;height:24px;min-width:24px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .right .pagination-box ul li button.active,.wk-pagination-sec-ds .right .pagination-box ul li button:hover{border-color:#1e5dd3;color:#4681ef}.wk-pagination-sec-ds .right .pagination-box ul li button i{font-size:10px}.wk-pagination-sec-ds .right .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #bcbcbc}.wk-pagination-sec-ds .right .pagination-box ul li button.disable{pointer-events:none}.wk-pagination-sec-ds .right .goto-page{background:#fff;border:1px solid #bcbcbc;border-radius:2px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-text{border-right:1px solid #bcbcbc;font-size:11px;height:23px;line-height:23px}.wk-pagination-sec-ds .right .goto-page .goto-page-text:last-of-type{border-right:none;border-left:1px solid #bcbcbc}.wk-pagination-sec-ds .right .goto-page .goto-page-input{position:relative}.wk-pagination-sec-ds .right .goto-page .goto-page-input input{-moz-appearance:textfield;background:transparent;border:none;color:#161b2f;font-size:11px;text-transform:uppercase;padding:0 25px 0 5px;width:95px;height:23px;position:relative;top:-1px}.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-inner-spin-button,.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-outer-spin-button{-webkit-appearance:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input:focus{outline:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input.invalid{border:1px solid #d93b41;position:relative;top:-1px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-input button{background:transparent;border:none;position:absolute;right:3px;top:7px;cursor:pointer;padding:0;height:12px;width:19px;line-height:22px;display:flex;align-items:center;justify-content:center}.wk-pagination-sec-ds .right .goto-page .goto-page-input button img{width:12px;height:12px}"]
+                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");.wk-pagination-sec-ds{border-radius:2px 2px 0 0;justify-content:space-between;padding:8px 0}.wk-pagination-sec-ds.right-align{justify-content:flex-end}.wk-pagination-sec-ds .left{font-size:12px;width:auto}.wk-pagination-sec-ds .left .pagination-box ul li{font-size:11px;list-style:none}.wk-pagination-sec-ds .left .pagination-box ul li:first-of-type{margin-right:4px}.wk-pagination-sec-ds .left .pagination-box ul li+li{margin-left:16px}.wk-pagination-sec-ds .left .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;font-size:11px;height:20px;min-width:20px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .left .pagination-box ul li button.active,.wk-pagination-sec-ds .left .pagination-box ul li button:hover{border-color:#1e5dd3;background:#1e5dd3;color:#fff}.wk-pagination-sec-ds .left .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important}.wk-pagination-sec-ds .left .pagination-box ul li button i{font-size:8px;width:13px;height:13px;line-height:13px}.wk-pagination-sec-ds .right{width:auto}.wk-pagination-sec-ds .right .pagination-box ul li{list-style:none}.wk-pagination-sec-ds .right .pagination-box ul li:first-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:first-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li:last-child{height:24px}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button{color:#4681ef;position:relative}.wk-pagination-sec-ds .right .pagination-box ul li:last-child button.disabled{color:#bcbcbc!important}.wk-pagination-sec-ds .right .pagination-box ul li button{border:1px solid #bcbcbc;background:#fff;border-radius:2px;font-size:11px;height:24px;min-width:24px;outline:none;cursor:pointer;line-height:12px}.wk-pagination-sec-ds .right .pagination-box ul li button.active,.wk-pagination-sec-ds .right .pagination-box ul li button:hover{border-color:#1e5dd3;color:#4681ef}.wk-pagination-sec-ds .right .pagination-box ul li button i{font-size:10px}.wk-pagination-sec-ds .right .pagination-box ul li button.disabled{filter:grayscale(100%);pointer-events:none;opacity:1;color:unset!important;border:1px solid #bcbcbc}.wk-pagination-sec-ds .right .pagination-box ul li button.disable{pointer-events:none}.wk-pagination-sec-ds .right .goto-page{background:#fff;border:1px solid #bcbcbc;border-radius:2px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-text{border-right:1px solid #bcbcbc;font-size:11px;height:23px;line-height:23px}.wk-pagination-sec-ds .right .goto-page .goto-page-text:last-of-type{border-right:none;border-left:1px solid #bcbcbc}.wk-pagination-sec-ds .right .goto-page .goto-page-input{position:relative}.wk-pagination-sec-ds .right .goto-page .goto-page-input input{-moz-appearance:textfield;background:transparent;border:none;color:#161b2f;font-size:11px;text-transform:uppercase;padding:0 25px 0 5px;width:95px;height:23px;position:relative;top:-1px}.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-inner-spin-button,.wk-pagination-sec-ds .right .goto-page .goto-page-input input::-webkit-outer-spin-button{-webkit-appearance:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input:focus{outline:none}.wk-pagination-sec-ds .right .goto-page .goto-page-input input.invalid{border:1px solid #d93b41;position:relative;top:-1px;height:25px}.wk-pagination-sec-ds .right .goto-page .goto-page-input button{background:transparent;border:none;position:absolute;right:3px;top:7px;cursor:pointer;padding:0;height:18px;width:19px;line-height:22px;display:flex;align-items:center;justify-content:center}.wk-pagination-sec-ds .right .goto-page .goto-page-input button img{width:12px;height:12px}"]
                 },] }
     ];
     PaginationComponent$1.ctorParameters = function () { return []; };
@@ -17798,9 +17993,6 @@
         AssessmentSettingsComponent.prototype.closePanel = function (evt) {
             this.dialog.close({});
         };
-        AssessmentSettingsComponent.prototype.alert = function () {
-            alert('guyfgiuhgj');
-        };
         AssessmentSettingsComponent.prototype.manipulateDefault = function (mode) {
             if (mode === 'INCREASE' && this.settingsJSON.defaultScore >= 0) {
                 this.settingsJSON.defaultScore = this.settingsJSON.defaultScore + 1;
@@ -17841,11 +18033,6 @@
             var _this = this;
             this.settingsData.settingsElements[index] = evt;
             if (evt.type === 'ASSESSMENT') {
-                // const ref = this.dialogService.open(ConfirmationPopupComponent, { data: { message: 'This Action will overide the scores of all the questions' } });
-                // ref.afterClosed.subscribe(data => {
-                //
-                //   if (data.action === 'YES') {
-                // alert("Hey")
                 this.editorService.formsPage.settings.assessmentMode = evt.isEnabled;
                 this.editorService.formsPage.settings.defaultScore = evt.defaultScore;
                 this.editorService.formsPage.settings.negativeScore = evt.negativeScore;
@@ -23327,6 +23514,162 @@
                 },] }
     ];
+    var ProgramListingComponent = /** @class */ (function () {
+        function ProgramListingComponent(responsibilityService) {
+            this.responsibilityService = responsibilityService;
+            this.animation = false;
+            this.subList = false;
+            this.loader = false;
+            this.selectedCategories = [];
+            this.programData = {
+                data: [],
+                from: 0,
+                to: 0,
+                totalPages: 0,
+                totalRecords: 0,
+                currentPage: 1
+            };
+            this.showCategories = false;
+            this.searchString = '';
+            this.activeTab = 'regulations';
+            this.selectedIds = [];
+            this.categoryList = [];
+            this.saveSelectedProgram = new i0.EventEmitter();
+            this.closeEvent = new i0.EventEmitter();
+            this.allCategories = [];
+            this.getProgramsList();
+        }
+        ProgramListingComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.animation = true;
+            setTimeout(function () {
+                _this.animation = false;
+            }, 300);
+            if (this.selectedProgram[0]) {
+                this.currentProgram = this.selectedProgram[0];
+                this.showCategories = true;
+                this.getCategoriesList(this.currentProgram._id);
+            }
+            if (this.selectedCategories) {
+                this.selectedCategories.forEach(function (element) {
+                    _this.selectedIds.push(element);
+                });
+            }
+        };
+        ProgramListingComponent.prototype.clickSubList = function () {
+            this.subList = !this.subList;
+        };
+        ProgramListingComponent.prototype.handleSearch = function (event) {
+            if (this.searchString != event) {
+                this.searchString = event;
+                this.getProgramsList({ search: true });
+            }
+        };
+        ProgramListingComponent.prototype.selectProgram = function (event, program) {
+            var _a;
+            if (event.target.checked) {
+                this.currentProgram = program;
+                this.showCategories = true;
+                this.selectedIds = [];
+                this.categoryList = [];
+                this.getCategoriesList((_a = this.currentProgram) === null || _a === void 0 ? void 0 : _a._id);
+            }
+        };
+        ProgramListingComponent.prototype.changeProgramsPage = function (event) {
+            this.programData.currentPage = event;
+            this.getProgramsList();
+        };
+        ProgramListingComponent.prototype.getProgramsList = function (paramsObject) {
+            var _this = this;
+            this.loader = true;
+            var params = new i1.HttpParams();
+            if (paramsObject === null || paramsObject === void 0 ? void 0 : paramsObject.search) {
+                params = params.append('searchText', this.searchString);
+            }
+            else {
+                params = params.append('pageNo', this.programData.currentPage);
+            }
+            this.responsibilityService.getProgramsList(params).subscribe({
+                next: function (res) {
+                    _this.programData.data = res.data;
+                    _this.programData.from = res.from;
+                    _this.programData.to = res.to;
+                    _this.programData.totalPages = res.totalPages;
+                    _this.programData.totalRecords = res.totalRecords;
+                    _this.loader = false;
+                },
+                error: function (err) {
+                    console.error(err);
+                    _this.loader = false;
+                }
+            });
+        };
+        ProgramListingComponent.prototype.getCategoriesList = function (program_id) {
+            var _this = this;
+            this.loader = true;
+            var params = new i1.HttpParams();
+            params = params.append('program_id', program_id);
+            this.responsibilityService.getProgramsList(params).subscribe({
+                next: function (res) {
+                    _this.categoryList = res.data;
+                    _this.loader = false;
+                },
+                error: function (err) {
+                    console.error(err);
+                    _this.loader = false;
+                }
+            });
+            this.showCategories = true;
+        };
+        ProgramListingComponent.prototype.saveProgram = function () {
+        };
+        // save() {
+        //   this.getCategoriesList(this.currentProgram?._id);
+        // }
+        ProgramListingComponent.prototype.cancel = function () {
+        };
+        ProgramListingComponent.prototype.selectCategory = function (mode, activeTab, category) {
+            if (mode) {
+                this.selectedIds.push(category.category_id);
+            }
+            else {
+                var index = this.selectedIds.findIndex(function (element) { return element == category.category_id; });
+                this.selectedIds.splice(index, 1);
+            }
+        };
+        ProgramListingComponent.prototype.close = function () {
+            this.closeEvent.emit();
+        };
+        ProgramListingComponent.prototype.save = function () {
+            // this.saveSelectedProgram.emit({ program: this.currentProgram, categories: this.selectedCategories });
+            this.saveSelectedProgram.emit({ program: this.currentProgram, categories: this.selectedIds });
+        };
+        ProgramListingComponent.prototype.deleteEvent = function (event) {
+            this.currentProgram = undefined;
+            this.showCategories = false;
+            this.selectedIds = [];
+            this.categoryList = [];
+        };
+        return ProgramListingComponent;
+    }());
+    ProgramListingComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-program-listing',
+                    template: "<div class=\"program-listing\" [class.animate]=\"animation\">\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\r\n        <div class=\"search-block\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\"  (keyup.enter)=\"handleSearch($event.target.value)\" placeholder=\"Search Programs\" />\r\n        </div>\r\n        <app-pagination *ngIf=\"programData.totalPages > 1\" [start]=\"programData.from\" [end]=\"programData.to\" [total]=\"programData.totalRecords\" [pageCount]=\"programData.totalPages\" [currentPage]=\"programData.currentPage\" (selectedPage)=\"changeProgramsPage($event)\"></app-pagination>\r\n        <div class=\"program-listing-part\" [class.with-category-list]=\"showCategories\">\r\n            <app-no-data *ngIf=\"false\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data Found'\"></app-no-data>\r\n  \r\n                <div class=\"program-listing-item\" [class.active]=\"showCategories && currentProgram?._id == program?._id\" *ngFor=\"let program of programData.data;let i = index\" >\r\n                    <div class=\"table-row main-list\" \r\n                    [class.active]=\"currentProgram?._id == program?._id\"\r\n                   \r\n                    [class.disabled]=\"false\" (click)=\"clickSubList()\">\r\n                        <div class=\"table-column serial\">\r\n                          <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n                          <app-cs-radio [name]=\"'t'\" [checked]= \"currentProgram?._id == program?._id\" (checkedEvent)=\"selectProgram($event,program)\"></app-cs-radio>\r\n                                <!-- <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n                                (ngValueChange)=\"selectCategory($event,activeTab,category)\"></app-cs-checkbox> -->\r\n\r\n                        </div>\r\n                        <div class=\"table-column name\" (click)=\"selectProgram(true,program)\">\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\" type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n                                    <!-- <span class=\"count\">5</span> -->\r\n                                </div>\r\n                                <!-- <div class=\"within-part\" *ngIf=\"true\">\r\n                                    <span class=\"within-box\">Within</span>\r\n                                    <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">South Africa > America > India</span>\r\n                                </div> -->\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\" [disabled]=\"false\">\r\n                                <i *ngIf=\"!(showCategories && currentProgram?._id == program?._id)\" (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                    <div class=\"sub-list\" *ngIf=\"showCategories && (currentProgram?._id == program?._id)\">\r\n                        <div class=\"table-row\" [class.active]=\"selectedIds.includes(category.category_id)\" [class.disabled]=\"false\" *ngFor=\"let category of categoryList; let i = index\">\r\n                            <div class=\"table-column serial\">\r\n                                <div class=\"sr-no\" [appTooltip]=\"i+1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{i+1}}</div>\r\n                                <app-cs-checkbox [ngValue]=\"selectedIds.includes(category.category_id)\"\r\n                                (ngValueChange)=\"selectCategory($event,activeTab,category)\"></app-cs-checkbox>\r\n                            </div>\r\n                            <div class=\"table-column name\">\r\n                                <div class=\"name-inner\">\r\n                                    <div class=\"value\" [appTooltip]=\"category?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{category?.name}}</div>\r\n                                    <!-- <div class=\"name-with-count\">\r\n                                      <div class=\"value\" [appTooltip]=\"program?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n                                  </div> -->\r\n                                  <!-- <div class=\"within-part\" *ngIf=\"true\">\r\n                                      <span class=\"within-box\">Within</span>\r\n                                      <span class=\"value\" [appTooltip]=\"'South Africa > America > India'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">South Africa > America > India</span>\r\n                                  </div> -->\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"table-column action\"></div>\r\n                        </div>\r\n                    </div>\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'\"\r\n  (closeEvent)=\"save()\" (deleteEvent)=\"deleteEvent($event)\" (closeList)=\"close()\">\r\n</app-floating-bar>\r\n\r\n\r\n  <app-loader *ngIf=\"loader\"></app-loader>\r\n    <!-- <app-floating-bar></app-floating-bar> -->\r\n</div>",
+                    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-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 - 228px);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}.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}"]
+                },] }
+    ];
+    ProgramListingComponent.ctorParameters = function () { return [
+        { type: ResponsibilityService }
+    ]; };
+    ProgramListingComponent.propDecorators = {
+        programsList: [{ type: i0.Input }],
+        selectedProgram: [{ type: i0.Input }],
+        selectedCategories: [{ type: i0.Input }],
+        saveSelectedProgram: [{ type: i0.Output }],
+        closeEvent: [{ type: i0.Output }]
+    };
     var ProgramsService = /** @class */ (function () {
         function ProgramsService(http, authService, config) {
             this.http = http;
@@ -23440,7 +23783,7 @@
                 overseers: { cc_email: this.listToId(form === null || form === void 0 ? void 0 : form.program_overseer, 'member_id'), cc_email_groups: this.listToId(form === null || form === void 0 ? void 0 : form.program_overseer_group, 'group_id'), failure_cc_email: [], failure_cc_email_groups: [] },
                 default_overseers: { cc_email: this.listToId(form === null || form === void 0 ? void 0 : form.program_default_overseer, 'member_id'), cc_email_groups: this.listToId(form === null || form === void 0 ? void 0 : form.program_default_overseer_group, 'group_id'),
                     failure_cc_email: this.listToId(form === null || form === void 0 ? void 0 : form.program_default_failed_overseer, 'member_id'), failure_cc_email_groups: this.listToId(form === null || form === void 0 ? void 0 : form.program_default_failed_overseer_group, 'group_id') },
-                assessment: instance.selectedAssessment,
+                assessment: this.generateAssessment(form.program_assessments),
                 evidence_upload_flag: (form === null || form === void 0 ? void 0 : form.evidence_required) ? 1 : 0,
                 is_key_evidence: form === null || form === void 0 ? void 0 : form.allow_any_file_key_evidence,
                 custom_fields: (_m = form === null || form === void 0 ? void 0 : form.custom_fields) !== null && _m !== void 0 ? _m : [],
@@ -23450,6 +23793,14 @@
             console.log("payload", payload);
             return payload;
         };
+        ProgramsService.prototype.generateAssessment = function (assessment) {
+            if (assessment && (assessment === null || assessment === void 0 ? void 0 : assessment.length)) {
+                return assessment.map(function (cat) { var _a; return Object.assign(Object.assign({}, cat), { assessmentIds: (_a = cat.assessmentIds) === null || _a === void 0 ? void 0 : _a.map(function (assess) { return assess.id; }) }); });
+            }
+            else {
+                return [];
+            }
+        };
         ProgramsService.prototype.getFramework = function (input) {
             console.log("generator", input);
             if (input) {
@@ -23466,7 +23817,12 @@
             }
         };
         ProgramsService.prototype.listToId = function (list, key) {
-            return list.map(function (ele) { return ele[key]; });
+            if (list && (list === null || list === void 0 ? void 0 : list.length)) {
+                return list.map(function (ele) { return ele[key]; });
+            }
+            else {
+                return [];
+            }
         };
         /**
          *
@@ -23487,6 +23843,14 @@
             var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken()).set('x-business-cycle', JSON.stringify((this.getBusinessCycle())));
             return this.http.post(this.env.programEndpoint + '/category/editCategory/' + id + '?isBusinessCycle=true', payload, { headers: headers });
         };
+        ProgramsService.prototype.getMemeberByIds = function (ids) {
+            var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
+            return this.http.post(this.env.organizationPost + 'memberDetailsbyIds', { member_id: ids }, { headers: headers }).pipe(rxjs.retry(2));
+        };
+        ProgramsService.prototype.getMemberByGroups = function (ids) {
+            var headers = new i1.HttpHeaders().set('token', this.authService.getAuthorizationToken());
+            return this.http.post(this.env.organizationPost + 'groupDetailsbyIds', { group_ids: ids }, { headers: headers }).pipe(rxjs.retry(2));
+        };
         return ProgramsService;
     }());
     ProgramsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ProgramsService_Factory() { return new ProgramsService(i0__namespace.ɵɵinject(i1__namespace.HttpClient), i0__namespace.ɵɵinject(AuthService), i0__namespace.ɵɵinject(Configurations, 8)); }, token: ProgramsService, providedIn: "root" });
@@ -23616,7 +23980,6 @@
                 programObjective: '',
                 programDescription: ''
             };
-            this.val = true;
             this.controls = {
                 program_name: this.programForm.get('program_name'),
                 program_type: this.programForm.get('program_type'),
@@ -23674,7 +24037,8 @@
                 RC: [],
                 NON_REMOVABLE_OWNERS: [],
                 ALL_USER: [],
-                ALL_GROUP: []
+                ALL_GROUP: [],
+                SYSTEM_ROLE_IDS: []
             };
             this.listLoadingState = {
                 ROLES: false,
@@ -23703,7 +24067,6 @@
         };
         WorkflowProgramComponent.prototype.currentUser = function () {
             var user = this.authService.tokenInfo();
-            console.log("user_info", user);
             return {
                 member_email: user === null || user === void 0 ? void 0 : user.email,
                 member_id: user === null || user === void 0 ? void 0 : user.id,
@@ -23719,7 +24082,6 @@
             patch[controlName] = value;
             this.programForm.patchValue(patch);
             (_a = this.controls[controlName]) === null || _a === void 0 ? void 0 : _a.markAsTouched();
-            console.log(controlName, this.programForm, value);
         };
         Object.defineProperty(WorkflowProgramComponent.prototype, "formValid", {
             //Returns weather the form is valid or not
@@ -23736,16 +24098,15 @@
             configurable: true
         });
         WorkflowProgramComponent.prototype.ngOnInit = function () {
-            console.log('mode    ==', this.mode);
             if (this.mode === 'EDIT') {
                 this.getProgramDetails();
             }
             else {
-                this.fetchRoles();
-                this.fetchRC();
                 this.fetchOrganizationUsers();
                 this.fetchOrganizationGroup();
             }
+            this.fetchRoles();
+            this.fetchRC();
         };
         Object.defineProperty(WorkflowProgramComponent.prototype, "valid", {
             get: function () {
@@ -23754,26 +24115,16 @@
             enumerable: false,
             configurable: true
         });
-        WorkflowProgramComponent.prototype.openDatePicker = function () {
-            this.datePicker.api.open();
-            this.datePickerOverlay = true;
-            // this.setActiveFieldSelector('ISSUE_DATE_TIME', 'ISSUE_DATE_TIME');
-        };
-        WorkflowProgramComponent.prototype.closeDatePicker = function (evt) {
-            this.datePicker.api.close();
-            this.datePickerOverlay = false;
-            // this.setActiveFieldSelector('', '');
-        };
         /**
          * #### Description
          * Populates optional fields status for the optional fields
          */
         WorkflowProgramComponent.prototype.populateOptionalFields = function () {
-            var e_1, _36;
+            var e_1, _34;
             var activatedOptions = [];
             try {
-                for (var _37 = __values(Object.keys(this.additionalOption)), _38 = _37.next(); !_38.done; _38 = _37.next()) {
-                    var key = _38.value;
+                for (var _35 = __values(Object.keys(this.additionalOption)), _36 = _35.next(); !_36.done; _36 = _35.next()) {
+                    var key = _36.value;
                     if (this.additionalOption[key] === true) {
                         activatedOptions.push(key);
                     }
@@ -23782,20 +24133,16 @@
             catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
-                    if (_38 && !_38.done && (_36 = _37.return)) _36.call(_37);
+                    if (_36 && !_36.done && (_34 = _35.return)) _34.call(_35);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
             this.populateOption.emit(activatedOptions);
         };
         WorkflowProgramComponent.prototype.addMoreInfo = function (event) {
-            console.log("Activate", event);
             this.additionalOption[event.code] = event.checked;
             this.scrollToBottom = true;
         };
-        WorkflowProgramComponent.prototype.ngAfterViewInit = function () {
-            // this.formChangeListner();
-        };
         // function to automate form value change handng
         WorkflowProgramComponent.prototype.formChangeListner = function () {
             var _this = this;
@@ -23819,12 +24166,10 @@
             this.pickerChanged.emit(true);
         };
         WorkflowProgramComponent.prototype.listAction = function (evt, type) {
-            console.log("event     =>", evt);
             switch (type) {
                 case 'ROLE': {
                     var systemRoles = evt === null || evt === void 0 ? void 0 : evt.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.roleType) === "system role"; });
                     var patchVal = this.uniqueByProp(__spreadArray(__spreadArray([], __read(systemRoles)), __read(evt)), '_id');
-                    console.log("patchVal ==>", patchVal, lodash.isEqual(this.controls.program_roles.value.sort(), patchVal.sort()));
                     if (!lodash.isEqual(this.controls.program_roles.value.sort(), patchVal.sort())) {
                         this.setFormField('program_roles', patchVal);
                         this.fetchUsersAssociatedWithRoles();
@@ -23834,13 +24179,14 @@
                     break;
                 }
                 case 'RC': {
+                    console.log("role", evt);
                     var rc = this.setList(this.lists.RC, evt, 'item_id');
+                    console.log("setrc", rc);
                     this.setFormField('rc', this.uniqueByProp(rc, 'item_id'));
                     this.fieldDeselector(type);
                     break;
                 }
                 case 'OWNER': {
-                    console.log("evt", evt);
                     this.setFormField('program_owners', this.uniqueByProp(evt === null || evt === void 0 ? void 0 : evt.users, 'member_id'));
                     this.setFormField('program_owners_group', this.uniqueByProp(evt === null || evt === void 0 ? void 0 : evt.groups, 'group_id'));
                     this.fieldDeselector(type);
@@ -23897,13 +24243,7 @@
                     break;
                 }
                 case 'ASSESSMENT': {
-                    var assessment = evt.map(function (ele) { return ele.assessmentIds; })[0];
-                    this.selectedAssessment = evt.map((function (ele) {
-                        ele.assessmentIds = ele.assessmentIds.map(function (assessment) { return assessment.id; });
-                        return ele;
-                    }));
-                    console.log("this.selectedAssessment ==>", this.selectedAssessment, assessment);
-                    this.setFormField('program_assessments', assessment);
+                    this.setFormField('program_assessments', evt);
                     this.fieldDeselector(type);
                     break;
                 }
@@ -23915,16 +24255,14 @@
             }
         };
         WorkflowProgramComponent.prototype.remove = function (evt, type) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33;
             switch (type) {
                 case 'ROLE': {
-                    console.log("evttt", evt);
                     var roles = (_c = (_b = (_a = this.controls) === null || _a === void 0 ? void 0 : _a.program_roles) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele._id) !== (evt === null || evt === void 0 ? void 0 : evt._id); });
                     this.setFormField('program_roles', roles);
                     break;
                 }
                 case 'RC': {
-                    console.log("evttt", evt);
                     var rcs = (_f = (_e = (_d = this.controls) === null || _d === void 0 ? void 0 : _d.rc) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.item_id) !== (evt === null || evt === void 0 ? void 0 : evt.item_id); });
                     this.setFormField('rc', rcs);
                     break;
@@ -24021,8 +24359,9 @@
                     break;
                 }
                 case 'ASSESSMENT': {
-                    var assessment = (_35 = (_34 = (_33 = this.controls) === null || _33 === void 0 ? void 0 : _33.program_assessments) === null || _34 === void 0 ? void 0 : _34.value) === null || _35 === void 0 ? void 0 : _35.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.id) !== (evt === null || evt === void 0 ? void 0 : evt.id); });
-                    this.setFormField('program_assessments', assessment);
+                    var current = lodash.cloneDeep((_33 = this.controls.program_assessments) === null || _33 === void 0 ? void 0 : _33.value);
+                    console.log("evt", evt, current);
+                    // const assessment = this.controls?.program_assessments?.value?.filter((ele: any) => ele?.id !== evt?.id);
                     break;
                 }
                 case 'FRAMEWORK': {
@@ -24054,6 +24393,9 @@
                     this.lists.DEFAULT_ASSIGNEES = this.lists.DEFAULT_ASSIGNEES.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.member_id) !== (evt === null || evt === void 0 ? void 0 : evt.member_id); });
                     var defaultAssignee = (_a = this.controls.program_default_assignee) === null || _a === void 0 ? void 0 : _a.value;
                     var assignee = defaultAssignee.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.member_id) !== (evt === null || evt === void 0 ? void 0 : evt.member_id); });
+                    if (!(assignee === null || assignee === void 0 ? void 0 : assignee.length)) {
+                        this.lists.DEFAULT_ASSIGNEES = this.lists.ALL_USER;
+                    }
                     this.setFormField('program_default_assignee', assignee);
                     break;
                 }
@@ -24061,6 +24403,9 @@
                     this.lists.DEFAULT_ASSIGNEES_GROUP = this.lists.DEFAULT_ASSIGNEES_GROUP.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.group_id) !== (evt === null || evt === void 0 ? void 0 : evt.group_id); });
                     var defaultAssigneeGroup = (_b = this.controls.program_default_assignee_group) === null || _b === void 0 ? void 0 : _b.value;
                     var assigneeGroup = defaultAssigneeGroup.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.group_id) !== (evt === null || evt === void 0 ? void 0 : evt.group_id); });
+                    if (!(assigneeGroup === null || assigneeGroup === void 0 ? void 0 : assigneeGroup.length)) {
+                        this.lists.DEFAULT_ASSIGNEES_GROUP = this.lists.ALL_GROUP;
+                    }
                     this.setFormField('program_default_assignee_group', assigneeGroup);
                 }
             }
@@ -24155,85 +24500,65 @@
             };
             (_a = this.controls[typeField[fieldName]]) === null || _a === void 0 ? void 0 : _a.markAsTouched();
         };
-        //this function is responsible for fetching role list and invoke the setDefaultOwners function to set the default owners
-        WorkflowProgramComponent.prototype.fetchRoles = function (role) {
+        WorkflowProgramComponent.prototype.fetchRoles = function () {
             var _this = this;
-            this.listLoadingState.ROLES = true;
             this.programService.getRoles().subscribe({
                 next: function (res) {
-                    var _a, _b, _c, _d, _e;
-                    console.log("role list", res);
+                    var _a, _b, _c, _d, _e, _f, _g;
                     _this.lists.ROLES = res;
-                    var defaultVal = (_c = (_b = (_a = _this.lists) === null || _a === void 0 ? void 0 : _a.ROLES) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.roleType) === "system role"; });
-                    console.log("approvers");
-                    _this.setFormField('program_roles', defaultVal);
-                    console.log("AAAA");
-                    //for setting all tghe key admin and admin as default owner
-                    _this.fetchGroupsAssociatedWithRoles(role);
-                    _this.fetchUsersAssociatedWithRoles(role === null || role === void 0 ? void 0 : role.approvers);
-                    _this.listLoadingState.ROLES = false;
-                    if ((_d = role === null || role === void 0 ? void 0 : role.roles) === null || _d === void 0 ? void 0 : _d.length) {
-                        var roleIdArr_1 = (_e = role === null || role === void 0 ? void 0 : role.roles) === null || _e === void 0 ? void 0 : _e.map(function (role) { return role.roleId; });
-                        _this.listAction(res.data.filter(function (roleData) { return roleIdArr_1.includes(roleData._id); }), 'ROLE');
+                    var defaultSystemVal = (_d = (_c = (_b = (_a = _this.lists) === null || _a === void 0 ? void 0 : _a.ROLES) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.roleType) === "system role"; })) === null || _d === void 0 ? void 0 : _d.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele._id; });
+                    var defaultVal = (_g = (_f = (_e = _this.lists) === null || _e === void 0 ? void 0 : _e.ROLES) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.filter(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.roleType) === "system role"; });
+                    _this.lists.SYSTEM_ROLE_IDS = defaultSystemVal;
+                    if (_this.mode !== 'EDIT') {
+                        _this.setFormField('program_roles', defaultVal);
+                        _this.fetchUsersAssociatedWithRoles();
+                        _this.fetchGroupsAssociatedWithRoles();
                     }
                 },
-                error: function (err) { _this.listLoadingState.ROLES = false; }
+                error: function (err) { }
             });
         };
         //fetch the list of responsibilities center
-        WorkflowProgramComponent.prototype.fetchRC = function (rcPopulate) {
+        WorkflowProgramComponent.prototype.fetchRC = function () {
             var _this = this;
             this.programService.getResponsibilityCenterList().subscribe({
                 next: function (res) {
-                    console.log("rc list", res);
                     _this.lists.RC = res;
-                    if (rcPopulate)
-                        _this.listAction(rcPopulate, 'RC');
-                    // this.setFormField('program_roles',this.lists?.ROLES?.data?.filter((ele:any) =>  ele?.roleType === "system role"));
                 },
                 error: function (err) { }
             });
         };
-        WorkflowProgramComponent.prototype.fetchUsersAssociatedWithRoles = function (approvers) {
+        WorkflowProgramComponent.prototype.fetchUsersAssociatedWithRoles = function () {
             var _this = this;
             var _a, _b;
-            console.log("DDDD");
             var roleIds = (_b = (_a = this.controls.program_roles) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele._id; });
             // if (fetchAll) {
             this.programService.fetchAllRoleUsers(roleIds).subscribe({
                 next: function (res) {
-                    var _a, _b;
+                    var _a, _b, _c, _d, _e, _f;
                     _this.lists.OWNERS = res;
                     _this.lists.APPROVERS = res;
-                    console.log("EEEE");
-                    if (approvers === null || approvers === void 0 ? void 0 : approvers.length) {
-                        var approversDetails = res.data.filter(function (user) { return approvers.includes(user.member_id); });
-                        _this.setFormField('program_approver', approversDetails);
+                    console.log("resdef", res === null || res === void 0 ? void 0 : res.data);
+                    if (!((_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele.member_id; })) === null || _b === void 0 ? void 0 : _b.includes((_d = (_c = _this.controls.program_approver) === null || _c === void 0 ? void 0 : _c.value[0]) === null || _d === void 0 ? void 0 : _d.member_id))) {
+                        _this.setFormField('program_approver', []);
                     }
-                    if (((_b = (_a = _this.controls) === null || _a === void 0 ? void 0 : _a.all_user_in_role) === null || _b === void 0 ? void 0 : _b.value) && _this.mode !== 'EDIT') {
+                    if ((_f = (_e = _this.controls) === null || _e === void 0 ? void 0 : _e.all_user_in_role) === null || _f === void 0 ? void 0 : _f.value) {
                         _this.setFormField('program_owners', res === null || res === void 0 ? void 0 : res.data);
                     }
-                    else if (_this.mode === 'EDIT') {
+                    else {
                         _this.setDefaultOwners(res === null || res === void 0 ? void 0 : res.data);
                     }
                 },
                 error: function (err) { }
             });
         };
-        WorkflowProgramComponent.prototype.fetchGroupsAssociatedWithRoles = function (role) {
+        WorkflowProgramComponent.prototype.fetchGroupsAssociatedWithRoles = function () {
             var _this = this;
             var _a, _b;
-            console.log("BBBBB");
             var roleIds = (_b = (_a = this.controls.program_roles) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele._id; });
             this.programService.fetchAllRoleGroups(roleIds).subscribe({
                 next: function (res) {
-                    var _a;
                     _this.lists.OWNERS_GROUPS = res;
-                    console.log("CCCCCC");
-                    if ((_a = role === null || role === void 0 ? void 0 : role.owners_group) === null || _a === void 0 ? void 0 : _a.length) {
-                        var ownersGroupDetails = role.owners_group.length ? res.data.filter(function (group) { return role.owners_group.includes(group === null || group === void 0 ? void 0 : group.group_id); }) : [];
-                        _this.setFormField('program_owners_group', ownersGroupDetails);
-                    }
                 }
             });
         };
@@ -24248,17 +24573,28 @@
             this.listLoadingState.USERS = true;
             this.programService.fetchAllOrgUser().subscribe({
                 next: function (res) {
-                    console.log("users", res);
+                    var _a, _b, _c, _d, _e, _f;
                     _this.lists.ALL_USER = res;
-                    _this.lists.DEFAULT_ASSIGNEES = res;
                     _this.lists.ASSIGNEES = res;
                     _this.lists.REVIEWERS = res;
-                    _this.lists.DEFAULT_REVIEWERS = res;
                     _this.lists.OVERSEERS = res;
-                    _this.lists.DEFAULT_OVERSEERS = res;
+                    if (_this.mode !== 'EDIT') {
+                        _this.lists.DEFAULT_ASSIGNEES = res;
+                        _this.lists.DEFAULT_REVIEWERS = res;
+                        _this.lists.DEFAULT_OVERSEERS = res;
+                    }
+                    else if (_this.mode === 'EDIT') {
+                        if (!((_b = (_a = _this.controls.program_assignee) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length)) {
+                            _this.lists.DEFAULT_ASSIGNEES = res;
+                        }
+                        if (!((_d = (_c = _this.controls.program_reviewer) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.length)) {
+                            _this.lists.DEFAULT_REVIEWERS = res;
+                        }
+                        if (!((_f = (_e = _this.controls.program_overseer) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.length)) {
+                            _this.lists.DEFAULT_OVERSEERS = res;
+                        }
+                    }
                     _this.listLoadingState.USERS = false;
-                    if (data)
-                        _this.populateMoreOption(data, res, 'user');
                 },
                 error: function () { _this.listLoadingState.USERS = false; }
             });
@@ -24268,14 +24604,14 @@
             this.programService.fetchComplianceGroups().subscribe({
                 next: function (res) {
                     _this.lists.ALL_GROUP = res;
-                    _this.lists.DEFAULT_ASSIGNEES_GROUP = res;
                     _this.lists.ASSIGNEES_GROUP = res;
                     _this.lists.REVIEWERS_GROUP = res;
-                    _this.lists.DEFAULT_REVIEWERS_GROUP = res;
                     _this.lists.OVERSEERS_GROUP = res;
-                    _this.lists.DEFAULT_OVERSEERS_GROUP = res;
-                    if (data)
-                        _this.populateMoreOption(data, res, 'group');
+                    if (_this.mode !== 'EDIT') {
+                        _this.lists.DEFAULT_ASSIGNEES_GROUP = res;
+                        _this.lists.DEFAULT_REVIEWERS_GROUP = res;
+                        _this.lists.DEFAULT_OVERSEERS_GROUP = res;
+                    }
                 },
                 error: function (err) { }
             });
@@ -24290,7 +24626,6 @@
         WorkflowProgramComponent.prototype.uploadFiles = function (type, file) {
             var _this = this;
             var _a, _b, _c, _d, _e, _f;
-            console.log("file", file);
             var formData = new FormData();
             formData.append('file', file);
             var destinationString = this.authService.getOrganizationId().toString();
@@ -24399,18 +24734,16 @@
         WorkflowProgramComponent.prototype.saveProgram = function () {
             var _this = this;
             this.loader = true;
-            console.log("this.programForm ===>", this.programForm);
             var payload = this.programService.buildPayload(this.programForm, this);
-            console.log("payload", payload);
             if (payload && this.mode === 'CREATE') {
                 this.programService.saveProgram(payload).subscribe({
-                    next: function (res) { console.log(res); _this.loader = false; _this.showSmiley = true; _this.uiKitService.isSmileyOn = true; }
+                    next: function (res) { _this.loader = false; _this.showSmiley = true; _this.uiKitService.isSmileyOn = true; }
                 });
             }
             if (payload && this.mode === 'EDIT') {
                 this.programService.updateProgram(payload, this.programId).subscribe({
-                    next: function (res) { console.log(res); _this.loader = false; _this.showSmiley = true; _this.uiKitService.isSmileyOn = true; },
-                    error: function (err) { console.log(err); }
+                    next: function (res) { _this.loader = false; _this.showSmiley = true; _this.uiKitService.isSmileyOn = true; },
+                    error: function (err) { }
                 });
             }
         };
@@ -24507,144 +24840,141 @@
         WorkflowProgramComponent.prototype.getProgramDetails = function () {
             var _this = this;
             this.programService.getProgram(this.programId).pipe(rxjs.take(1)).subscribe(function (res) {
-                var _a, _b, _c, _d, _e, _f;
-                _this.fetchRC((_a = res.rc_ids) !== null && _a !== void 0 ? _a : []);
-                _this.setFormField('program_name', res.name);
-                _this.setFormField('program_type', res.programType);
-                _this.setFormField('program_objective', (_b = res.program_objective) === null || _b === void 0 ? void 0 : _b.text);
-                _this.setFormField('all_user_in_role', res.all_user_in_role);
-                _this.setFormField('program_description_attachments', (_c = res.description) === null || _c === void 0 ? void 0 : _c.attachments);
-                _this.setFormField('program_objective_attachments', res.attachments);
-                _this.setFormField('performance_calculation', res.calculate_past_upcoming_event);
-                _this.setFormField('recurring_frequency', res.program_frequency);
-                _this.setFormField('lock_scope_change', res.lock_scope);
-                _this.setFormField('rc', res.rc_details);
-                _this.setFormField('evidence_required', res.evidence_upload_flag);
-                _this.setFormField('allow_any_file_key_evidence', res.is_key_evidence);
-                _this.setFormField('program_assignee_group', res.assignee_group_ids);
-                _this.setFormField('program_default_assignee', res.default_assignee_ids);
-                _this.setFormField('program_default_assignee_group', res.default_assignee_group_ids);
+                var _a, _b, _c, _d, _e, _f, _g;
+                _this.setFormField('program_name', res === null || res === void 0 ? void 0 : res.name);
+                _this.setFormField('program_type', res === null || res === void 0 ? void 0 : res.programType);
+                _this.setFormField('program_objective', (_a = res === null || res === void 0 ? void 0 : res.program_objective) === null || _a === void 0 ? void 0 : _a.text);
+                _this.setFormField('all_user_in_role', res === null || res === void 0 ? void 0 : res.all_user_in_role);
+                _this.setFormField('program_description_attachments', (_b = res === null || res === void 0 ? void 0 : res.description) === null || _b === void 0 ? void 0 : _b.attachments);
+                _this.setFormField('program_objective_attachments', (_c = res === null || res === void 0 ? void 0 : res.program_objective) === null || _c === void 0 ? void 0 : _c.attachments);
+                _this.setFormField('performance_calculation', res === null || res === void 0 ? void 0 : res.calculate_past_upcoming_event);
+                _this.setFormField('recurring_frequency', res === null || res === void 0 ? void 0 : res.program_frequency);
+                _this.setFormField('lock_scope_change', res === null || res === void 0 ? void 0 : res.lock_scope);
+                var rc = res.rc_details.map(function (ele) { return Object.assign(Object.assign({}, ele), { item_name: ele === null || ele === void 0 ? void 0 : ele.rc_name, item_id: ele === null || ele === void 0 ? void 0 : ele.rc_id }); });
+                _this.setFormField('rc', rc);
+                _this.setFormField('evidence_required', res === null || res === void 0 ? void 0 : res.evidence_upload_flag);
+                _this.setFormField('allow_any_file_key_evidence', res === null || res === void 0 ? void 0 : res.is_key_evidence);
+                if ((res === null || res === void 0 ? void 0 : res.evidence_upload_flag) || (res === null || res === void 0 ? void 0 : res.is_key_evidence)) {
+                    _this.additionalOption.FORMATE_EVIDENCE = true;
+                    _this.populateOptionalFields();
+                }
                 _this.setFormField('assignee_completion_criteria', res.default_assignee_type);
                 _this.editorData.programDescription = (_d = res.description) === null || _d === void 0 ? void 0 : _d.text;
                 _this.editorData.programObjective = (_e = res.program_objective) === null || _e === void 0 ? void 0 : _e.text;
                 _this.setFormField('framework', Object.assign(Object.assign({}, res.framework_details), { _id: (_f = res === null || res === void 0 ? void 0 : res.framework_details) === null || _f === void 0 ? void 0 : _f.framework_id }));
-                _this.fetchRoles(res);
+                var role = (_g = res === null || res === void 0 ? void 0 : res.roles) === null || _g === void 0 ? void 0 : _g.map(function (ele) { return { _id: ele === null || ele === void 0 ? void 0 : ele.roleId, roleName: ele === null || ele === void 0 ? void 0 : ele.roleName, licenseType: ele === null || ele === void 0 ? void 0 : ele.licenseType }; });
+                _this.setFormField('program_roles', role);
                 if (res.assessmentData.length) {
-                    _this.listAction(res.assessmentData, 'ASSESSMENT');
+                    res.assessmentData = res.assessmentData.map(function (ele) {
+                        return Object.assign(Object.assign({}, ele), { assessmentIds: ele === null || ele === void 0 ? void 0 : ele.assessments.map(function (assess) { return Object.assign(Object.assign({}, assess), { id: assess === null || assess === void 0 ? void 0 : assess._id }); }) });
+                    });
+                    _this.setFormField('program_assessments', res.assessmentData);
                     _this.constants.additionalOption.ASSESSMENT = true;
+                    _this.populateOptionalFields();
                 }
                 if (res.custom_fields.length) {
                     _this.setFormField('custom_fields', res.custom_fields);
                     _this.constants.additionalOption.CUSTOM_FIELDS = true;
                 }
-                _this.fetchOrganizationUsers(res);
-                _this.fetchOrganizationGroup(res);
+                _this.populateMembers(res);
+                _this.populateGroups(res);
+                _this.fetchUsersAssociatedWithRoles();
+                _this.fetchGroupsAssociatedWithRoles();
+                _this.fetchOrganizationGroup();
+                _this.fetchOrganizationUsers();
             });
         };
-        /**
-         *
-         * @param res raw data which gave details program
-         * @param userOrGroupDetails: user details / group details array */
-        WorkflowProgramComponent.prototype.populateMoreOption = function (res, userOrGroupDetails, type) {
-            // Assignee related data population
-            if (res.assignee_ids.length || res.default_assignee_ids.length || res.assignee_group_ids.length || res.default_assignee_group_ids.length) {
-                if (type === 'user') {
-                    var assigneeDetailsArray = res.assignee_ids.length > 0 ? userOrGroupDetails.filter(function (user) { return res.assignee_ids.includes(user.member_id); }) : [];
-                    var defaultAssigneeArray = res.default_assignee_ids.length > 0 ? userOrGroupDetails.filter(function (user) { return res.default_assignee_ids.includes(user.member_id); }) : [];
-                    this.setFormField('program_assignee', assigneeDetailsArray);
-                    this.setFormField('program_default_assignee', defaultAssigneeArray);
-                    if (assigneeDetailsArray.length > 0) {
-                        this.lists.DEFAULT_ASSIGNEES = this.uniqueByProp(assigneeDetailsArray, 'member_id');
-                    }
-                    else {
-                        this.lists.DEFAULT_ASSIGNEES = this.lists.ALL_USER;
-                    }
-                }
-                else {
-                    var assigneeGroupArr = res.assignee_group_ids.length ? userOrGroupDetails.filter(function (group) { return res.assignee_group_ids.includes(group.group_id); }) : [];
-                    var defaultReviewerGroupArray = res.default_assignee_group_ids ? userOrGroupDetails.filter(function (group) { return res.default_assignee_group_ids.includes(group.group_id); }) : [];
-                    this.setFormField('program_assignee_group', assigneeGroupArr);
-                    this.setFormField('program_default_assignee_group', defaultReviewerGroupArray);
-                    if (assigneeGroupArr.length) {
-                        this.lists.DEFAULT_ASSIGNEES_GROUP = this.uniqueByProp(assigneeGroupArr, 'group_id');
-                    }
-                    else {
-                        this.lists.DEFAULT_ASSIGNEES_GROUP = this.lists.ALL_GROUP;
-                    }
-                }
-            }
-            // Reviewer related data population
-            if (res.default_reviewers.length || res.default_reviewer_group_ids.length || res.default_reviewers.length || res.default_reviewer_group_ids) {
-                if (type === 'user') {
-                    var reviewerDetailsArray = res.reviewers.length > 0 ? userOrGroupDetails.filter(function (user) { return res.reviewers.includes(user.member_id); }) : [];
-                    var defaultReviewerArray = res.default_reviewers.length > 0 ? userOrGroupDetails.filter(function (user) { return res.default_reviewers.includes(user.member_id); }) : [];
-                    this.setFormField('program_default_reviewer', defaultReviewerArray);
-                    this.setFormField('program_reviewer', reviewerDetailsArray);
-                    if (reviewerDetailsArray.length) {
-                        this.lists.DEFAULT_REVIEWERS = this.uniqueByProp(reviewerDetailsArray, 'member_id');
-                    }
-                    else {
-                        this.lists.DEFAULT_REVIEWERS = this.lists.ALL_USER;
-                    }
-                }
-                else {
-                    var reviewerGroupArr = res.reviewer_group_ids.length ? userOrGroupDetails.filter(function (group) { return res.reviewer_group_ids.includes(group.group_id); }) : [];
-                    var defaultReviewerGroupArray = res.default_reviewer_group_ids ? userOrGroupDetails.filter(function (group) { return res.default_reviewer_group_ids.includes(group.group_id); }) : [];
-                    this.setFormField('program_reviewer_group', reviewerGroupArr);
-                    this.setFormField('program_reviewer_group', defaultReviewerGroupArray);
-                    if (reviewerGroupArr.length) {
-                        this.lists.DEFAULT_REVIEWERS_GROUP = this.uniqueByProp(reviewerGroupArr, 'group_id');
-                    }
-                    else {
-                        this.lists.DEFAULT_REVIEWERS = this.lists.ALL_USER;
+        WorkflowProgramComponent.prototype.populateMembers = function (res) {
+            var _this = this;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var ids = __spreadArray([], __read(new Set(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(((_a = res === null || res === void 0 ? void 0 : res.owners) !== null && _a !== void 0 ? _a : []))), __read(((_b = res === null || res === void 0 ? void 0 : res.approvers) !== null && _b !== void 0 ? _b : []))), __read(((_c = res === null || res === void 0 ? void 0 : res.assignee_ids) !== null && _c !== void 0 ? _c : []))), __read(((_d = res === null || res === void 0 ? void 0 : res.default_assignee_ids) !== null && _d !== void 0 ? _d : []))), __read(((_e = res === null || res === void 0 ? void 0 : res.default_reviewers) !== null && _e !== void 0 ? _e : []))), __read(((_g = (_f = res === null || res === void 0 ? void 0 : res.overseers) === null || _f === void 0 ? void 0 : _f.cc_email) !== null && _g !== void 0 ? _g : []))), __read(((_j = (_h = res === null || res === void 0 ? void 0 : res.overseers) === null || _h === void 0 ? void 0 : _h.failure_cc_email) !== null && _j !== void 0 ? _j : []).filter(function (ele) { return ele; }))), __read(((_l = (_k = res === null || res === void 0 ? void 0 : res.default_overseers) === null || _k === void 0 ? void 0 : _k.cc_email) !== null && _l !== void 0 ? _l : []))), __read(((_o = (_m = res === null || res === void 0 ? void 0 : res.default_overseers) === null || _m === void 0 ? void 0 : _m.failure_cc_email) !== null && _o !== void 0 ? _o : []).filter(function (ele) { return ele; }))))));
+            this.programService.getMemeberByIds(ids).subscribe({
+                next: function (response) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                    if (res.owners && ((_a = res === null || res === void 0 ? void 0 : res.owners) === null || _a === void 0 ? void 0 : _a.length)) {
+                        var owners = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.owners.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                        _this.setFormField('program_owners', owners);
+                    }
+                    if (res.approvers && ((_b = res === null || res === void 0 ? void 0 : res.approvers) === null || _b === void 0 ? void 0 : _b.length)) {
+                        var approvers = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.approvers.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                        _this.setFormField('program_approver', approvers);
+                    }
+                    if ((res === null || res === void 0 ? void 0 : res.assignee_ids) && ((_c = res === null || res === void 0 ? void 0 : res.assignee_ids) === null || _c === void 0 ? void 0 : _c.length)) {
+                        var assignee = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.assignee_ids.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                        _this.setFormField('program_assignee', assignee);
+                        _this.lists.DEFAULT_ASSIGNEES = assignee;
+                    }
+                    if ((res === null || res === void 0 ? void 0 : res.default_assignee_ids) && ((_d = res === null || res === void 0 ? void 0 : res.default_assignee_ids) === null || _d === void 0 ? void 0 : _d.length)) {
+                        var assignee = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.default_assignee_ids.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                        _this.setFormField('program_default_assignee', assignee);
+                    }
+                    if ((res === null || res === void 0 ? void 0 : res.reviewers) && ((_e = res === null || res === void 0 ? void 0 : res.reviewers) === null || _e === void 0 ? void 0 : _e.length)) {
+                        var reviewers = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.reviewers.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                        _this.setFormField('program_reviewer', reviewers);
+                        _this.lists.DEFAULT_REVIEWERS = reviewers;
+                        _this.additionalOption.REVIEWER = true;
+                        _this.populateOptionalFields();
+                    }
+                    if ((res === null || res === void 0 ? void 0 : res.default_reviewers) && ((_f = res === null || res === void 0 ? void 0 : res.default_reviewers) === null || _f === void 0 ? void 0 : _f.length)) {
+                        var reviewers = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.default_reviewers.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                        _this.setFormField('program_default_reviewer', reviewers);
+                        _this.additionalOption.REVIEWER = true;
+                        _this.populateOptionalFields();
+                    }
+                    if ((res === null || res === void 0 ? void 0 : res.overseers) && ((_h = (_g = res === null || res === void 0 ? void 0 : res.overseers) === null || _g === void 0 ? void 0 : _g.cc_email) === null || _h === void 0 ? void 0 : _h.length)) {
+                        var cc = response.filter(function (ele) { var _a; return (_a = res === null || res === void 0 ? void 0 : res.overseers) === null || _a === void 0 ? void 0 : _a.cc_email.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                        _this.setFormField('program_overseer', cc);
+                        _this.lists.DEFAULT_OVERSEERS = cc;
+                        _this.additionalOption.OVERSEER = true;
+                        _this.populateOptionalFields();
+                    }
+                    if ((res === null || res === void 0 ? void 0 : res.default_overseers) && (((_k = (_j = res === null || res === void 0 ? void 0 : res.default_overseers) === null || _j === void 0 ? void 0 : _j.cc_email) === null || _k === void 0 ? void 0 : _k.length) || ((_m = (_l = res === null || res === void 0 ? void 0 : res.default_overseers) === null || _l === void 0 ? void 0 : _l.failure_cc_email) === null || _m === void 0 ? void 0 : _m.length))) {
+                        if ((_p = (_o = res === null || res === void 0 ? void 0 : res.default_overseers) === null || _o === void 0 ? void 0 : _o.cc_email) === null || _p === void 0 ? void 0 : _p.length) {
+                            var defaultCC = response.filter(function (ele) { var _a; return (_a = res === null || res === void 0 ? void 0 : res.default_overseers) === null || _a === void 0 ? void 0 : _a.cc_email.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                            _this.setFormField('program_default_overseer', defaultCC);
+                        }
+                        if ((_r = (_q = res === null || res === void 0 ? void 0 : res.default_overseers) === null || _q === void 0 ? void 0 : _q.failure_cc_email) === null || _r === void 0 ? void 0 : _r.length) {
+                            var failCC = response.filter(function (ele) { var _a; return (_a = res === null || res === void 0 ? void 0 : res.default_overseers) === null || _a === void 0 ? void 0 : _a.failure_cc_email.includes(ele === null || ele === void 0 ? void 0 : ele.member_id); });
+                            _this.setFormField('program_default_failed_overseer', failCC);
+                        }
+                        _this.additionalOption.OVERSEER = true;
+                        _this.populateOptionalFields();
                     }
                 }
-                this.setFormField('reviewer_completion_criteria', res.default_reviewers_type);
-                this.constants.additionalOption.REVIEWER = true;
-            }
-            // Overseer related data population
-            if (res.overseers.length || res.default_overseers.cc_email.length || res.default_overseers.cc_email_groups.length || res.default_overseers.failure_cc_email_groups.length) {
-                if (type === 'user') {
-                    var ccDetailsArray = res.overseers.cc_email.length > 0 ? userOrGroupDetails.filter(function (user) { return res.overseers.cc_email.includes(user.member_id); }) : [];
-                    var defaultCCArray = res.default_overseers.cc_email.length > 0 ? userOrGroupDetails.filter(function (user) { return res.default_overseers.cc_email.includes(user.member_id); }) : [];
-                    var defaultCCFailArray = res.default_overseers.failure_cc_email.length > 0 ? userOrGroupDetails.filter(function (user) { return res.default_overseers.failure_cc_email.includes(user.member_id); }) : [];
-                    this.setFormField('program_overseer', ccDetailsArray);
-                    this.setFormField('program_default_overseer', defaultCCArray);
-                    this.setFormField('program_default_failed_overseer', defaultCCFailArray);
-                    if (ccDetailsArray.length) {
-                        this.lists.DEFAULT_OVERSEERS = this.uniqueByProp(ccDetailsArray, 'member_id');
-                    }
-                    else {
-                        this.lists.DEFAULT_OVERSEERS = this.lists.ALL_USER;
+            });
+        };
+        WorkflowProgramComponent.prototype.populateGroups = function (res) {
+            var _this = this;
+            var _a, _b, _c;
+            var ids = __spreadArray([], __read(new Set(__spreadArray(__spreadArray(__spreadArray([], __read(((_a = res === null || res === void 0 ? void 0 : res.owners_group) !== null && _a !== void 0 ? _a : []))), __read(((_b = res === null || res === void 0 ? void 0 : res.assignee_group_ids) !== null && _b !== void 0 ? _b : []))), __read(((_c = res === null || res === void 0 ? void 0 : res.default_assignee_group_ids) !== null && _c !== void 0 ? _c : []))))));
+            this.programService.getMemberByGroups(ids).subscribe({
+                next: function (resp) {
+                    var _a, _b, _c;
+                    var response = resp === null || resp === void 0 ? void 0 : resp.data;
+                    if (res.owners_group && ((_a = res === null || res === void 0 ? void 0 : res.owners_group) === null || _a === void 0 ? void 0 : _a.length)) {
+                        var owners = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.owners_group.includes(ele === null || ele === void 0 ? void 0 : ele.group_id); });
+                        _this.setFormField('program_owners_group', owners);
                     }
-                }
-                else {
-                    var defaultCCGroupArr = res.default_overseers.cc_email_groups.length ? userOrGroupDetails.filter(function (group) { return res.default_overseers.cc_email_groups.includes(group.group_id); }) : [];
-                    var defaultCCFailureGroup = res.default_overseers.failure_cc_email_groups.length ? userOrGroupDetails.filter(function (group) { return res.default_overseers.failure_cc_email_groups.includes(group.group_id); }) : [];
-                    this.setFormField('program_default_overseer_group', defaultCCGroupArr);
-                    this.setFormField('program_default_failed_overseer_group', defaultCCFailureGroup);
-                    if (defaultCCGroupArr.length) {
-                        this.lists.DEFAULT_OVERSEERS_GROUP = this.uniqueByProp(defaultCCGroupArr, 'group_id');
+                    if (res.assignee_group_ids && ((_b = res === null || res === void 0 ? void 0 : res.assignee_group_ids) === null || _b === void 0 ? void 0 : _b.length)) {
+                        var assignee = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.assignee_group_ids.includes(ele === null || ele === void 0 ? void 0 : ele.group_id); });
+                        _this.setFormField('program_assignee_group', assignee);
+                        _this.lists.DEFAULT_ASSIGNEES_GROUP = assignee;
                     }
-                    else {
-                        this.lists.DEFAULT_OVERSEERS_GROUP = this.lists.ALL_GROUP;
+                    if ((res === null || res === void 0 ? void 0 : res.default_assignee_group_ids) && ((_c = res === null || res === void 0 ? void 0 : res.default_assignee_group_ids) === null || _c === void 0 ? void 0 : _c.length)) {
+                        var assignee = response.filter(function (ele) { return res === null || res === void 0 ? void 0 : res.default_assignee_group_ids.includes(ele === null || ele === void 0 ? void 0 : ele.group_id); });
+                        _this.setFormField('program_default_assignee_group', assignee);
                     }
                 }
-                this.constants.additionalOption.OVERSEER = true;
-            }
-            if (res.evidence_upload_flag || res.is_key_evidence) {
-                this.constants.additionalOption.FORMATE_EVIDENCE = true;
-            }
-            this.programForm.markAllAsTouched();
-            this.programForm.controls.performance_calculation.updateValueAndValidity();
-            this.populateOptionalFields();
+                // As of now groups has been removed from reviewer and overseeer if this group feature gets incoperated in
+                //future need to add group condition here to prepopulate the data while editing.
+            });
         };
         return WorkflowProgramComponent;
     }());
     WorkflowProgramComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-workflow-program',
-                    template: "<div class=\"workflow-program\" #form>\r\n    <form novalidate [formGroup]=\"programForm\">\r\n        <!-- Program Category Type -->\r\n        <form-field [checked]=\"controls?.program_type?.value > -1\" [active]=\"false\" [disabled]=\"sideElements.includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/issue-type.svg'\">\r\n            <label class=\"vx-control-panel\">PROGRAM TYPE <span class=\"required\">*</span></label>\r\n            <tab-selector formControlName=\"program_type\" [displayArray]=\"constants?.categoryType\"></tab-selector>\r\n            <!-- <p *ngIf=\"program_name?.invalid\" class=\"error-message\">Add a program type</p> -->\r\n        </form-field>\r\n\r\n        <!-- Program Category Name -->\r\n        <form-field [checked]=\"controls?.program_name?.value?.trim()?.length\" [active]=\"false\" [disabled]=\"sideElements.includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg'\">\r\n            <label class=\"vx-control-panel\">PROGRAM NAME <span class=\"required\">*</span></label>\r\n            <input InputTrim formControlName=\"program_name\" type=\"text\"\r\n                placeholder=\"What is the Program Category\u2019s name?\">\r\n\r\n            <p *ngIf=\"controls?.program_name?.errors && controls?.program_name?.touched\" class=\"error-message\">Enter a\r\n                name for this Program.</p>\r\n            <div class=\"upload-files vx-d-flex vx-align-center vx-flex-wrap vx-mt-1\">\r\n                <file-pill *ngFor=\"let attachment of controls?.description_attachment?.value |slice:0:2\"\r\n                    [extension]=\"attachment?.org_file?.split('.').pop()\" [name]=\"attachment?.org_file\"\r\n                    [disabled]=\"attachment?.uploading\" (delete)=\"deleteAttachment('DESCRIPTION',attachment)\">\r\n                </file-pill>\r\n                <button *ngIf=\"controls?.description_attachment?.value?.length > 2\" class=\"file-count\" appPopover (click)=\"uploadFile.popover()\" placement=\"right\">+{{controls?.description_attachment?.value?.length - 2}}</button>\r\n                <app-popover #uploadFile [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li class=\"vx-p-2\" *ngFor=\"let attachment of controls?.description_attachment?.value|slice:2\">\r\n                                <file-pill  [extension]=\"attachment?.org_file?.split('.').pop()\" [name]=\"attachment?.org_file\"\r\n                                [disabled]=\"attachment?.uploading\" (delete)=\"deleteAttachment('DESCRIPTION',attachment)\"></file-pill>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n            <marx-editor [(ngModel)]=\"editorData.programDescription\" [ngModelOptions]=\"{standalone: true}\"\r\n                (sendSavedFiles)=\"selectFile('DESCRIPTION',$event)\"\r\n                (ngModelChange)=\"setFormField('program_description',$event)\" [editorConfig]=\"constants?.description\">\r\n            </marx-editor>\r\n        </form-field>\r\n\r\n        <!-- Objective -->\r\n        <form-field [checked]=\"controls?.program_objective?.value?.trim()?.length\" [active]=\"activeList === 'OBJECTIVE'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'OBJECTIVE'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg'\">\r\n            <label class=\"vx-control-panel\">OBJECTIVE <span class=\"required\">*</span></label>\r\n            <marx-editor [(ngModel)]=\"editorData.programObjective\" [ngModelOptions]=\"{standalone: true}\"\r\n                (ngModelChange)=\"setFormField('program_objective',$event)\" [editorConfig]=\"constants?.objective\">\r\n            </marx-editor>\r\n            <p *ngIf=\"false\" class=\"error-message\">Specify the objective for this Program.</p>\r\n        </form-field>\r\n\r\n        <!-- Roles -->\r\n        <form-field [checked]=\"controls?.program_roles?.value?.length \" [active]=\"activeList === 'ROLE'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'ROLE'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/roles.svg'\">\r\n            <label class=\"vx-control-panel\">ROLE(S) <span class=\"required\">*</span></label>\r\n            <input-with-pill [placeholder]=\"'Which user roles have access to this program?'\"\r\n                (select)=\"activateList('ROLE')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_roles?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><i *ngIf=\"controls?.program_roles?.value[0]?.roleType !== 'system role'\"\r\n                                    (click)=\"remove(controls?.program_roles?.value[0],'ROLE')\"\r\n                                    class=\"icons\">&#xe90d;</i>{{controls?.program_roles?.value[0]?.roleName}}</span>\r\n                            <button *ngIf=\"controls?.program_roles?.value?.length > 1\" class=\"count\" appPopover\r\n                                (click)=\"role.popover()\" placement=\"right\">\r\n                                +{{controls?.program_roles?.value?.length - 1}}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='ROLE'\" class=\"edit\" type=\"button\" (click)=\"activateList('ROLE')\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <p *ngIf=\"false\" class=\"error-message\">Add a role(s)</p>\r\n            <app-popover #role [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let data of controls?.program_roles?.value | slice:1\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i *ngIf=\"data?.roleType !== 'system role'\" class=\"icons\"\r\n                                        (click)=\"remove(data,'ROLE')\">&#xe90d;</i>\r\n                                    {{data?.roleName}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n        <!-- Owners -->\r\n        <form-field [checked]=\"controls?.program_owners.value?.length > 0 || controls?.program_owners_group.value?.length > 0\" [active]=\"activeList === 'OWNER'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'OWNER'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/owner.svg'\">\r\n            <label class=\"vx-control-panel\">OWNER(S) <span class=\"required\">*</span></label>\r\n            <input-with-pill [placeholder]=\"'Who is responsible for managing this program?'\"\r\n                (select)=\"activateList('OWNER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_owners.value[0]\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"owner.popover()\" placement=\"right\">{{controls?.program_owners?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_owners_group?.value?.length && controls?.program_owners?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_owners_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_owners_group?.value?.length\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">{{controls?.program_owners_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='OWNER'\" [class.disabled]=\"controls?.all_user_in_role?.value\" (click)=\"activateList('OWNER')\"\r\n                        class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <p *ngIf=\"false\" class=\"error-message\">Add a owner(s)</p>\r\n            <div class=\"vx-d-flex vx-align-center vx-justify-end vx-mt-2\">\r\n                <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-mr-2\">ALL USERS ASSOCIATED WITH THE\r\n                    SELECTED ROLES</div>\r\n                <switch formControlName=\"all_user_in_role\" (change)=\"selectAllRoleOwner($event)\"></switch>\r\n            </div>\r\n            <app-popover #owner [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let owner of controls?.program_owners?.value \">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i *ngIf=\"!['ADMIN','KEY_ADMIN','LOGGED_IN'].includes(owner?.user_role)\"\r\n                                        class=\"icons\" (click)=\"remove(owner,'OWNER')\">&#xe90d;</i>\r\n                                    {{owner?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #group [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let owner of controls?.program_owners_group?.value  \">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i *ngIf=\"!['ADMIN','KEY_ADMIN','LOGGED_IN'].includes(owner?.user_role)\"\r\n                                        class=\"icons\" (click)=\"remove(owner,'OWNER_GROUP')\">&#xe90d;</i>\r\n                                    {{owner?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n        <!-- Approvers -->\r\n        <form-field [checked]=\"controls?.program_approver?.value?.length\" [active]=\"activeList === 'APPROVER'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'APPROVER'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg'\">\r\n            <label class=\"vx-control-panel\">APPROVER</label>\r\n            <input-with-pill [placeholder]=\"'Who is responsible for managing this program?'\"\r\n                (select)=\"activateList('APPROVER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_approver?.value[0]\">\r\n                    <div class=\"chip-container\">\r\n                        <!-- <div class=\"chip-inner\"> -->\r\n                            <span class=\"chip\"><i (click)=\"remove(controls?.program_approver?.value[0],'APPROVER')\"\r\n                                    class=\"icons\">&#xe90d;</i>{{controls?.program_approver?.value[0]?.member_name}}</span>\r\n                        <!-- </div> -->\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='APPROVER'\"(click)=\"activateList('APPROVER')\" class=\"edit\" type=\"button\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n        </form-field>\r\n\r\n        <!-- Performance Calculated -->\r\n        <form-field [checked]=\"controls?.performance_calculation?.value\" [active]=\"activeList === 'PERFORMANCE'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'PERFORMANCE'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/performance-calc.svg'\">\r\n            <label class=\"vx-control-panel\">HOW SHOULD THE PERFORMANCE OF THIS CATEGORY BE CALCULATED?</label>\r\n            <tab-selector formControlName=\"performance_calculation\" [displayArray]=\"constants?.performanceCalculation\">\r\n            </tab-selector>\r\n        </form-field>\r\n        <div\r\n            class=\"scope-label vx-fs-10 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mb-5 vx-lh-4 vx-d-inline-block\">\r\n            PROGRAM SCOPE <span class=\"vx-fs-12\">*</span></div>\r\n\r\n        <!-- Program Frequency -->\r\n        <form-field [checked]=\"[true,false].includes(controls?.recurring_frequency?.value)\" [active]=\"activeList === 'FREQUENCY'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'FREQUENCY'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/recurring.svg'\">\r\n            <label class=\"vx-control-panel\">PROGRAM FREQUENCY</label>\r\n            <div class=\"upload-format\">\r\n                <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n                    <span class=\"text vx-mb-0\">Is this program recurring?</span>\r\n                    <div class=\"radio-group program\">\r\n                        <app-cs-radio [name]=\"'recurring_frequency'\" [checked]=\"controls?.recurring_frequency?.value\"\r\n                            (checkedEvent)=\"setFormField('recurring_frequency',true)\">YES</app-cs-radio>\r\n                        <app-cs-radio [name]=\"'recurring_frequency'\" [checked]=\"!controls?.recurring_frequency?.value\"\r\n                            (checkedEvent)=\"setFormField('recurring_frequency',false)\">NO</app-cs-radio>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </form-field>\r\n\r\n        <!-- Scope Changes -->\r\n        <form-field [checked]=\"[true,false].includes(controls?.lock_scope_change?.value)\" [active]=\"activeList === 'SCOPE'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'SCOPE'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg'\">\r\n            <label class=\"vx-control-panel\">SCOPE CHANGES</label>\r\n            <div class=\"upload-format\">\r\n                <span class=\"text\">Would you like to <span class=\"vx-label-txt vx-fw-500\">lock changes</span> to the program\r\n                    scope?</span>\r\n                <div class=\"radio-group program\">\r\n                    <app-cs-radio [name]=\"'lock_scope_change'\" [checked]=\"controls?.lock_scope_change?.value\"\r\n                        (checkedEvent)=\"setFormField('lock_scope_change',true)\">YES</app-cs-radio>\r\n                    <app-cs-radio [name]=\"'lock_scope_change'\" [checked]=\"!controls?.lock_scope_change?.value\"\r\n                        (checkedEvent)=\"setFormField('lock_scope_change',false)\">NO</app-cs-radio>\r\n                </div>\r\n            </div>\r\n        </form-field>\r\n\r\n        <!-- Framework -->\r\n        <form-field [checked]=\"false\" [active]=\"activeList === 'FRAMEWORK'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'FRAMEWORK'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg'\">\r\n            <label class=\"vx-control-panel\">FRAMEWORK</label>\r\n            <input-with-pill [placeholder]=\"'Select a framework that this Program Category relates to'\" (select)=\"activateList('FRAMEWORK')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.framework?.value\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><i (click)=\"remove(controls?.framework.value,'FRAMEWORK')\" class=\"icons\">&#xe90d;</i>{{controls?.framework?.value?.framework_name}}</span>\r\n                            <!-- <button class=\"count\" appPopover (click)=\"framework.popover()\" placement=\"right\">+5</button> -->\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='FRAMEWORK'\" (click)=\"activateList('FRAMEWORK')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #framework [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\">&#xe90d;</i>\r\n                                    Manage framework name\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n        <!-- Responsibility Center -->\r\n        <form-field [checked]=\"controls?.rc?.value?.length\" [active]=\"activeList === 'RC'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'RC'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg'\">\r\n            <label class=\"vx-control-panel\">RESPONSIBILITY CENTER</label>\r\n            <input-with-pill (select)=\"activateList('RC')\"\r\n                [placeholder]=\"'Which Responsibility Center(s) can be linked to the responsibilities associated with this Program Category.'\">\r\n                <div class=\"selected\" *ngIf=\"controls?.rc?.value && controls?.rc?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><i class=\"icons\"\r\n                                    (click)=\"remove(controls?.rc?.value[0],'RC')\">&#xe90d;</i>{{controls?.rc?.value[0]?.item_name}}</span>\r\n                            <button *ngIf=\"controls?.rc?.value?.length  > 1\" class=\"count\" appPopover\r\n                                (click)=\"rc.popover()\" placement=\"right\">+{{controls?.rc?.value?.length -1 }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='RC'\" class=\"edit\" type=\"button\" (click)=\"activateList('RC')\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #rc [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let rc  of controls?.rc?.value  |slice:1\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\" (click)=\"remove(rc,'RC')\">&#xe90d;</i>\r\n                                    {{rc?.item_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n        <!-- Assignee -->\r\n        <form-field [checked]=\"controls?.program_assignee?.value?.length  ||  controls?.program_default_assignee?.value?.length ||controls?.program_default_assignee?.value?.length  ||  controls?.program_default_assignee_group?.value?.length\"\r\n        [active]=\"['ASSIGNEE','DEFAULT_ASSIGNEE']?.includes(activeList)\" [disabled]=\"sideElements?.includes(activeList) && !['ASSIGNEE','DEFAULT_ASSIGNEE'].includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg'\">\r\n            <label class=\"vx-control-panel\" [class.disabled]=\"activeList === 'DEFAULT_ASSIGNEE'\">ASSIGNEE(S)</label>\r\n            <input-with-pill [disabled]=\"activeList === 'DEFAULT_ASSIGNEE'\" [placeholder]=\"'Select persons responsible for executing controls within this program'\"\r\n                (select)=\"activateList('ASSIGNEE')\">\r\n                <div class=\"selected\"  *ngIf=\"controls?.program_assignee?.value?.length || controls?.program_assignee_group?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_assignee?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"assignee.popover()\" placement=\"right\">{{controls?.program_assignee?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_assignee_group?.value?.length && controls?.program_assignee?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_assignee_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_assignee_group?.value?.length\" class=\"count\" appPopover (click)=\"assignee_group.popover()\" placement=\"right\">{{controls?.program_assignee_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='ASSIGNEE'\" class=\"edit\" type=\"button\"  (click)=\"activateList('ASSIGNEE')\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #assignee [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let assignee of controls?.program_assignee?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(assignee,'ASSIGNEE')\" class=\"icons\">&#xe90d;</i>\r\n                                   {{assignee?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #assignee_group [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_assignee_group?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i  (click)=\"remove(group,'ASSIGNEE_GROUP')\"  class=\"icons\">&#xe90d;</i>\r\n                                   {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <label class=\"vx-control-panel\" [class.disabled]=\"activeList === 'ASSIGNEE'\">DEFAULT ASSIGNEE(S)</label>\r\n            <input-with-pill [disabled]=\"activeList === 'ASSIGNEE'\" [placeholder]=\"'Select persons responsible for executing controls within this program'\" (select)=\"activateList('DEFAULT_ASSIGNEE')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_default_assignee?.value?.length || controls?.program_default_assignee_group?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_assignee?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"defaultAssignee.popover()\" placement=\"right\">{{controls?.program_default_assignee?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_default_assignee_group?.value?.length && controls?.program_default_assignee?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_assignee_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_default_assignee_group?.value?.length\" class=\"count\" appPopover (click)=\"defaultAssigneeGroup.popover()\" placement=\"right\">{{controls?.program_default_assignee_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='DEFAULT_ASSIGNEE'\" (click)=\"activateList('DEFAULT_ASSIGNEE')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #defaultAssignee [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let assignee of controls?.program_default_assignee?.value \">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i  (click)=\"remove(assignee,'DEFAULT_ASSIGNEE')\" class=\"icons\">&#xe90d;</i>\r\n                                   {{assignee?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #defaultAssigneeGroup [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_default_assignee_group?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(assignee,'DEFAULT_ASSIGNEE_GROUP')\" class=\"icons\">&#xe90d;</i>\r\n                                    {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <div class=\"radio-group-selector\" [class.disabled]=\"activeList === 'ASSIGNEE'\">\r\n                <app-cs-radio [name]=\"'assignee'\" [checked]=\"controls?.assignee_completion_criteria?.value === 'ALL'\" (checkedEvent)=\"setFormField('assignee_completion_criteria', 'ALL')\">\r\n                    ALL SELECTED PERSONS NEED TO COMPLETE THIS <i class=\"icons\"\r\n                        [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\" >&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio [name]=\"'assignee'\" [checked]=\"controls?.assignee_completion_criteria?.value === 'ANYONE'\" (checkedEvent)=\"setFormField('assignee_completion_criteria', 'ANYONE')\">\r\n                    ANY SELECTED PERSON CAN COMPLETE THIS <i class=\"icons\"\r\n                        [appTooltip]=\"'If selected, only one responsibility will be created.'\" placement=\"bottom-right\"\r\n                        delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n            </div>\r\n        </form-field>\r\n\r\n        <!-- Reviewer -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.REVIEWER\"\r\n        [checked]=\"controls?.program_reviewer?.value?.length  ||  controls?.program_default_reviewer?.value?.length ||controls?.program_default_reviewer?.value?.length  ||  controls?.program_default_reviewer_group?.value?.length\"\r\n        [active]=\"['REVIEWER','DEFAULT_REVIEWER']?.includes(activeList)\" [disabled]=\"sideElements?.includes(activeList) && !['REVIEWER','DEFAULT_REVIEWER'].includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg'\">\r\n            <label [class.disabled]=\"activeList === 'DEFAULT_REVIEWER'\" class=\"vx-control-panel\">Reviewer(s)</label>\r\n            <input-with-pill [disabled]=\"activeList === 'DEFAULT_REVIEWER'\" [placeholder]=\"'Select persons responsible for executing controls within this program'\" (select)=\"activateList('REVIEWER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_reviewer?.value?.length || controls?.program_reviewer_group?.value?.length\">\r\n\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_reviewer?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">{{controls?.program_reviewer?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_reviewer_group?.value?.length && controls?.program_reviewer?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_reviewer_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_reviewer_group?.value?.length\" class=\"count\" appPopover (click)=\"reviewerGroup.popover()\" placement=\"right\">{{controls?.program_reviewer_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='REVIEWER'\" (click)=\"activateList('REVIEWER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let reviewer of controls?.program_reviewer?.value | slice:1\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(reviewer,'REVIEWER')\" class=\"icons\">&#xe90d;</i>\r\n                                    {{reviewer?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #reviewerGroup [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_reviewer_group?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(group,'REVIEWER_GROUP')\" class=\"icons\">&#xe90d;</i>\r\n                                    {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <label [class.disabled]=\"activeList === 'REVIEWER'\" class=\"vx-control-panel\">DEFAULT Reviewer(S)</label>\r\n            <input-with-pill [disabled]=\"activeList === 'REVIEWER'\" [placeholder]=\"'Select persons responsible for executing controls within this program'\" (select)=\"activateList('DEFAULT_REVIEWER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_default_reviewer?.value?.length || controls?.program_default_reviewer_group?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_reviewer?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"defaultReviewer.popover()\" placement=\"right\">{{controls?.program_default_reviewer?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_default_reviewer_group?.value?.length && controls?.program_default_reviewer?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_reviewer_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_default_reviewer_group?.value?.length\" class=\"count\" appPopover (click)=\"assignee_group.popover()\" placement=\"right\">{{controls?.program_default_reviewer_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='DEFAULT_REVIEWER'\" (click)=\"activateList('DEFAULT_REVIEWER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #defaultReviewer [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let reviewer of controls?.program_default_reviewer?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(reviewer,'DEFAULT_REVIEWER')\" class=\"icons\">&#xe90d;</i>\r\n                                   {{reviewer?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #defaultReviewerGroup [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_default_reviewer_group?.value \">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i  (click)=\"remove(group,'DEFAULT_REVIEWER_GROUP')\" class=\"icons\">&#xe90d;</i>\r\n                                   {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <div class=\"radio-group-selector\" [class.disabled]=\"activeList === 'REVIEWER'\">\r\n                <app-cs-radio [name]=\"'reviewer'\" [checked]=\"controls?.reviewer_completion_criteria?.value == 'SEQUENTIAL'\" (checkedEvent)=\"setFormField('reviewer_completion_criteria', 'SEQUENTIAL')\">\r\n                    SEQUENTIAL <i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio [name]=\"'reviewer'\" [checked]=\"controls?.reviewer_completion_criteria?.value == 'ANYONE'\" (checkedEvent)=\"setFormField('reviewer_completion_criteria', 'ANYONE')\">\r\n                    ANY REVIEWER CAN MARK THIS AS REVIEWED <i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n            </div>\r\n        </form-field>\r\n\r\n        <!-- Overseer -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.OVERSEER\"\r\n        [checked]=\"controls?.program_overseer?.value?.length  ||  controls?.program_default_overseer?.value?.length ||controls?.program_default_overseer?.value?.length  ||  controls?.program_default_overseer_group?.value?.length\"\r\n        [active]=\"activeList === 'OVERSEER'\"  [disabled]=\"sideElements?.includes(activeList) && !['OVERSEER','DEFAULT_OVERSEER','DEFAULT_FAILED_OVERSEER'].includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg'\">\r\n            <label class=\"vx-control-panel\" [class.disabled]=\"['DEFAULT_OVERSEER','DEFAULT_FAILED_OVERSEER'].includes(activeList)\">Overseer</label>\r\n            <input-with-pill [disabled]=\"['DEFAULT_OVERSEER','DEFAULT_FAILED_OVERSEER'].includes(activeList)\" [placeholder]=\"'Who should have oversight of the responsibility?'\" (select)=\"activateList('OVERSEER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_overseer?.value?.length || controls?.program_overseer_group?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_overseer?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"overseers.popover()\" placement=\"right\">{{controls?.program_overseer?.value?.length}}</button>\r\n                        </div>\r\n\r\n                            <span *ngIf=\"controls?.program_overseer_group?.value?.length && controls?.program_overseer?.value?.length \" class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\">&</span>\r\n                            <div class=\"chip-inner\" *ngIf=\"controls?.program_overseer_group?.value?.length \">\r\n                                <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                                <button class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">{{controls?.program_overseer_group?.value?.length}}</button>\r\n                            </div>\r\n                    </div>\r\n\r\n                    <button *ngIf=\"activeList!=='OVERSEER'\" (click)=\"activateList('OVERSEER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #overseers [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let overseer of controls?.program_overseer?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\"  (click)=\"remove(overseer,'OVERSEER')\">&#xe90d;</i> {{overseer?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_overseer_group?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(group,'OVERSEER_GROUP')\" class=\"icons\">&#xe90d;</i> {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <ng-container [class.disabled]=\"activeList === 'OVERSEER'\">\r\n            <label class=\"vx-control-panel\"  [class.disabled]=\"['OVERSEER'].includes(activeList)\">DEFAULT Overseer</label>\r\n            <input-with-pill  [disabled]=\"['OVERSEER','DEFAULT_FAILED_OVERSEER'].includes(activeList)\" [placeholder]=\"'Who should have oversight of the responsibility?'\" (select)=\"activateList('DEFAULT_OVERSEER')\">\r\n            <div class=\"selected\" *ngIf=\"controls?.program_default_overseer?.value?.length || controls?.program_default_overseer_group?.value?.length\">\r\n                <div class=\"chip-container\">\r\n                    <div class=\"chip-inner\" *ngIf=\"controls?.program_default_overseer?.value?.length\">\r\n                        <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                        <button class=\"count user\" appPopover (click)=\"overseersDefault.popover()\" placement=\"right\">{{controls?.program_default_overseer?.value?.length}}</button>\r\n                    </div>\r\n\r\n                        <span *ngIf=\"controls?.program_default_overseer_group?.value?.length && controls?.program_default_overseer?.value?.length\" class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_overseer_group?.value?.length \">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button class=\"count\" appPopover (click)=\"overseerDefaultGroup.popover()\" placement=\"right\">{{controls?.program_default_overseer_group?.value?.length}}</button>\r\n                        </div>\r\n                </div>\r\n                <button *ngIf=\"activeList!=='DEFAULT_OVERSEER'\" (click)=\"activateList('DEFAULT_OVERSEER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n            </div>\r\n        </input-with-pill>\r\n        <app-popover #overseersDefault [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n                <ul class=\"action-item\">\r\n                    <li *ngFor=\"let overseer of controls?.program_default_overseer?.value\">\r\n                        <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                                <i class=\"icons\"  (click)=\"remove(overseer,'DEFAULT_OVERSEER')\">&#xe90d;</i> {{overseer?.member_name}}\r\n                            </span>\r\n                        </div>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </app-popover>\r\n        <app-popover #overseerDefaultGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n                <ul class=\"action-item\">\r\n                    <li *ngFor=\"let group of controls?.program_default_overseer_group?.value\">\r\n                        <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                                <i (click)=\"remove(group,'DEFAULT_OVERSEER_GROUP')\" class=\"icons\">&#xe90d;</i> {{group?.group_name}}\r\n                            </span>\r\n                        </div>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </app-popover>\r\n        <label class=\"vx-control-panel\" > </label>\r\n        <input-with-pill class=\"vx-mt-2\" [disabled]=\"['OVERSEER','DEFAULT_OVERSEER'].includes(activeList)\" [placeholder]=\"'Who should be notified if the responsibility is not completed?'\" (select)=\"activateList('DEFAULT_FAILED_OVERSEER')\">\r\n        <div class=\"selected\" *ngIf=\"controls?.program_default_failed_overseer?.value?.length || controls?.program_default_failed_overseer_group?.value?.length\">\r\n            <div class=\"chip-container\">\r\n                <div class=\"chip-inner\" *ngIf=\"controls?.program_default_failed_overseer?.value?.length\">\r\n                    <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                    <button class=\"count user\" appPopover (click)=\"overseersDefaultFail.popover()\" placement=\"right\">{{controls?.program_default_failed_overseer?.value?.length}}</button>\r\n                </div>\r\n\r\n                    <span *ngIf=\"controls?.program_default_failed_overseer_group?.value?.length && controls?.program_default_failed_overseer?.value?.length\" class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\">&</span>\r\n                    <div class=\"chip-inner\" *ngIf=\"controls?.program_default_failed_overseer_group?.value?.length \">\r\n                        <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                        <button class=\"count\" appPopover (click)=\"overseerDefaultFailGroup.popover()\" placement=\"right\">{{controls?.program_default_failed_overseer_group?.value?.length}}</button>\r\n                    </div>\r\n            </div>\r\n            <button *ngIf=\"activeList!=='DEFAULT_FAILED_OVERSEER'\" (click)=\"activateList('DEFAULT_FAILED_OVERSEER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n        </div>\r\n    </input-with-pill>\r\n    <app-popover #overseersDefaultFail [dontCloseonClick]=\"true\">\r\n        <div class=\"action-list\">\r\n            <ul class=\"action-item\">\r\n                <li *ngFor=\"let overseer of controls?.program_default_failed_overseer?.value\">\r\n                    <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                            <i class=\"icons\"  (click)=\"remove(overseer,'DEFAULT_FAILED_OVERSEER')\">&#xe90d;</i> {{overseer?.member_name}}\r\n                        </span>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </app-popover>\r\n    <app-popover #overseerDefaultFailGroup [dontCloseonClick]=\"true\">\r\n        <div class=\"action-list\">\r\n            <ul class=\"action-item\">\r\n                <li *ngFor=\"let group of controls?.program_default_failed_overseer_group?.value\">\r\n                    <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                            <i (click)=\"remove(group,'DEFAULT_FAILED_OVERSEER_GROUP')\" class=\"icons\">&#xe90d;</i> {{group?.group_name}}\r\n                        </span>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </app-popover>\r\n</ng-container>\r\n        </form-field>\r\n\r\n        <!-- Assessment -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.ASSESSMENT\"\r\n        [checked]=\"controls?.program_assessments?.value?.length\"\r\n        [active]=\"activeList === 'ASSESSMENT'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'ASSESSMENT'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg'\">\r\n            <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n            <input-with-pill  [placeholder]=\"'Select assessment for this responsibility'\" (select)=\"activateList('ASSESSMENT')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_assessments?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><i class=\"icons\"\r\n                                    (click)=\"remove(controls?.program_assessments?.value[0],'ASSESSMENT')\">&#xe90d;</i>{{controls?.program_assessments?.value[0]?.assessment_name}}</span>\r\n                            <button *ngIf=\"controls?.program_assessments?.value?.length  > 1\" class=\"count\" appPopover\r\n                                (click)=\"program_assessments.popover()\" placement=\"right\">+{{controls?.program_assessments?.value?.length -1 }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='ASSESSMENT'\" class=\"edit\" type=\"button\" (click)=\"activateList('ASSESSMENT')\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #program_assessments [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let assessment of controls?.program_assessments?.value | slice:1\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i   (click)=\"remove(assessment,'ASSESSMENT')\" class=\"icons\" >&#xe90d;</i> {{assessment?.assessment_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n\r\n        <!-- Format & Evidence -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.FORMATE_EVIDENCE\" [checked]=\"[true,false].includes(controls?.evidence_required?.value)\"\r\n            [active]=\"false\" [disabled]=\"sideElements.includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg'\">\r\n            <div class=\"upload-format\">\r\n\r\n                <span class=\"text\">Do all responsibilities within this program require evidence?</span>\r\n                <div class=\"radio-group program\">\r\n                    <app-cs-radio [name]=\"'evidence_required'\" [checked]=\"controls?.evidence_required?.value\"\r\n                        (checkedEvent)=\"setFormField('evidence_required',true)\">YES</app-cs-radio>\r\n                    <app-cs-radio [name]=\"'evidence_required'\" [checked]=\"!controls?.evidence_required?.value\"\r\n                        (checkedEvent)=\"setFormField('evidence_required',false)\">NO</app-cs-radio>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-d-flex vx-align-center vx-justify-end vx-mt-2\">\r\n                <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-mr-2\">Allow any file to be marked as\r\n                    key\r\n                    evidence</div>\r\n                <switch formControlName=\"allow_any_file_key_evidence\"\r\n                    (change)=\"setFormField('allow_any_file_key_evidence',$event?.target?.checked)\"></switch>\r\n            </div>\r\n        </form-field>\r\n\r\n\r\n        <!-- Custom Field -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.CUSTOM_FIELDS\" [checked]=\"controls?.custom_fields?.value?.length\"\r\n            [active]=\"false\" [disabled]=\"sideElements.includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/custom-fields.svg'\">\r\n            <label class=\"vx-control-panel\">CUSTOM FIELDS</label>\r\n            <custom-field formControlName=\"custom_fields\"></custom-field>\r\n        </form-field>\r\n    </form>\r\n</div>\r\n\r\n\r\n<!-- list of roles -->\r\n<role-list *ngIf=\"activeList === 'ROLE'\" [selected]=\"controls?.program_roles?.value | refDisconnect\" [loading]=\"listLoadingState.ROLES\"\r\n    [list]=\"lists?.ROLES?.data ?? []\" (save)=\"listAction($event,'ROLE')\" (cancel)=\"fieldDeselector('ROLE')\"></role-list>\r\n\r\n<!-- list of frameworks -->\r\n<app-define-framework-listing *ngIf=\"activeList === 'FRAMEWORK'\" (cancel)=\"fieldDeselector('FRAMEWORK')\" (next)=\"listAction($event,'FRAMEWORK')\" [mode]=\"mode\" [selectedFramework]=\"controls?.framework?.value\"></app-define-framework-listing>\r\n<!-- list of responsibility center -->\r\n<app-responsibility-centers-list *ngIf=\"activeList === 'RC'\" [responsibilityCentersList]=\"lists?.RC ?? []\"\r\n    [radioSelection]=\"false\" [rcIdKey]=\"'rc_id'\" (closeRcList)=\"fieldDeselector('RC')\"\r\n    (saveSelectedList)=\"listAction($event,'RC')\" [selectedResponsibilityCenters]=\"controls?.rc?.value | refDisconnect\">\r\n</app-responsibility-centers-list>\r\n<!-- render userlist with group -->\r\n\r\n<user-group-list *ngIf=\"activeList === 'OWNER'\" [groupEnabled]=\"true\" [singleSelect]=\"false\" [loading]=\"listLoadingState.USERS\"\r\n    [nonRemovableUserIds]=\"lists.NON_REMOVABLE_OWNERS  | listToId : 'member_id'\" [userlist]=\"lists?.OWNERS?.data ?? []\"\r\n    [selectedUsers]=\"controls?.program_owners?.value | refDisconnect\"\r\n    (fetchUserData)=\"fetchUsersAssociatedWithRoles(false,$event)\" [userListInfo]=\"lists?.OWNERS\"\r\n    [groupListInfo]=\"lists?.OWNERS_GROUPS\" [groupList]=\"lists?.OWNERS_GROUPS?.data ?? []\"\r\n    [selectedGroups]=\"controls?.program_owners_group?.value | refDisconnect\" (save)=\"listAction($event,'OWNER')\"\r\n    (cancel)=\"fieldDeselector('OWNER')\"></user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'APPROVER'\" [groupEnabled]=\"false\" [singleSelect]=\"true\"\r\n    [userlist]=\"lists?.APPROVERS?.data ?? []\" [selectedUsers]=\"controls?.program_approver?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.APPROVERS\" (save)=\"listAction($event,'APPROVER')\" (cancel)=\"fieldDeselector('APPROVER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'ASSIGNEE'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.ASSIGNEES ?? []\" [selectedUsers]=\"controls?.program_assignee?.value | refDisconnect\"  [groupList]=\"lists?.ASSIGNEES_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_assignee_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.ASSIGNEES\" (save)=\"listAction($event,'ASSIGNEE')\" (cancel)=\"fieldDeselector('ASSIGNEE')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'DEFAULT_ASSIGNEE'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.DEFAULT_ASSIGNEES ?? []\" [selectedUsers]=\"controls?.program_default_assignee?.value | refDisconnect\"  [groupList]=\"lists?.DEFAULT_ASSIGNEES_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_default_assignee_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.DEFAULT_ASSIGNEE\" (save)=\"listAction($event,'DEFAULT_ASSIGNEE')\" (cancel)=\"fieldDeselector('DEFAULT_ASSIGNEE')\">\r\n</user-group-list>\r\n\r\n<user-group-list *ngIf=\"activeList === 'REVIEWER'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.REVIEWERS ?? []\" [selectedUsers]=\"controls?.program_reviewer?.value | refDisconnect\"  [groupList]=\"lists?.REVIEWERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_reviewer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.REVIEWERS\" (save)=\"listAction($event,'REVIEWER')\" (cancel)=\"fieldDeselector('REVIEWER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'DEFAULT_REVIEWER'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.DEFAULT_REVIEWERS ?? []\" [selectedUsers]=\"controls?.program_default_reviewer?.value | refDisconnect\"  [groupList]=\"lists?.DEFAULT_REVIEWERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_default_reviewer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.DEFAULT_REVIEWERS\" (save)=\"listAction($event,'DEFAULT_REVIEWER')\" (cancel)=\"fieldDeselector('DEFAULT_REVIEWER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'OVERSEER'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.OVERSEERS ?? []\" [selectedUsers]=\"controls?.program_overseer?.value | refDisconnect\"  [groupList]=\"lists?.OVERSEERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_overseer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.OVERSEES\" (save)=\"listAction($event,'OVERSEER')\" (cancel)=\"fieldDeselector('OVERSEER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'DEFAULT_OVERSEER'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.DEFAULT_OVERSEERS ?? []\" [selectedUsers]=\"controls?.program_default_overseer?.value | refDisconnect\"  [groupList]=\"lists?.DEFAULT_OVERSEERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_default_overseer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.DEFAULT_OVERSEERS\" (save)=\"listAction($event,'DEFAULT_OVERSEER')\" (cancel)=\"fieldDeselector('DEFAULT_OVERSEER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'DEFAULT_FAILED_OVERSEER'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.DEFAULT_OVERSEERS ?? []\" [selectedUsers]=\"controls?.program_default_failed_overseer?.value | refDisconnect\"  [groupList]=\"lists?.DEFAULT_OVERSEERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_default_failed_overseer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.DEFAULT_OVERSEERS\" (save)=\"listAction($event,'DEFAULT_FAILED_OVERSEER')\" (cancel)=\"fieldDeselector('DEFAULT_FAILED_OVERSEER')\">\r\n</user-group-list>\r\n<assessment-picker *ngIf=\"activeList === 'ASSESSMENT'\" [selectedAssessmentData]=\"selectedAssessment\" (cancelAssessment)=\"fieldDeselector('ASSESSMENT')\" (onAssessmentSelect)=\"listAction($event,'ASSESSMENT')\"></assessment-picker>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n    <app-smiley-dialog-inline\r\n        *ngIf=\"showSmiley\"\r\n        [message]=\"smileyMessage\"\r\n        [actionButtons]=\"actionButtons\"\r\n        (action)=\"action($event)\"\r\n        (closeSmiley)=\"closeSmiley($event)\">\r\n    </app-smiley-dialog-inline>\r\n",
+                    template: "<div class=\"workflow-program\" #form>\r\n    <form novalidate [formGroup]=\"programForm\">\r\n        <!-- Program Category Type -->\r\n        <form-field [checked]=\"controls?.program_type?.value > -1\" [active]=\"false\" [disabled]=\"sideElements.includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/issue-type.svg'\">\r\n            <label class=\"vx-control-panel\">PROGRAM TYPE <span class=\"required\">*</span></label>\r\n            <tab-selector formControlName=\"program_type\" [displayArray]=\"constants?.categoryType\"></tab-selector>\r\n            <!-- <p *ngIf=\"program_name?.invalid\" class=\"error-message\">Add a program type</p> -->\r\n        </form-field>\r\n\r\n        <!-- Program Category Name -->\r\n        <form-field [checked]=\"controls?.program_name?.value?.trim()?.length\" [active]=\"false\" [disabled]=\"sideElements.includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg'\">\r\n            <label class=\"vx-control-panel\">PROGRAM NAME <span class=\"required\">*</span></label>\r\n            <input InputTrim formControlName=\"program_name\" type=\"text\"\r\n                placeholder=\"What is the Program Category\u2019s name?\">\r\n\r\n            <p *ngIf=\"controls?.program_name?.errors && controls?.program_name?.touched\" class=\"error-message\">Enter a\r\n                name for this Program.</p>\r\n            <div class=\"upload-files vx-d-flex vx-align-center vx-flex-wrap vx-mt-1\">\r\n                <file-pill *ngFor=\"let attachment of controls?.description_attachment?.value |slice:0:2\"\r\n                    [extension]=\"attachment?.org_file?.split('.').pop()\" [name]=\"attachment?.org_file\"\r\n                    [disabled]=\"attachment?.uploading\" (delete)=\"deleteAttachment('DESCRIPTION',attachment)\">\r\n                </file-pill>\r\n                <button *ngIf=\"controls?.description_attachment?.value?.length > 2\" class=\"file-count\" appPopover (click)=\"uploadFile.popover()\" placement=\"right\">+{{controls?.description_attachment?.value?.length - 2}}</button>\r\n                <app-popover #uploadFile [dontCloseonClick]=\"true\">\r\n                    <div class=\"action-list\">\r\n                        <ul class=\"action-item\">\r\n                            <li class=\"vx-p-2\" *ngFor=\"let attachment of controls?.description_attachment?.value|slice:2\">\r\n                                <file-pill  [extension]=\"attachment?.org_file?.split('.').pop()\" [name]=\"attachment?.org_file\"\r\n                                [disabled]=\"attachment?.uploading\" (delete)=\"deleteAttachment('DESCRIPTION',attachment)\"></file-pill>\r\n                            </li>\r\n                        </ul>\r\n                    </div>\r\n                </app-popover>\r\n            </div>\r\n            <marx-editor [(ngModel)]=\"editorData.programDescription\" [ngModelOptions]=\"{standalone: true}\"\r\n                (sendSavedFiles)=\"selectFile('DESCRIPTION',$event)\"\r\n                (ngModelChange)=\"setFormField('program_description',$event)\" [editorConfig]=\"constants?.description\">\r\n            </marx-editor>\r\n        </form-field>\r\n\r\n        <!-- Objective -->\r\n        <form-field [checked]=\"controls?.program_objective?.value?.trim()?.length\" [active]=\"activeList === 'OBJECTIVE'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'OBJECTIVE'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg'\">\r\n            <label class=\"vx-control-panel\">OBJECTIVE <span class=\"required\">*</span></label>\r\n            <marx-editor [(ngModel)]=\"editorData.programObjective\" [ngModelOptions]=\"{standalone: true}\"\r\n                (ngModelChange)=\"setFormField('program_objective',$event)\" [editorConfig]=\"constants?.objective\">\r\n            </marx-editor>\r\n            <p *ngIf=\"false\" class=\"error-message\">Specify the objective for this Program.</p>\r\n        </form-field>\r\n\r\n        <!-- Roles -->\r\n        <form-field [checked]=\"controls?.program_roles?.value?.length \" [active]=\"activeList === 'ROLE'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'ROLE'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/roles.svg'\">\r\n            <label class=\"vx-control-panel\">ROLE(S) <span class=\"required\">*</span></label>\r\n            <input-with-pill [placeholder]=\"'Which user roles have access to this program?'\"\r\n                (select)=\"activateList('ROLE')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_roles?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><i *ngIf=\"!lists.SYSTEM_ROLE_IDS.includes(controls?.program_roles?.value[0]?._id)\"\r\n                                    (click)=\"remove(controls?.program_roles?.value[0],'ROLE')\"\r\n                                    class=\"icons\">&#xe90d;</i>{{controls?.program_roles?.value[0]?.roleName}}</span>\r\n                            <button *ngIf=\"controls?.program_roles?.value?.length > 1\" class=\"count\" appPopover\r\n                                (click)=\"role.popover()\" placement=\"right\">\r\n                                +{{controls?.program_roles?.value?.length - 1}}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='ROLE'\" class=\"edit\" type=\"button\" (click)=\"activateList('ROLE')\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <p *ngIf=\"false\" class=\"error-message\">Add a role(s)</p>\r\n            <app-popover #role [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let data of controls?.program_roles?.value | slice:1\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i *ngIf=\"!lists.SYSTEM_ROLE_IDS.includes(data?._id)\" class=\"icons\"\r\n                                        (click)=\"remove(data,'ROLE')\">&#xe90d;</i>\r\n                                    {{data?.roleName}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n        <!-- Owners -->\r\n        <form-field [checked]=\"controls?.program_owners.value?.length > 0 || controls?.program_owners_group.value?.length > 0\" [active]=\"activeList === 'OWNER'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'OWNER'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/owner.svg'\">\r\n            <label class=\"vx-control-panel\">OWNER(S) <span class=\"required\">*</span></label>\r\n            <input-with-pill [placeholder]=\"'Who is responsible for managing this program?'\"\r\n                (select)=\"activateList('OWNER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_owners.value[0]\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"owner.popover()\" placement=\"right\">{{controls?.program_owners?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_owners_group?.value?.length && controls?.program_owners?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_owners_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_owners_group?.value?.length\" class=\"count\" appPopover (click)=\"group.popover()\" placement=\"right\">{{controls?.program_owners_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='OWNER'\" [class.disabled]=\"controls?.all_user_in_role?.value\" (click)=\"activateList('OWNER')\"\r\n                        class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <p *ngIf=\"false\" class=\"error-message\">Add a owner(s)</p>\r\n            <div class=\"vx-d-flex vx-align-center vx-justify-end vx-mt-2\">\r\n                <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-mr-2\">ALL USERS ASSOCIATED WITH THE\r\n                    SELECTED ROLES</div>\r\n                <switch formControlName=\"all_user_in_role\" (change)=\"selectAllRoleOwner($event)\"></switch>\r\n            </div>\r\n            <app-popover #owner [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let owner of controls?.program_owners?.value \">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i *ngIf=\"!['ADMIN','KEY_ADMIN','LOGGED_IN'].includes(owner?.user_role)\"\r\n                                        class=\"icons\" (click)=\"remove(owner,'OWNER')\">&#xe90d;</i>\r\n                                    {{owner?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #group [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let owner of controls?.program_owners_group?.value  \">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i *ngIf=\"!['ADMIN','KEY_ADMIN','LOGGED_IN'].includes(owner?.user_role)\"\r\n                                        class=\"icons\" (click)=\"remove(owner,'OWNER_GROUP')\">&#xe90d;</i>\r\n                                    {{owner?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n        <!-- Approvers -->\r\n        <form-field [checked]=\"controls?.program_approver?.value?.length\" [active]=\"activeList === 'APPROVER'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'APPROVER'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg'\">\r\n            <label class=\"vx-control-panel\">APPROVER</label>\r\n            <input-with-pill [placeholder]=\"'Who is responsible for managing this program?'\"\r\n                (select)=\"activateList('APPROVER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_approver?.value[0]\">\r\n                    <div class=\"chip-container\">\r\n                        <!-- <div class=\"chip-inner\"> -->\r\n                            <span class=\"chip\"><i (click)=\"remove(controls?.program_approver?.value[0],'APPROVER')\"\r\n                                    class=\"icons\">&#xe90d;</i>{{controls?.program_approver?.value[0]?.member_name}}</span>\r\n                        <!-- </div> -->\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='APPROVER'\"(click)=\"activateList('APPROVER')\" class=\"edit\" type=\"button\"><i\r\n                            class=\"icons\">&#xe9ba;</i>Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n        </form-field>\r\n\r\n        <!-- Performance Calculated -->\r\n        <form-field [checked]=\"controls?.performance_calculation?.value\" [active]=\"activeList === 'PERFORMANCE'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'PERFORMANCE'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/performance-calc.svg'\">\r\n            <label class=\"vx-control-panel\">HOW SHOULD THE PERFORMANCE OF THIS CATEGORY BE CALCULATED?</label>\r\n            <tab-selector formControlName=\"performance_calculation\" [displayArray]=\"constants?.performanceCalculation\">\r\n            </tab-selector>\r\n        </form-field>\r\n        <div\r\n            class=\"scope-label vx-fs-10 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1 vx-mb-5 vx-lh-4 vx-d-inline-block\">\r\n            PROGRAM SCOPE <span class=\"vx-fs-12\">*</span></div>\r\n\r\n        <!-- Program Frequency -->\r\n        <form-field [checked]=\"[true,false].includes(controls?.recurring_frequency?.value)\" [active]=\"activeList === 'FREQUENCY'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'FREQUENCY'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/recurring.svg'\">\r\n            <label class=\"vx-control-panel\">PROGRAM FREQUENCY</label>\r\n            <div class=\"upload-format\">\r\n                <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n                    <span class=\"text vx-mb-0\">Is this program recurring?</span>\r\n                    <div class=\"radio-group program\">\r\n                        <app-cs-radio [name]=\"'recurring_frequency'\" [checked]=\"controls?.recurring_frequency?.value\"\r\n                            (checkedEvent)=\"setFormField('recurring_frequency',true)\">YES</app-cs-radio>\r\n                        <app-cs-radio [name]=\"'recurring_frequency'\" [checked]=\"!controls?.recurring_frequency?.value\"\r\n                            (checkedEvent)=\"setFormField('recurring_frequency',false)\">NO</app-cs-radio>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </form-field>\r\n\r\n        <!-- Scope Changes -->\r\n        <form-field [checked]=\"[true,false].includes(controls?.lock_scope_change?.value)\" [active]=\"activeList === 'SCOPE'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'SCOPE'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg'\">\r\n            <label class=\"vx-control-panel\">SCOPE CHANGES</label>\r\n            <div class=\"upload-format\">\r\n                <span class=\"text\">Would you like to <span class=\"vx-label-txt vx-fw-500\">lock changes</span> to the program\r\n                    scope?</span>\r\n                <div class=\"radio-group program\">\r\n                    <app-cs-radio [name]=\"'lock_scope_change'\" [checked]=\"controls?.lock_scope_change?.value\"\r\n                        (checkedEvent)=\"setFormField('lock_scope_change',true)\">YES</app-cs-radio>\r\n                    <app-cs-radio [name]=\"'lock_scope_change'\" [checked]=\"!controls?.lock_scope_change?.value\"\r\n                        (checkedEvent)=\"setFormField('lock_scope_change',false)\">NO</app-cs-radio>\r\n                </div>\r\n            </div>\r\n        </form-field>\r\n\r\n        <!-- Framework -->\r\n        <form-field [checked]=\"false\" [active]=\"activeList === 'FRAMEWORK'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'FRAMEWORK'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg'\">\r\n            <label class=\"vx-control-panel\">FRAMEWORK</label>\r\n            <input-with-pill [placeholder]=\"'Select a framework that this Program Category relates to'\" (select)=\"activateList('FRAMEWORK')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.framework?.value?.framework_name\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><i (click)=\"remove(controls?.framework.value,'FRAMEWORK')\" class=\"icons\">&#xe90d;</i>{{controls?.framework?.value?.framework_name}}</span>\r\n                            <!-- <button class=\"count\" appPopover (click)=\"framework.popover()\" placement=\"right\">+5</button> -->\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='FRAMEWORK'\" (click)=\"activateList('FRAMEWORK')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #framework [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\">&#xe90d;</i>\r\n                                    Manage framework name\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n        <!-- Responsibility Center -->\r\n        <form-field [checked]=\"controls?.rc?.value?.length\" [active]=\"activeList === 'RC'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'RC'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg'\">\r\n            <label class=\"vx-control-panel\">RESPONSIBILITY CENTER</label>\r\n            <input-with-pill (select)=\"activateList('RC')\"\r\n                [placeholder]=\"'Which Responsibility Center(s) can be linked to the responsibilities associated with this Program Category.'\">\r\n                <div class=\"selected\" *ngIf=\"controls?.rc?.value && controls?.rc?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><i class=\"icons\"\r\n                                    (click)=\"remove(controls?.rc?.value[0],'RC')\">&#xe90d;</i>{{controls?.rc?.value[0]?.item_name}}</span>\r\n                            <button *ngIf=\"controls?.rc?.value?.length  > 1\" class=\"count\" appPopover\r\n                                (click)=\"rc.popover()\" placement=\"right\">+{{controls?.rc?.value?.length -1 }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='RC'\" class=\"edit\" type=\"button\" (click)=\"activateList('RC')\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #rc [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let rc  of controls?.rc?.value  |slice:1\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\" (click)=\"remove(rc,'RC')\">&#xe90d;</i>\r\n                                    {{rc?.item_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n        <!-- Assignee -->\r\n        <form-field [checked]=\"controls?.program_assignee?.value?.length  ||  controls?.program_default_assignee?.value?.length ||controls?.program_default_assignee?.value?.length  ||  controls?.program_default_assignee_group?.value?.length\"\r\n        [active]=\"['ASSIGNEE','DEFAULT_ASSIGNEE']?.includes(activeList)\" [disabled]=\"sideElements?.includes(activeList) && !['ASSIGNEE','DEFAULT_ASSIGNEE'].includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg'\">\r\n            <label class=\"vx-control-panel\" [class.disabled]=\"activeList === 'DEFAULT_ASSIGNEE'\">ASSIGNEE(S)</label>\r\n            <input-with-pill [disabled]=\"activeList === 'DEFAULT_ASSIGNEE'\" [placeholder]=\"'Select persons responsible for executing controls within this program'\"\r\n                (select)=\"activateList('ASSIGNEE')\">\r\n                <div class=\"selected\"  *ngIf=\"controls?.program_assignee?.value?.length || controls?.program_assignee_group?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_assignee?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"assignee.popover()\" placement=\"right\">{{controls?.program_assignee?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_assignee_group?.value?.length && controls?.program_assignee?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_assignee_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_assignee_group?.value?.length\" class=\"count\" appPopover (click)=\"assignee_group.popover()\" placement=\"right\">{{controls?.program_assignee_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='ASSIGNEE'\" class=\"edit\" type=\"button\"  (click)=\"activateList('ASSIGNEE')\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #assignee [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let assignee of controls?.program_assignee?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(assignee,'ASSIGNEE')\" class=\"icons\">&#xe90d;</i>\r\n                                   {{assignee?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #assignee_group [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_assignee_group?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i  (click)=\"remove(group,'ASSIGNEE_GROUP')\"  class=\"icons\">&#xe90d;</i>\r\n                                   {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <label class=\"vx-control-panel\" [class.disabled]=\"activeList === 'ASSIGNEE'\">DEFAULT ASSIGNEE(S)</label>\r\n            <input-with-pill [disabled]=\"activeList === 'ASSIGNEE'\" [placeholder]=\"'Select persons responsible for executing controls within this program'\" (select)=\"activateList('DEFAULT_ASSIGNEE')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_default_assignee?.value?.length || controls?.program_default_assignee_group?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_assignee?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"defaultAssignee.popover()\" placement=\"right\">{{controls?.program_default_assignee?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_default_assignee_group?.value?.length && controls?.program_default_assignee?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_assignee_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_default_assignee_group?.value?.length\" class=\"count\" appPopover (click)=\"defaultAssigneeGroup.popover()\" placement=\"right\">{{controls?.program_default_assignee_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='DEFAULT_ASSIGNEE'\" (click)=\"activateList('DEFAULT_ASSIGNEE')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #defaultAssignee [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let assignee of controls?.program_default_assignee?.value \">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i  (click)=\"remove(assignee,'DEFAULT_ASSIGNEE')\" class=\"icons\">&#xe90d;</i>\r\n                                   {{assignee?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #defaultAssigneeGroup [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_default_assignee_group?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(assignee,'DEFAULT_ASSIGNEE_GROUP')\" class=\"icons\">&#xe90d;</i>\r\n                                    {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <div class=\"radio-group-selector\" [class.disabled]=\"activeList === 'ASSIGNEE'\">\r\n                <app-cs-radio [name]=\"'assignee'\" [checked]=\"controls?.assignee_completion_criteria?.value === 'ALL'\" (checkedEvent)=\"setFormField('assignee_completion_criteria', 'ALL')\">\r\n                    ALL SELECTED PERSONS NEED TO COMPLETE THIS <i class=\"icons\"\r\n                        [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\" >&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio [name]=\"'assignee'\" [checked]=\"controls?.assignee_completion_criteria?.value === 'ANYONE'\" (checkedEvent)=\"setFormField('assignee_completion_criteria', 'ANYONE')\">\r\n                    ANY SELECTED PERSON CAN COMPLETE THIS <i class=\"icons\"\r\n                        [appTooltip]=\"'If selected, only one responsibility will be created.'\" placement=\"bottom-right\"\r\n                        delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n            </div>\r\n        </form-field>\r\n\r\n        <!-- Reviewer -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.REVIEWER\"\r\n        [checked]=\"controls?.program_reviewer?.value?.length  ||  controls?.program_default_reviewer?.value?.length ||controls?.program_default_reviewer?.value?.length  ||  controls?.program_default_reviewer_group?.value?.length\"\r\n        [active]=\"['REVIEWER','DEFAULT_REVIEWER']?.includes(activeList)\" [disabled]=\"sideElements?.includes(activeList) && !['REVIEWER','DEFAULT_REVIEWER'].includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg'\">\r\n            <label [class.disabled]=\"activeList === 'DEFAULT_REVIEWER'\" class=\"vx-control-panel\">Reviewer(s)</label>\r\n            <input-with-pill [disabled]=\"activeList === 'DEFAULT_REVIEWER'\" [placeholder]=\"'Select persons responsible for executing controls within this program'\" (select)=\"activateList('REVIEWER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_reviewer?.value?.length || controls?.program_reviewer_group?.value?.length\">\r\n\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_reviewer?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"reviewer.popover()\" placement=\"right\">{{controls?.program_reviewer?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_reviewer_group?.value?.length && controls?.program_reviewer?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_reviewer_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_reviewer_group?.value?.length\" class=\"count\" appPopover (click)=\"reviewerGroup.popover()\" placement=\"right\">{{controls?.program_reviewer_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='REVIEWER'\" (click)=\"activateList('REVIEWER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #reviewer [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let reviewer of controls?.program_reviewer?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(reviewer,'REVIEWER')\" class=\"icons\">&#xe90d;</i>\r\n                                    {{reviewer?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #reviewerGroup [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_reviewer_group?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(group,'REVIEWER_GROUP')\" class=\"icons\">&#xe90d;</i>\r\n                                    {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <label [class.disabled]=\"activeList === 'REVIEWER'\" class=\"vx-control-panel\">DEFAULT Reviewer(S)</label>\r\n            <input-with-pill [disabled]=\"activeList === 'REVIEWER'\" [placeholder]=\"'Select persons responsible for executing controls within this program'\" (select)=\"activateList('DEFAULT_REVIEWER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_default_reviewer?.value?.length || controls?.program_default_reviewer_group?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_reviewer?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"defaultReviewer.popover()\" placement=\"right\">{{controls?.program_default_reviewer?.value?.length}}</button>\r\n                        </div>\r\n                        <span class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"controls?.program_default_reviewer_group?.value?.length && controls?.program_default_reviewer?.value?.length\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_reviewer_group?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button *ngIf=\"controls?.program_default_reviewer_group?.value?.length\" class=\"count\" appPopover (click)=\"assignee_group.popover()\" placement=\"right\">{{controls?.program_default_reviewer_group?.value?.length }}</button>\r\n                        </div>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='DEFAULT_REVIEWER'\" (click)=\"activateList('DEFAULT_REVIEWER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #defaultReviewer [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let reviewer of controls?.program_default_reviewer?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(reviewer,'DEFAULT_REVIEWER')\" class=\"icons\">&#xe90d;</i>\r\n                                   {{reviewer?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #defaultReviewerGroup [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_default_reviewer_group?.value \">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i  (click)=\"remove(group,'DEFAULT_REVIEWER_GROUP')\" class=\"icons\">&#xe90d;</i>\r\n                                   {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <div class=\"radio-group-selector\" [class.disabled]=\"activeList === 'REVIEWER'\">\r\n                <app-cs-radio [name]=\"'reviewer'\" [checked]=\"controls?.reviewer_completion_criteria?.value == 'SEQUENTIAL'\" (checkedEvent)=\"setFormField('reviewer_completion_criteria', 'SEQUENTIAL')\">\r\n                    SEQUENTIAL <i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review one at a time in the sequence defined by you.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n                <app-cs-radio [name]=\"'reviewer'\" [checked]=\"controls?.reviewer_completion_criteria?.value == 'ANYONE'\" (checkedEvent)=\"setFormField('reviewer_completion_criteria', 'ANYONE')\">\r\n                    ANY REVIEWER CAN MARK THIS AS REVIEWED <i class=\"icons\"\r\n                        [appTooltip]=\"'The responsibility will be sent for review to all reviewers at the same time. If anyone of the reviewer reviews the responsibility, it will be considered as reviewed.'\"\r\n                        placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n                </app-cs-radio>\r\n            </div>\r\n        </form-field>\r\n\r\n        <!-- Overseer -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.OVERSEER\"\r\n        [checked]=\"controls?.program_overseer?.value?.length  ||  controls?.program_default_overseer?.value?.length ||controls?.program_default_overseer?.value?.length  ||  controls?.program_default_overseer_group?.value?.length\"\r\n        [active]=\"activeList === 'OVERSEER'\"  [disabled]=\"sideElements?.includes(activeList) && !['OVERSEER','DEFAULT_OVERSEER','DEFAULT_FAILED_OVERSEER'].includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg'\">\r\n            <label class=\"vx-control-panel\" [class.disabled]=\"['DEFAULT_OVERSEER','DEFAULT_FAILED_OVERSEER'].includes(activeList)\">Overseer</label>\r\n            <input-with-pill [disabled]=\"['DEFAULT_OVERSEER','DEFAULT_FAILED_OVERSEER'].includes(activeList)\" [placeholder]=\"'Who should have oversight of the responsibility?'\" (select)=\"activateList('OVERSEER')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_overseer?.value?.length || controls?.program_overseer_group?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_overseer?.value?.length\">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                            <button class=\"count user\" appPopover (click)=\"overseers.popover()\" placement=\"right\">{{controls?.program_overseer?.value?.length}}</button>\r\n                        </div>\r\n\r\n                            <span *ngIf=\"controls?.program_overseer_group?.value?.length && controls?.program_overseer?.value?.length \" class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\">&</span>\r\n                            <div class=\"chip-inner\" *ngIf=\"controls?.program_overseer_group?.value?.length \">\r\n                                <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                                <button class=\"count\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\">{{controls?.program_overseer_group?.value?.length}}</button>\r\n                            </div>\r\n                    </div>\r\n\r\n                    <button *ngIf=\"activeList!=='OVERSEER'\" (click)=\"activateList('OVERSEER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #overseers [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let overseer of controls?.program_overseer?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i class=\"icons\"  (click)=\"remove(overseer,'OVERSEER')\">&#xe90d;</i> {{overseer?.member_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        <li *ngFor=\"let group of controls?.program_overseer_group?.value\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i (click)=\"remove(group,'OVERSEER_GROUP')\" class=\"icons\">&#xe90d;</i> {{group?.group_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </app-popover>\r\n            <ng-container [class.disabled]=\"activeList === 'OVERSEER'\">\r\n            <label class=\"vx-control-panel\"  [class.disabled]=\"['OVERSEER'].includes(activeList)\">DEFAULT Overseer</label>\r\n            <input-with-pill  [disabled]=\"['OVERSEER','DEFAULT_FAILED_OVERSEER'].includes(activeList)\" [placeholder]=\"'Who should have oversight of the responsibility?'\" (select)=\"activateList('DEFAULT_OVERSEER')\">\r\n            <div class=\"selected\" *ngIf=\"controls?.program_default_overseer?.value?.length || controls?.program_default_overseer_group?.value?.length\">\r\n                <div class=\"chip-container\">\r\n                    <div class=\"chip-inner\" *ngIf=\"controls?.program_default_overseer?.value?.length\">\r\n                        <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                        <button class=\"count user\" appPopover (click)=\"overseersDefault.popover()\" placement=\"right\">{{controls?.program_default_overseer?.value?.length}}</button>\r\n                    </div>\r\n\r\n                        <span *ngIf=\"controls?.program_default_overseer_group?.value?.length && controls?.program_default_overseer?.value?.length\" class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\">&</span>\r\n                        <div class=\"chip-inner\" *ngIf=\"controls?.program_default_overseer_group?.value?.length \">\r\n                            <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                            <button class=\"count\" appPopover (click)=\"overseerDefaultGroup.popover()\" placement=\"right\">{{controls?.program_default_overseer_group?.value?.length}}</button>\r\n                        </div>\r\n                </div>\r\n                <button *ngIf=\"activeList!=='DEFAULT_OVERSEER'\" (click)=\"activateList('DEFAULT_OVERSEER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n            </div>\r\n        </input-with-pill>\r\n        <app-popover #overseersDefault [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n                <ul class=\"action-item\">\r\n                    <li *ngFor=\"let overseer of controls?.program_default_overseer?.value\">\r\n                        <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                                <i class=\"icons\"  (click)=\"remove(overseer,'DEFAULT_OVERSEER')\">&#xe90d;</i> {{overseer?.member_name}}\r\n                            </span>\r\n                        </div>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </app-popover>\r\n        <app-popover #overseerDefaultGroup [dontCloseonClick]=\"true\">\r\n            <div class=\"action-list\">\r\n                <ul class=\"action-item\">\r\n                    <li *ngFor=\"let group of controls?.program_default_overseer_group?.value\">\r\n                        <div class=\"avatar-card\">\r\n                            <span class=\"value\">\r\n                                <i (click)=\"remove(group,'DEFAULT_OVERSEER_GROUP')\" class=\"icons\">&#xe90d;</i> {{group?.group_name}}\r\n                            </span>\r\n                        </div>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </app-popover>\r\n        <label class=\"vx-control-panel\" > </label>\r\n        <input-with-pill class=\"vx-mt-2\" [disabled]=\"['OVERSEER','DEFAULT_OVERSEER'].includes(activeList)\" [placeholder]=\"'Who should be notified if the responsibility is not completed?'\" (select)=\"activateList('DEFAULT_FAILED_OVERSEER')\">\r\n        <div class=\"selected\" *ngIf=\"controls?.program_default_failed_overseer?.value?.length || controls?.program_default_failed_overseer_group?.value?.length\">\r\n            <div class=\"chip-container\">\r\n                <div class=\"chip-inner\" *ngIf=\"controls?.program_default_failed_overseer?.value?.length\">\r\n                    <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">USER(S)</span></span>\r\n                    <button class=\"count user\" appPopover (click)=\"overseersDefaultFail.popover()\" placement=\"right\">{{controls?.program_default_failed_overseer?.value?.length}}</button>\r\n                </div>\r\n\r\n                    <span *ngIf=\"controls?.program_default_failed_overseer_group?.value?.length && controls?.program_default_failed_overseer?.value?.length\" class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\">&</span>\r\n                    <div class=\"chip-inner\" *ngIf=\"controls?.program_default_failed_overseer_group?.value?.length \">\r\n                        <span class=\"chip\"><span class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\">GROUP(S)</span></span>\r\n                        <button class=\"count\" appPopover (click)=\"overseerDefaultFailGroup.popover()\" placement=\"right\">{{controls?.program_default_failed_overseer_group?.value?.length}}</button>\r\n                    </div>\r\n            </div>\r\n            <button *ngIf=\"activeList!=='DEFAULT_FAILED_OVERSEER'\" (click)=\"activateList('DEFAULT_FAILED_OVERSEER')\" class=\"edit\" type=\"button\"><i class=\"icons\">&#xe9ba;</i> Edit</button>\r\n        </div>\r\n    </input-with-pill>\r\n    <app-popover #overseersDefaultFail [dontCloseonClick]=\"true\">\r\n        <div class=\"action-list\">\r\n            <ul class=\"action-item\">\r\n                <li *ngFor=\"let overseer of controls?.program_default_failed_overseer?.value\">\r\n                    <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                            <i class=\"icons\"  (click)=\"remove(overseer,'DEFAULT_FAILED_OVERSEER')\">&#xe90d;</i> {{overseer?.member_name}}\r\n                        </span>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </app-popover>\r\n    <app-popover #overseerDefaultFailGroup [dontCloseonClick]=\"true\">\r\n        <div class=\"action-list\">\r\n            <ul class=\"action-item\">\r\n                <li *ngFor=\"let group of controls?.program_default_failed_overseer_group?.value\">\r\n                    <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                            <i (click)=\"remove(group,'DEFAULT_FAILED_OVERSEER_GROUP')\" class=\"icons\">&#xe90d;</i> {{group?.group_name}}\r\n                        </span>\r\n                    </div>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n    </app-popover>\r\n</ng-container>\r\n        </form-field>\r\n\r\n        <!-- Assessment -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.ASSESSMENT\"\r\n        [checked]=\"controls?.program_assessments?.value?.length\"\r\n        [active]=\"activeList === 'ASSESSMENT'\" [disabled]=\"sideElements.includes(activeList) && activeList !== 'ASSESSMENT'\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg'\">\r\n            <label class=\"vx-control-panel\">ASSESSMENTS</label>\r\n            <input-with-pill  [placeholder]=\"'Select assessment for this responsibility'\" (select)=\"activateList('ASSESSMENT')\">\r\n                <div class=\"selected\" *ngIf=\"controls?.program_assessments?.value?.length\">\r\n                    <div class=\"chip-container\">\r\n                        <ng-container *ngIf=\"(controls?.program_assessments?.value | assessmentResolver) as assessments\">\r\n                        <div class=\"chip-inner\">\r\n                            <span class=\"chip\"><i class=\"icons\"\r\n                                    (click)=\"remove(assessments[0],'ASSESSMENT')\">&#xe90d;</i>{{assessments[0]?.assessment_name}} </span>\r\n                            <button *ngIf=\"assessments?.length > 1\" class=\"count\" appPopover\r\n                                (click)=\"program_assessments.popover()\" placement=\"right\">+{{assessments?.length -1 }}</button>\r\n                        </div>\r\n                    </ng-container>\r\n                    </div>\r\n                    <button *ngIf=\"activeList!=='ASSESSMENT'\" class=\"edit\" type=\"button\" (click)=\"activateList('ASSESSMENT')\"><i class=\"icons\">&#xe9ba;</i>\r\n                        Edit</button>\r\n                </div>\r\n            </input-with-pill>\r\n            <app-popover #program_assessments [dontCloseonClick]=\"true\">\r\n                <ng-container *ngIf=\"(controls?.program_assessments?.value | assessmentResolver) as assessments\">\r\n                <div class=\"action-list\">\r\n                    <ul class=\"action-item\">\r\n                        \r\n                        <li *ngFor=\"let assessment of assessments | slice:1\">\r\n                            <div class=\"avatar-card\">\r\n                                <span class=\"value\">\r\n                                    <i   (click)=\"remove(assessment,'ASSESSMENT')\" class=\"icons\" >&#xe90d;</i> {{assessment?.assessment_name}}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n                </ng-container>\r\n            </app-popover>\r\n        </form-field>\r\n\r\n\r\n        <!-- Format & Evidence -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.FORMATE_EVIDENCE\" [checked]=\"[true,false].includes(controls?.evidence_required?.value)\"\r\n            [active]=\"false\" [disabled]=\"sideElements.includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg'\">\r\n            <div class=\"upload-format\">\r\n\r\n                <span class=\"text\">Do all responsibilities within this program require evidence?</span>\r\n                <div class=\"radio-group program\">\r\n                    <app-cs-radio [name]=\"'evidence_required'\" [checked]=\"controls?.evidence_required?.value\"\r\n                        (checkedEvent)=\"setFormField('evidence_required',true)\">YES</app-cs-radio>\r\n                    <app-cs-radio [name]=\"'evidence_required'\" [checked]=\"!controls?.evidence_required?.value\"\r\n                        (checkedEvent)=\"setFormField('evidence_required',false)\">NO</app-cs-radio>\r\n                </div>\r\n            </div>\r\n            <div class=\"vx-d-flex vx-align-center vx-justify-end vx-mt-2\">\r\n                <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-mr-2\">Allow any file to be marked as\r\n                    key\r\n                    evidence</div>\r\n                <switch formControlName=\"allow_any_file_key_evidence\"\r\n                    (change)=\"setFormField('allow_any_file_key_evidence',$event?.target?.checked)\"></switch>\r\n            </div>\r\n        </form-field>\r\n\r\n\r\n        <!-- Custom Field -->\r\n        <form-field [appScrollInView]=\"scrollToBottom\" *ngIf=\"additionalOption?.CUSTOM_FIELDS\" [checked]=\"controls?.custom_fields?.value?.length\"\r\n            [active]=\"false\" [disabled]=\"sideElements.includes(activeList)\"\r\n            [img]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/custom-fields.svg'\">\r\n            <label class=\"vx-control-panel\">CUSTOM FIELDS</label>\r\n            <custom-field formControlName=\"custom_fields\"></custom-field>\r\n        </form-field>\r\n    </form>\r\n</div>\r\n\r\n\r\n<!-- list of roles -->\r\n<role-list *ngIf=\"activeList === 'ROLE'\" [selected]=\"controls?.program_roles?.value | refDisconnect\" [loading]=\"listLoadingState.ROLES\"\r\n    [list]=\"lists?.ROLES?.data ?? []\" (save)=\"listAction($event,'ROLE')\" (cancel)=\"fieldDeselector('ROLE')\"></role-list>\r\n\r\n<!-- list of frameworks -->\r\n<app-define-framework-listing *ngIf=\"activeList === 'FRAMEWORK'\" (cancel)=\"fieldDeselector('FRAMEWORK')\" (next)=\"listAction($event,'FRAMEWORK')\" [mode]=\"mode\" [selectedFramework]=\"controls?.framework?.value\"></app-define-framework-listing>\r\n<!-- list of responsibility center -->\r\n<app-responsibility-centers-list *ngIf=\"activeList === 'RC'\" [responsibilityCentersList]=\"lists?.RC ?? []\"\r\n    [radioSelection]=\"false\" [rcIdKey]=\"'rc_id'\" (closeRcList)=\"fieldDeselector('RC')\"\r\n    (saveSelectedList)=\"listAction($event,'RC')\" [selectedResponsibilityCenters]=\"controls?.rc?.value | refDisconnect\">\r\n</app-responsibility-centers-list>\r\n<!-- render userlist with group -->\r\n\r\n<user-group-list *ngIf=\"activeList === 'OWNER'\" [groupEnabled]=\"true\" [singleSelect]=\"false\" [loading]=\"listLoadingState.USERS\"\r\n    [nonRemovableUserIds]=\"lists.NON_REMOVABLE_OWNERS  | listToId : 'member_id'\" [userlist]=\"lists?.OWNERS?.data ?? []\"\r\n    [selectedUsers]=\"controls?.program_owners?.value | refDisconnect\"\r\n    (fetchUserData)=\"fetchUsersAssociatedWithRoles(false,$event)\" [userListInfo]=\"lists?.OWNERS\"\r\n    [groupListInfo]=\"lists?.OWNERS_GROUPS\" [groupList]=\"lists?.OWNERS_GROUPS?.data ?? []\"\r\n    [selectedGroups]=\"controls?.program_owners_group?.value | refDisconnect\" (save)=\"listAction($event,'OWNER')\"\r\n    (cancel)=\"fieldDeselector('OWNER')\"></user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'APPROVER'\" [groupEnabled]=\"false\" [singleSelect]=\"true\"\r\n    [userlist]=\"lists?.APPROVERS?.data ?? []\" [selectedUsers]=\"controls?.program_approver?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.APPROVERS\" (save)=\"listAction($event,'APPROVER')\" (cancel)=\"fieldDeselector('APPROVER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'ASSIGNEE'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.ASSIGNEES ?? []\" [selectedUsers]=\"controls?.program_assignee?.value | refDisconnect\"  [groupList]=\"lists?.ASSIGNEES_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_assignee_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.ASSIGNEES\" (save)=\"listAction($event,'ASSIGNEE')\" (cancel)=\"fieldDeselector('ASSIGNEE')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'DEFAULT_ASSIGNEE'\" [groupEnabled]=\"true\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.DEFAULT_ASSIGNEES ?? []\" [selectedUsers]=\"controls?.program_default_assignee?.value | refDisconnect\"  [groupList]=\"lists?.DEFAULT_ASSIGNEES_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_default_assignee_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.DEFAULT_ASSIGNEE\" (save)=\"listAction($event,'DEFAULT_ASSIGNEE')\" (cancel)=\"fieldDeselector('DEFAULT_ASSIGNEE')\">\r\n</user-group-list>\r\n\r\n<user-group-list *ngIf=\"activeList === 'REVIEWER'\" [groupEnabled]=\"false\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.REVIEWERS ?? []\" [selectedUsers]=\"controls?.program_reviewer?.value | refDisconnect\"  [groupList]=\"lists?.REVIEWERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_reviewer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.REVIEWERS\" (save)=\"listAction($event,'REVIEWER')\" (cancel)=\"fieldDeselector('REVIEWER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'DEFAULT_REVIEWER'\" [groupEnabled]=\"false\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.DEFAULT_REVIEWERS ?? []\" [selectedUsers]=\"controls?.program_default_reviewer?.value | refDisconnect\"  [groupList]=\"lists?.DEFAULT_REVIEWERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_default_reviewer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.DEFAULT_REVIEWERS\" (save)=\"listAction($event,'DEFAULT_REVIEWER')\" (cancel)=\"fieldDeselector('DEFAULT_REVIEWER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'OVERSEER'\" [groupEnabled]=\"false\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.OVERSEERS ?? []\" [selectedUsers]=\"controls?.program_overseer?.value | refDisconnect\"  [groupList]=\"lists?.OVERSEERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_overseer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.OVERSEES\" (save)=\"listAction($event,'OVERSEER')\" (cancel)=\"fieldDeselector('OVERSEER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'DEFAULT_OVERSEER'\" [groupEnabled]=\"false\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.DEFAULT_OVERSEERS ?? []\" [selectedUsers]=\"controls?.program_default_overseer?.value | refDisconnect\"  [groupList]=\"lists?.DEFAULT_OVERSEERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_default_overseer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.DEFAULT_OVERSEERS\" (save)=\"listAction($event,'DEFAULT_OVERSEER')\" (cancel)=\"fieldDeselector('DEFAULT_OVERSEER')\">\r\n</user-group-list>\r\n<user-group-list *ngIf=\"activeList === 'DEFAULT_FAILED_OVERSEER'\" [groupEnabled]=\"false\" [singleSelect]=\"false\"\r\n    [userlist]=\"lists?.DEFAULT_OVERSEERS ?? []\" [selectedUsers]=\"controls?.program_default_failed_overseer?.value | refDisconnect\"  [groupList]=\"lists?.DEFAULT_OVERSEERS_GROUP ?? []\"\r\n    [selectedGroups]=\"controls?.program_default_failed_overseer_group?.value | refDisconnect\"\r\n    [userListInfo]=\"lists?.DEFAULT_OVERSEERS\" (save)=\"listAction($event,'DEFAULT_FAILED_OVERSEER')\" (cancel)=\"fieldDeselector('DEFAULT_FAILED_OVERSEER')\">\r\n</user-group-list>\r\n<assessment-picker *ngIf=\"activeList === 'ASSESSMENT'\" [selectedAssessment]=\"controls?.program_assessments?.value\" (cancelAssessment)=\"fieldDeselector('ASSESSMENT')\" (onAssessmentSelect)=\"listAction($event,'ASSESSMENT')\"></assessment-picker>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n    <app-smiley-dialog-inline\r\n        *ngIf=\"showSmiley\"\r\n        [message]=\"smileyMessage\"\r\n        [actionButtons]=\"actionButtons\"\r\n        (action)=\"action($event)\"\r\n        (closeSmiley)=\"closeSmiley($event)\">\r\n    </app-smiley-dialog-inline>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");::ng-deep .workflow-program{display:block;position:relative}::ng-deep .workflow-program .scope-label{background:#747576;border-radius:.125rem;position:relative;z-index:1}::ng-deep .workflow-program .scope-label:before{background:#f1f1f1;content:\"\";position:absolute;top:.5rem;left:6.3125rem;width:22.2rem;height:1px;z-index:-1}::ng-deep .workflow-program .scope-label:after{background:#f1f1f1;content:\"\";position:absolute;top:.5rem;left:-2.5rem;width:2.5rem;height:1px;z-index:-1}::ng-deep .workflow-program .scope-label .required{position:absolute;top:0;right:-.625rem}::ng-deep .workflow-program .date-picker .picker-group{width:calc(50% - .125rem);position:relative}::ng-deep .workflow-program .date-picker .picker-group:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .workflow-program .date-picker .picker-group input{height:2.5rem;border-radius:.25rem;border:1px solid #dbdbdb;background:#fff;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;padding:0 2rem 0 .75rem;outline:none}::ng-deep .workflow-program .date-picker .picker-group input:focus,::ng-deep .workflow-program .date-picker .picker-group input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .workflow-program .date-picker .picker-group input::-moz-placeholder{color:#747576;font-size:13px}::ng-deep .workflow-program .date-picker .picker-group input::placeholder{color:#747576;font-size:13px}::ng-deep .workflow-program .date-picker .picker-group input:-ms-input-placeholder{color:#747576;font-size:13px}::ng-deep .workflow-program .date-picker .picker-group input::-ms-input-placeholder{color:#747576;font-size:13px}::ng-deep .workflow-program .date-picker .picker-group i{height:1rem;width:1rem;position:absolute;right:.75rem;top:.625rem;pointer-events:none}::ng-deep .workflow-program .program-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:4px;position:relative;z-index:1}::ng-deep .workflow-program .program-type-field .type-item{position:relative}::ng-deep .workflow-program .program-type-field .type-item:first-of-type{width:6.25rem}::ng-deep .workflow-program .program-type-field .type-item:nth-child(2){width:5.75rem}::ng-deep .workflow-program .program-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(6.4375rem);width:5.75rem}::ng-deep .workflow-program .program-type-field .type-item:nth-child(3){width:8.625rem}::ng-deep .workflow-program .program-type-field .type-item:nth-child(3).active~.background-glider{transform:translate(12.375rem);width:8.625rem}::ng-deep .workflow-program .program-type-field .type-item:last-of-type{width:5.25rem}::ng-deep .workflow-program .program-type-field .type-item:last-of-type.active~.background-glider{transform:translate(21.1875rem);width:5.25rem}::ng-deep .workflow-program .program-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:center}::ng-deep .workflow-program .program-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none}::ng-deep .workflow-program .program-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .workflow-program .program-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .workflow-program .program-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:6.25rem;height:32px;z-index:-1;transition:.25s ease-out}::ng-deep .workflow-program .vx-form-group .upload-files .file-item{background:#f1f1f1;border:1px solid #dbdbdb;border-radius:.25rem;padding-left:.125rem}::ng-deep .workflow-program .vx-form-group .upload-files .file-item .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:8.5rem}::ng-deep .workflow-program .vx-form-group .upload-files .file-item button.delete-btn{background:transparent;border-radius:0;border:none;border-left:1px solid #dbdbdb;height:1.625rem}::ng-deep .workflow-program .vx-form-group .upload-files button.file-count{background:#1e5dd3;border-radius:.125rem;border:none;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0;margin:4px 0 0 4px}::ng-deep .workflow-program .vx-form-group .upload-format .radio-group app-cs-radio{height:1.375rem}::ng-deep .workflow-program .vx-form-group .default-selected{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:.25rem;margin-top:.5rem}::ng-deep .workflow-program .vx-form-group .default-selected .selected{border-radius:0;border:none;background:none}::ng-deep .workflow-program .vx-form-group .default-selected .default-radio{border-top:1px solid #f1f1f1}::ng-deep .workflow-program .vx-form-group .default-selected .default-radio app-cs-radio{margin-top:0!important}::ng-deep .workflow-program .vx-form-group .default-selected .default-radio app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .workflow-program .vx-form-group .default-selected .default-radio app-cs-radio label.radio-item span.radio{position:absolute;top:.5rem;left:.75rem}::ng-deep .workflow-program .vx-form-group .default-selected .default-radio app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;padding:.5rem .5rem .5rem 2.25rem;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .workflow-program .vx-form-group .default-selected .default-radio app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .workflow-program .vx-form-group .default-selected .default-radio app-cs-radio label.radio-item svg{position:absolute;top:.5rem;left:.75rem}::ng-deep .workflow-program .vx-form-group .selected .custom-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.4rem}::ng-deep .workflow-program .vx-form-group .selected button.cross-btn{background:transparent;border-radius:0;border:0;padding:0}::ng-deep .workflow-program .vx-form-group .custom-input{position:relative}::ng-deep .workflow-program .vx-form-group .custom-input input{padding-right:2rem}::ng-deep .workflow-program .vx-form-group .custom-input button.cross-btn{background:transparent;border-radius:0;border:0;position:absolute;top:.875rem;right:.625rem}::ng-deep .workflow-program .vx-form-group button.add-more-btn{background:transparent;border-radius:0;border:none;padding:0}::ng-deep app-popover .action-list ul.action-item .avatar-card .value{text-transform:none!important}::ng-deep app-popover .action-list ul.action-item li file-pill .file-item{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;margin:0!important}::ng-deep app-popover .action-list ul.action-item li file-pill .file-name{width:100%!important;max-width:100%!important}::ng-deep app-popover .action-list ul.action-item li file-pill button.delete-btn{border:none!important;padding-right:0!important}.disabled{opacity:.4;pointer-events:none;filter:grayscale(1)}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:22px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.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}.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}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.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}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.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}.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}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}"]
                 },] }
     ];
@@ -24893,6 +25223,8 @@
             this.expandedRows = [];
             //list of all the available roles
             this.rolesList = [];
+            this.initialSelected = null;
+            this.showConfirmation = false;
             // only used in select all function
             this.allListIds = [];
             //isAllItems
@@ -24920,8 +25252,12 @@
         });
         Object.defineProperty(RoleListComponent.prototype, "selectedRolesVal", {
             set: function (value) {
+                var _a;
                 this.selectedRoles = this.uniqueByProp(__spreadArray(__spreadArray([], __read(this.selectedRoles)), __read(value)), '_id');
                 this.selectedIds = this.selectedRoles.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele._id; });
+                if (!this.initialSelected || !((_a = this.initialSelected) === null || _a === void 0 ? void 0 : _a.length)) {
+                    this.initialSelected = this.selectedIds;
+                }
                 this.setAllSelectedStatus();
             },
             enumerable: false,
@@ -25011,7 +25347,21 @@
             this.setAllSelectedStatus();
         };
         RoleListComponent.prototype.saveList = function () {
-            this.save.emit(this.selectedRoles);
+            var _a, _b, _c;
+            if (((_b = (_a = this.initialSelected) === null || _a === void 0 ? void 0 : _a.sort()) === null || _b === void 0 ? void 0 : _b.toString()) !== ((_c = this.selectedIds.sort()) === null || _c === void 0 ? void 0 : _c.toString())) {
+                this.showConfirmation = true;
+            }
+            else {
+                this.save.emit(this.selectedRoles);
+            }
+        };
+        RoleListComponent.prototype.confirmAction = function (evt) {
+            if (evt === 'YES') {
+                this.save.emit(this.selectedRoles);
+            }
+            else if (evt === 'NO') {
+                this.showConfirmation = false;
+            }
         };
         RoleListComponent.prototype.closeList = function () {
             this.cancel.emit();
@@ -25035,8 +25385,8 @@
     RoleListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'role-list',
-                    template: "<div class=\"roles-list\" [class.animate]=\"animation\">\r\n    <div class=\"roles-list-head\">\r\n        <h3 class=\"roles-list-title\">Select Roles(s)</h3>\r\n    </div>\r\n    \r\n    <div class=\"roles-list-body\">\r\n        <div class=\"search-block\" [class.disabled]=\"!rolesList?.length\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search Roles\" [(ngModel)]=\"searchKey\"/>\r\n        </div>\r\n        <div class=\"vx-mt-4\">\r\n            <role-loader  *ngIf=\"loading\"></role-loader>\r\n        </div>\r\n       \r\n        <ng-container *ngIf=\"!loading\">\r\n            <ng-container *ngIf=\"(rolesList|search:searchKey:'roleName') as roles\">\r\n                <div *ngIf=\"roles?.length  > 0\" class=\"roles-list-mid vx-mt-2\">\r\n                    <div class=\"role-box-select vx-pb-2\">\r\n                        <vui-checkbox [indeterminateEnabled]=\"false\" #check (change)=\"selectAll($event)\"\r\n                            [(ngModel)]=\"allSelected\" [checked]=\"allSelected\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt\">{{!check.checked ? 'Select All' :\r\n                                'Deselect All'}}</div>\r\n                        </vui-checkbox>\r\n                    </div>\r\n    \r\n                    <div class=\"role-box vx-mb-2\" *ngFor=\"let role of roles; let i = index\">\r\n                        <div (click)=\"!expandedRows.includes(role?._id) ? expandOrCollapse('EXPAND',role?._id):  expandOrCollapse('COLLAPSE',role?._id) \"\r\n                            class=\"role-box-heading vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n                            <div class=\"left vx-d-flex vx-align-center vx-lh-4\">\r\n                                <vui-checkbox [disabled]=\"systemRolesIds.includes(role?._id)\"\r\n                                    [checked]=\"selectedIds.includes(role?._id)\" (change)=\"selectItem($event,role)\">\r\n                                </vui-checkbox>\r\n                                <div class=\"name vx-fs-12 vx-label-txt\" [appTooltip]=\"'Role name'\" placement=\"bottom-left\"\r\n                                    delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{role?.roleName}}</div>\r\n                                <span *ngIf=\"role?.roleActions?.length  > 0\"\r\n                                    class=\"count vx-fs-9 vx-fw-600 vx-lh-3 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-ml-2\">{{role?.roleActions?.length}}\r\n                                    PERMISSIONS</span>\r\n                            </div>\r\n                            <div class=\"right vx-d-flex vx-align-center vx-justify-between\">\r\n                                <div *ngIf=\"role?.licenseType === 'power users'\"\r\n                                    class=\"status-label vx-fs-9 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1\"\r\n                                    [class.power-user]=\"true\" [class.all-user]=\"false\"> Power User</div>\r\n                                <div *ngIf=\"role?.licenseType === 'light users'\"\r\n                                    class=\"status-label vx-fs-9 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1\"\r\n                                    [class.power-user]=\"false\" [class.all-user]=\"true\">Light User</div>\r\n                                <button class=\"arrow-btn vx-fs-12 vx-paragraph-txt vx-m-0 vx-p-0 vx-d-flex vx-align-center\">\r\n                                    <i *ngIf=\"!expandedRows.includes(role?._id)\" class=\"icons\">&#xe970;</i>\r\n                                    <i *ngIf=\"expandedRows.includes(role?._id)\" class=\"icons\">&#xe9e8;</i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"role-box-list\" *ngIf=\"expandedRows.includes(role?._id)\">\r\n                            <ul class=\"vx-p-0 vx-m-0\">\r\n                                <li class=\"vx-p-3 vx-lh-4\" *ngFor=\"let permission  of role?.roleActions\">\r\n                                    <div class=\"value vx-fs-12 vx-label-txt\">{{permission}}</div>\r\n                                </li>\r\n                                <!-- <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">View User List</div>\r\n                            </li>\r\n                            <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">Manage Users <span class=\"vx-fs-10 vx-paragraph-txt\">(Create/Edit/Delete/Deactivate)</span></div>\r\n                            </li>\r\n                            <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">Over-ride Log In</div>\r\n                            </li>\r\n                            <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">View Statutory Holidays</div>\r\n                            </li>\r\n                            <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">Manage Statutory Holidays</div>\r\n                            </li> -->\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n               \r\n                    <app-no-data *ngIf=\"roles?.length === 0\"\r\n                        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                        [noDataText]=\"searchKey?.length > 0 ?'No match found.': 'No Roles Found'\"></app-no-data>\r\n          \r\n            </ng-container>\r\n        </ng-container>\r\n     \r\n    </div>\r\n\r\n    <div class=\"roles-list-footer\">\r\n        <vui-floating-bar (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\r\n            <div class=\"counter\" *ngIf=\"selectedRoles?.length\" \r\n            placement=\"left\">{{selectedRoles?.length}}</div>\r\n          <div class=\"name\" *ngIf=\"selectedRoles?.length>1\"> \r\n            <span *ngIf=\"selectedRoles?.length === 1\">Role selected</span>\r\n            <span *ngIf=\"selectedRoles?.length > 1\">Roles selected</span>\r\n          </div>\r\n        </vui-floating-bar>\r\n    </div>\r\n</div>",
-                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");::ng-deep .roles-list{background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .roles-list.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 .roles-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .roles-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .roles-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 124px)}::ng-deep .roles-list-body .search-block{position:relative}::ng-deep .roles-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .roles-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .roles-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .roles-list-mid{width:calc(100% + .75rem);height:calc(100vh - 14rem);overflow:auto;padding-right:.75rem}::ng-deep .roles-list-mid .role-box{border:1px solid #f1f1f1;border-radius:.25rem}::ng-deep .roles-list-mid .role-box-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item{position:relative;padding-left:1.75rem;width:100%}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .checkbox,::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .value{margin:0!important}::ng-deep .roles-list-mid .role-box-heading{cursor:pointer}::ng-deep .roles-list-mid .role-box-heading .left{width:calc(100% - 6.5rem)}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox{height:1rem}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item{position:relative;padding-left:1.75rem;height:1rem}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item .checkbox,::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .roles-list-mid .role-box-heading .left .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 9.25rem)}::ng-deep .roles-list-mid .role-box-heading .left .count{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .roles-list-mid .role-box-heading .right{width:6.5rem}::ng-deep .roles-list-mid .role-box-heading .right .status-label{border-radius:.125rem;height:.75rem}::ng-deep .roles-list-mid .role-box-heading .right .status-label.all-user{background:#7aa6f7}::ng-deep .roles-list-mid .role-box-heading .right .status-label.power-user{background:#fadd8a}::ng-deep .roles-list-mid .role-box-heading .right button.arrow-btn{background:transparent;border:none;border-radius:0}::ng-deep .roles-list-mid .role-box-list ul{list-style-type:none}::ng-deep .roles-list-mid .role-box-list ul li{border-top:1px solid #f1f1f1;padding-left:2.5rem!important;position:relative}::ng-deep .roles-list-mid .role-box-list ul li:before{background:#dbdbdb;border-radius:.125rem;width:.25rem;height:.25rem;content:\"\";position:absolute;top:18px;left:18px}::ng-deep .roles-list-mid .role-box-list ul li .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item{width:100%}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item span.value{width:100%}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item span.value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:5px}.counter,.name{font-weight:500}.name{margin-left:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}.name b{text-transform:lowercase}"]
+                    template: "<div class=\"roles-list\" [class.animate]=\"animation\">\r\n    <div class=\"roles-list-head\">\r\n        <h3 class=\"roles-list-title\">Select Roles(s)</h3>\r\n    </div>\r\n    \r\n    <div class=\"roles-list-body\">\r\n        <div class=\"search-block\" [class.disabled]=\"!rolesList?.length\">\r\n            <i class=\"icons\">&#xe90b;</i>\r\n            <input type=\"text\" placeholder=\"Search Roles\" [(ngModel)]=\"searchKey\"/>\r\n        </div>\r\n        <div class=\"vx-mt-4\">\r\n            <role-loader  *ngIf=\"loading\"></role-loader>\r\n        </div>\r\n       \r\n        <ng-container *ngIf=\"!loading\">\r\n            <ng-container *ngIf=\"(rolesList|search:searchKey:'roleName') as roles\">\r\n                <div *ngIf=\"roles?.length  > 0\" class=\"roles-list-mid vx-mt-2\">\r\n                    <div class=\"role-box-select vx-pb-2\">\r\n                        <vui-checkbox [indeterminateEnabled]=\"false\" #check (change)=\"selectAll($event)\"\r\n                            [(ngModel)]=\"allSelected\" [checked]=\"allSelected\">\r\n                            <div class=\"user-name vx-fs-12 vx-fw-600 vx-label-txt\">{{!check.checked ? 'Select All' :\r\n                                'Deselect All'}}</div>\r\n                        </vui-checkbox>\r\n                    </div>\r\n    \r\n                    <div class=\"role-box vx-mb-2\" *ngFor=\"let role of roles; let i = index\">\r\n                        <div (click)=\"!expandedRows.includes(role?._id) ? expandOrCollapse('EXPAND',role?._id):  expandOrCollapse('COLLAPSE',role?._id) \"\r\n                            class=\"role-box-heading vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n                            <div class=\"left vx-d-flex vx-align-center vx-lh-4\">\r\n                                <vui-checkbox [disabled]=\"systemRolesIds.includes(role?._id)\"\r\n                                    [checked]=\"selectedIds.includes(role?._id)\" (change)=\"selectItem($event,role)\">\r\n                                </vui-checkbox>\r\n                                <div class=\"name vx-fs-12 vx-label-txt\" [appTooltip]=\"'Role name'\" placement=\"bottom-left\"\r\n                                    delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{role?.roleName}}</div>\r\n                                <span *ngIf=\"role?.roleActions?.length  > 0\"\r\n                                    class=\"count vx-fs-9 vx-fw-600 vx-lh-3 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-ml-2\">{{role?.roleActions?.length}}\r\n                                    PERMISSIONS</span>\r\n                            </div>\r\n                            <div class=\"right vx-d-flex vx-align-center vx-justify-between\">\r\n                                <div *ngIf=\"role?.licenseType === 'power users'\"\r\n                                    class=\"status-label vx-fs-9 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1\"\r\n                                    [class.power-user]=\"true\" [class.all-user]=\"false\"> Power User</div>\r\n                                <div *ngIf=\"role?.licenseType === 'light users'\"\r\n                                    class=\"status-label vx-fs-9 vx-fw-500 vx-txt-white vx-tt-uppercase vx-pl-1 vx-pr-1\"\r\n                                    [class.power-user]=\"false\" [class.all-user]=\"true\">Light User</div>\r\n                                <button class=\"arrow-btn vx-fs-12 vx-paragraph-txt vx-m-0 vx-p-0 vx-d-flex vx-align-center\">\r\n                                    <i *ngIf=\"!expandedRows.includes(role?._id)\" class=\"icons\">&#xe970;</i>\r\n                                    <i *ngIf=\"expandedRows.includes(role?._id)\" class=\"icons\">&#xe9e8;</i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"role-box-list\" *ngIf=\"expandedRows.includes(role?._id)\">\r\n                            <ul class=\"vx-p-0 vx-m-0\">\r\n                                <li class=\"vx-p-3 vx-lh-4\" *ngFor=\"let permission  of role?.roleActions\">\r\n                                    <div class=\"value vx-fs-12 vx-label-txt\">{{permission}}</div>\r\n                                </li>\r\n                                <!-- <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">View User List</div>\r\n                            </li>\r\n                            <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">Manage Users <span class=\"vx-fs-10 vx-paragraph-txt\">(Create/Edit/Delete/Deactivate)</span></div>\r\n                            </li>\r\n                            <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">Over-ride Log In</div>\r\n                            </li>\r\n                            <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">View Statutory Holidays</div>\r\n                            </li>\r\n                            <li class=\"vx-p-3 vx-lh-4\">\r\n                                <div class=\"value vx-fs-12 vx-label-txt\">Manage Statutory Holidays</div>\r\n                            </li> -->\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n               \r\n                    <app-no-data *ngIf=\"roles?.length === 0\"\r\n                        [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n                        [noDataText]=\"searchKey?.length > 0 ?'No match found.': 'No Roles Found'\"></app-no-data>\r\n          \r\n            </ng-container>\r\n        </ng-container>\r\n     \r\n    </div>\r\n\r\n    <div class=\"roles-list-confirmation\" *ngIf=\"showConfirmation\">\r\n        <div class=\"confirmation-top\">\r\n            <div class=\"icon-block\"><i class=\"icons\">&#xe930;</i></div>\r\n            <div class=\"text\">If you change the roles, any unsaved changes would be lost.</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)=\"confirmAction('NO')\">NO</button>\r\n                <button class=\"yes-btn\"  (click)=\"confirmAction('YES')\">YES</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"roles-list-footer\"  *ngIf=\"!showConfirmation\">\r\n        <vui-floating-bar (closeEvent)=\"saveList()\" (closeList)=\"closeList()\">\r\n            <div class=\"counter\" *ngIf=\"selectedRoles?.length\" \r\n            placement=\"left\">{{selectedRoles?.length}}</div>\r\n          <div class=\"name\" *ngIf=\"selectedRoles?.length>1\"> \r\n            <span *ngIf=\"selectedRoles?.length === 1\">Role selected</span>\r\n            <span *ngIf=\"selectedRoles?.length > 1\">Roles selected</span>\r\n          </div>\r\n        </vui-floating-bar>\r\n    </div>\r\n</div>",
+                    styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");::ng-deep .roles-list{background:#fff;position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3}::ng-deep .roles-list.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 .roles-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .roles-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .roles-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 124px)}::ng-deep .roles-list-body .search-block{position:relative}::ng-deep .roles-list-body .search-block input{height:44px;line-height:24px;padding:10px 16px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .roles-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .roles-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .roles-list-mid{width:calc(100% + .75rem);height:calc(100vh - 14rem);overflow:auto;padding-right:.75rem}::ng-deep .roles-list-mid .role-box{border:1px solid #f1f1f1;border-radius:.25rem}::ng-deep .roles-list-mid .role-box-select{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item{position:relative;padding-left:1.75rem;width:100%}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .checkbox,::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .roles-list-mid .role-box-select vui-checkbox .checkbox-item .value{margin:0!important}::ng-deep .roles-list-mid .role-box-heading{cursor:pointer}::ng-deep .roles-list-mid .role-box-heading .left{width:calc(100% - 6.5rem)}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox{height:1rem}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item{position:relative;padding-left:1.75rem;height:1rem}::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item .checkbox,::ng-deep .roles-list-mid .role-box-heading .left vui-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .roles-list-mid .role-box-heading .left .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 9.25rem)}::ng-deep .roles-list-mid .role-box-heading .left .count{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .roles-list-mid .role-box-heading .right{width:6.5rem}::ng-deep .roles-list-mid .role-box-heading .right .status-label{border-radius:.125rem;height:.75rem}::ng-deep .roles-list-mid .role-box-heading .right .status-label.all-user{background:#7aa6f7}::ng-deep .roles-list-mid .role-box-heading .right .status-label.power-user{background:#fadd8a}::ng-deep .roles-list-mid .role-box-heading .right button.arrow-btn{background:transparent;border:none;border-radius:0}::ng-deep .roles-list-mid .role-box-list ul{list-style-type:none}::ng-deep .roles-list-mid .role-box-list ul li{border-top:1px solid #f1f1f1;padding-left:2.5rem!important;position:relative}::ng-deep .roles-list-mid .role-box-list ul li:before{background:#dbdbdb;border-radius:.125rem;width:.25rem;height:.25rem;content:\"\";position:absolute;top:18px;left:18px}::ng-deep .roles-list-mid .role-box-list ul li .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item{width:100%}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item span.value{width:100%}::ng-deep .roles-list-mid .role-box-list ul li vui-checkbox .checkbox-item span.value .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .roles-list-confirmation{background:#161b2f;border-radius:.25rem;position:absolute;left:1rem;right:1rem;bottom:1.75rem;z-index:1}::ng-deep .roles-list-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .roles-list-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 .roles-list-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .roles-list-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .roles-list-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 .roles-list-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .roles-list-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .roles-list-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 .roles-list-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .roles-list-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}.counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:5px}.counter,.name{font-weight:500}.name{margin-left:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}.name b{text-transform:lowercase}"]
                 },] }
     ];
     RoleListComponent.ctorParameters = function () { return []; };
@@ -25775,15 +26125,21 @@
             this.onAssessmentSelect = new i0.EventEmitter();
             this.cancelAssessment = new i0.EventEmitter();
             this.selectedAssessmentArr = [];
-            this.selectedAssessments = [];
+            this.selectedAssessmentCategoriesIds = [];
             this.selectedAssessmentIds = [];
+            this.selectedAssessment = [];
             this.dataPerPage = 30;
         }
         Object.defineProperty(AssessmentPickerComponent.prototype, "setSelected", {
             set: function (value) {
+                var _this = this;
                 if (value && (value === null || value === void 0 ? void 0 : value.length)) {
-                    this.selectedAssessments = __spreadArray([], __read(value));
-                    this.selectedAssessmentIds = this.selectedAssessments.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele.id; });
+                    this.selectedAssessmentArr = __spreadArray([], __read(value));
+                    //this.setCategoryAndAssessment();
+                    this.selectedAssessmentArr.forEach(function (ele, index) {
+                        _this.openedCategory.push(ele === null || ele === void 0 ? void 0 : ele.category_id);
+                        //   this.showSubList(index,ele?.category_id);
+                    });
                 }
             },
             enumerable: false,
@@ -25825,17 +26181,28 @@
          *
          */
         AssessmentPickerComponent.prototype.showSubList = function (index, id) {
-            console.log("this.openedCategory ==>", this.openedCategory);
-            if (this.openedCategory.includes(index)) {
-                this.openedCategory = this.openedCategory.filter(function (ele) { return ele !== index; });
+            console.log("this.openedCategorydasasfsa ==>", this.openedCategory, index, id);
+            if (this.openedCategory.includes(id)) {
+                this.openedCategory = this.openedCategory.filter(function (ele) { return ele !== id; });
             }
             else {
-                this.openedCategory.push(index);
-                this.getAssessmentList(index, id);
+                this.openedCategory.push(id);
+                this.getAssessmentList(id);
             }
             console.log("this.openedCategory ==>", this.openedCategory);
             return this.openedCategory;
         };
+        AssessmentPickerComponent.prototype.expandCategory = function (categoryId) {
+            var _a, _b;
+            var index = (_b = (_a = this.assessmentCategory) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.findIndex(function (ele) { return ele.id === categoryId; });
+            if (this.openedCategory.includes(categoryId) && this.assessmentCategory.data[index].assessmentData) {
+                this.openedCategory = this.openedCategory.filter(function (ele) { return ele !== categoryId; });
+            }
+            else {
+                this.openedCategory.push(categoryId);
+                this.getAssessmentList(categoryId);
+            }
+        };
         // TODO: Pagination
         /**
          *
@@ -25880,11 +26247,16 @@
             this.assessmentService.getAssessmentCategory(this.assessmentPayload).subscribe(function (res) {
                 var _a;
                 _this.assessmentCategory = res;
-                if ((_a = _this.selectedAssessmentData) === null || _a === void 0 ? void 0 : _a.length) {
-                    _this.selectedAssessmentData.forEach(function (ele) {
+                if ((_a = _this.selectedAssessmentArr) === null || _a === void 0 ? void 0 : _a.length) {
+                    // this.selectedAssessmentArr =  [... new Set(this.selectedAssessmentArr)]
+                    _this.selectedAssessmentArr.forEach(function (ele) {
                         var index = res.data.findIndex(function (assessment) { return assessment.id === ele.category_id; });
-                        _this.showSubList(index, ele.category_id);
+                        _this.expandCategory(ele.category_id);
                     });
+                    // this.selectedAssessmentArr.forEach((ele:any,index:any) => {
+                    //   this.openedCategory.push(ele?.category_id);
+                    //   this.showSubList(index,ele?.category_id);
+                    // })
                 }
                 _this.isLoader = false;
             });
@@ -25894,13 +26266,30 @@
          *
          * @param id : Assessment category id
          */
-        AssessmentPickerComponent.prototype.getAssessmentList = function (index, id) {
+        AssessmentPickerComponent.prototype.getAssessmentList = function (id) {
             var _this = this;
+            console.log("asss", id);
             var payload = {
                 search_title: "",
             };
             this.assessmentService.getAssessmentList(payload, id).subscribe(function (res) {
-                _this.assessmentCategory.data[index].assessmentData = __spreadArray([], __read(new Set(res)));
+                var _a, _b, _c;
+                var index = (_b = (_a = _this.assessmentCategory) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.findIndex(function (ele) { return ele.id === id; });
+                console.log("indexer", index, _this.assessmentCategory);
+                if (index > -1) {
+                    _this.assessmentCategory.data[index].assessmentData = __spreadArray([], __read(new Set(res)));
+                }
+                console.log("ass");
+                if ((_c = _this.selectedAssessmentArr) === null || _c === void 0 ? void 0 : _c.length) {
+                    _this.setCategoryAndAssessment();
+                    var index_1 = _this.selectedAssessmentArr.findIndex(function (ele) { return ele.category_id === id; });
+                    // if(index !== -1) {
+                    //   this.selectedAssessmentArr[index].assessmentIds  = this.selectedAssessmentArr[index].assessmentIds.map((ele: any) => {
+                    //     ele = res.find((data: any) => data.id === ele);
+                    //     return ele;
+                    //   });
+                    // }
+                }
             });
         };
         /**
@@ -25910,33 +26299,45 @@
          * @param payload
          */
         AssessmentPickerComponent.prototype.selectAssessment = function (evt, payload, category) {
-            var _a;
-            console.log("payload ==>", payload);
-            var index = this.selectedAssessmentArr.findIndex(function (ele) { return ele.category_id === category.id; });
-            if (index > -1) {
-                if ((_a = evt === null || evt === void 0 ? void 0 : evt.target) === null || _a === void 0 ? void 0 : _a.checked) {
-                    this.selectedAssessmentArr[index].assessmentIds.push(payload);
+            var _a, _b;
+            if ((_a = evt === null || evt === void 0 ? void 0 : evt.target) === null || _a === void 0 ? void 0 : _a.checked) {
+                console.log("selected", this.selectedAssessmentArr);
+                var index = this.selectedAssessmentArr.findIndex(function (ele) { return ele.category_id === category.id; });
+                if (index > -1) {
+                    var currentCategoryAssessment = this.selectedAssessmentArr[index].assessmentIds;
+                    currentCategoryAssessment.push(payload);
+                    this.selectedAssessmentArr[index].assessmentIds = this.uniqueByProp(currentCategoryAssessment, 'id');
+                    this.selectedAssessmentArr = lodash.cloneDeep(this.selectedAssessmentArr);
+                    this.setCategoryAndAssessment();
                 }
                 else {
-                    this.selectedAssessmentArr[index].assessmentIds = this.selectedAssessmentArr[index].assessmentIds.filter(function (assessment) { return assessment.id !== payload.id; });
-                    if (this.selectedAssessmentArr[index].assessmentIds.length === 0) {
-                        this.selectedAssessmentArr.splice(index, 1);
-                    }
+                    this.selectedAssessmentArr.push({
+                        category_id: category.id,
+                        assessmentIds: [payload]
+                    });
+                    this.selectedAssessmentArr = lodash.cloneDeep(this.selectedAssessmentArr);
+                    this.setCategoryAndAssessment();
                 }
             }
             else {
-                this.selectedAssessmentArr.push({
-                    category_id: category.id,
-                    assessmentIds: [payload]
-                });
+                var index = this.selectedAssessmentArr.findIndex(function (ele) { return ele.category_id === category.id; });
+                if (index > -1) {
+                    this.selectedAssessmentArr[index].assessmentIds = this.selectedAssessmentArr[index].assessmentIds.filter(function (assessment) { return assessment.id !== payload.id; });
+                    this.selectedAssessmentArr = lodash.cloneDeep(this.selectedAssessmentArr);
+                    this.setCategoryAndAssessment();
+                    if (((_b = this.selectedAssessmentArr[index].assessmentIds) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+                        this.selectedAssessmentArr.splice(index);
+                        this.selectedAssessmentArr = lodash.cloneDeep(this.selectedAssessmentArr);
+                        this.setCategoryAndAssessment();
+                    }
+                }
             }
-            var selectedData = JSON.parse(JSON.stringify(this.selectedAssessmentArr));
-            this.selectedAssessmentData = selectedData.map(function (ele) {
-                ele.assessmentIds = ele.assessmentIds.map(function (assessment) { return assessment.id; });
-                return ele;
-            });
-            console.log(" this.selectedAssessmentArr this.selectedAssessmentArr", this.selectedAssessmentData, selectedData);
-            // evt?.target?.checked === true ? this.manipulateSelectedAssessment('ADD', payload) : this.manipulateSelectedAssessment('DELETE', payload)
+        };
+        AssessmentPickerComponent.prototype.setCategoryAndAssessment = function () {
+            var _a;
+            this.selectedAssessmentCategoriesIds = (_a = this.selectedAssessmentArr.filter(function (cat) { var _a; return ((_a = cat === null || cat === void 0 ? void 0 : cat.assessmentIds) === null || _a === void 0 ? void 0 : _a.length) > 0; })) === null || _a === void 0 ? void 0 : _a.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele.category_id; }).flat();
+            this.selectedAssessmentIds = this.selectedAssessmentArr.map(function (cat) { return cat === null || cat === void 0 ? void 0 : cat.assessmentIds.map(function (ele) { return ele === null || ele === void 0 ? void 0 : ele.id; }); }).flat();
+            this.selectedAssessment = this.selectedAssessmentArr.map(function (cat) { return cat === null || cat === void 0 ? void 0 : cat.assessmentIds.map(function (ele) { return ele; }); }).flat();
         };
         // TODO: Display selected data in bottom floating bar with next enabled button having
         // TODO: Send data in payload of create Responsibility form
@@ -25965,7 +26366,7 @@
     AssessmentPickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'assessment-picker',
-                    template: "<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"></app-preview>\r\n<div class=\"assessment-list\" [class.animate]=\"animation\">\r\n\r\n    <ng-container >\r\n        <div class=\"assessment-list-head\">\r\n            <button class=\"back-btn\">\r\n                <!-- <i class=\"icons\">&#xe91d;</i> -->\r\n            </button>\r\n            <h3 class=\"assessment-list-title\">Select an Assessment</h3>\r\n        </div>\r\n        <div class=\"assessment-list-body\">\r\n            <div class=\"search-block\">\r\n                <i class=\"icons\">&#xe90b;</i>\r\n                <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\" placeholder=\"Search Assessment Category\" />\r\n            </div>\r\n            <pagination\r\n\r\n                [pageCount]=\"assessmentCategory?.totalPage\"\r\n                [total]=\"assessmentCategory?.totalRecords\"\r\n                [start]=\"assessmentCategory?.start_value\"\r\n                [end]=\"assessmentCategory?.end_value\"\r\n                [activeAlphabet]=\"''\"\r\n                (selectedAlphabet)=\"onAlphabetSelected($event)\"\r\n                (selectedPage)=\"onPageSelection($event)\"\r\n            ></pagination>\r\n            <div *ngIf=\"assessmentCategory.data.length === 0 && !isLoader\" class=\"assessment-list-part\">\r\n            <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\r\n            </div>\r\n            <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part\">\r\n                <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\r\n                    <div class=\"assessment-list-heading\">Assessment already selected for this responsibility</div>\r\n                    <div class=\"assessment-list-item\">\r\n                        <div class=\"table-row\">\r\n                            <div class=\"table-column serial disabled\">\r\n                                <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\r\n                            </div>\r\n                            <div class=\"table-column sub-name\">\r\n                                <div class=\"name-inner\">\r\n                                    <div class=\"value\" [appTooltip]=\"selectedAssessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.assessmentDetails?.assessment_name}}</div>\r\n                                    <div class=\"within-part\">\r\n                                        <span class=\"within-box\">Within</span>\r\n                                        <span class=\"value\" [appTooltip]=\"selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')}}</span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"table-column question\">\r\n                                <div class=\"label\">{{selectedAssessment?.assessmentDetails?.questions}} {{selectedAssessment?.assessmentDetails?.questions > 1 ? 'Questions': 'Question'}}</div>\r\n                                <div class=\"buttons\">\r\n                                    <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\"><i class=\"icons\">&#xeae5;</i> Preview</button>\r\n                                    <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"assessment-list-heading\">Select an Assessment for this responsibility</div>\r\n\r\n                <!--\r\n                     Assessment category list\r\n                     active class is used for highlighting opened element\r\n                -->\r\n                <ng-container *ngIf=\"!isLoader\">\r\n                    <div *ngFor=\"let data of assessmentCategory.data; let  i = index;\" class=\"assessment-list-item\" [class.active]=\"openedCategory.includes(i) || data.id === selectedAssessment?.category_id\">\r\n                        <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\" [class.disabled]=\"data?.assessmentcount < 1\">\r\n                            <div class=\"table-column serial\">\r\n                                <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}</div>\r\n                            </div>\r\n                            <div class=\"table-column name\">\r\n                                <div class=\"name-inner\">\r\n                                    <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.category_name}}</div>\r\n                                    <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\r\n                                        <span class=\"within-box\">Within</span>\r\n                                        <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.parent_tree}}</span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"table-column action\">\r\n                                <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled] = \"data?.assessmentcount < 1\" [disabled]=\"data?.assessmentcount < 1\">\r\n                                    <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\">&#xe970;</i>\r\n                                    <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\">&#xe9e8;</i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Assessment list start from here -->\r\n                        <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\r\n                            <ng-container *ngIf=\"data.assessmentData?.length > 0\">\r\n                                <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"(selectedAssessmentData |selectedAssessment: data.id).includes(assessment.id)\">\r\n                                    <div class=\"table-column serial\">\r\n                                        <div [id]=\"'sub-sr-no'+ i+j\" class=\"sr-no\" [appTooltip]=\"'1.1'\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                                            {{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\r\n                                            <!-- <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"assessment?.id === selectedAssessment?.assessment_id && data?.id === selectedAssessment?.category_id\"\r\n                                            (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio> -->\r\n                                            <!-- (change)=\"selectGroup($event,group)\" [disabled]=\"nonRemovableGroupIds?.includes(group?.group_id)\" [checked]=\"selectedGroupIds.includes(group?.group_id)\" -->\r\n\r\n                                            <vui-checkbox [checked]=\"(selectedAssessmentData |selectedAssessment: data.id).includes(assessment.id)\" (change)=\"selectAssessment($event,assessment, data)\"></vui-checkbox>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"table-column sub-name\">\r\n                                        <div class=\"value\" [appTooltip]=\"'Mission and message, communications to external audiences'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assessment?.assessment_name}}</div>\r\n                                    </div>\r\n                                    <div class=\"table-column question\">\r\n                                        <div class=\"label\">{{assessment?.questions}} {{assessment?.questions > 1 ? 'Questions' : 'Question'}}</div>\r\n                                        <div class=\"buttons\">\r\n                                            <button class=\"action-btn\" (click)=\"preview(assessment)\"><i class=\"icons\">&#xeae5;</i> Preview</button>\r\n                                            <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                             <!-- Loader loading isLoader  -->\r\n                            <assessment-sub-loader *ngIf=\"!data.assessmentData?.length\"></assessment-sub-loader>\r\n                            <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Loader loading isLoader  -->\r\n                <assessment-loader *ngIf=\"isLoader\"></assessment-loader>\r\n            </div>\r\n            <!-- No data image  -->\r\n            <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data to Display'\"></app-no-data>\r\n        </div>\r\n        <!--\r\n            bottom floating bar which includes cancel, next button\r\n            closing tab\r\n         -->\r\n\r\n\r\n            <vui-floating-bar  (closeEvent)=\"save()\" (closeList)=\"close()\">\r\n                <div class=\"counter\" *ngIf=\"selectedAssessments?.length\" appPopover (click)=\"assessmentCount.popover()\"\r\n                placement=\"left\">{{selectedAssessments?.length}}</div>\r\n              <div class=\"name\">\r\n                <span *ngIf=\"selectedAssessments?.length === 1\">Assessment selected</span>\r\n                <span *ngIf=\"selectedAssessments?.length > 1\">Assessments selected</span>\r\n              </div>\r\n            <app-popover #assessmentCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedAssessments; let i =index\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                          <i class=\"icons\"\r\n                            (click)=\"selectAssessment({target:{checked:false}},element)\">&#xe90d;</i>\r\n                          {{element?.assessment_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n\r\n            </vui-floating-bar>\r\n\r\n    </ng-container>\r\n</div>\r\n",
+                    template: "<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"></app-preview>\r\n<div class=\"assessment-list\" [class.animate]=\"animation\">\r\n\r\n    <ng-container >\r\n        <div class=\"assessment-list-head\">\r\n            <button class=\"back-btn\">\r\n                <!-- <i class=\"icons\">&#xe91d;</i> -->\r\n            </button>\r\n            <h3 class=\"assessment-list-title\">Select an Assessment</h3>\r\n        </div>\r\n        <div class=\"assessment-list-body\">\r\n            <div class=\"search-block\">\r\n                <i class=\"icons\">&#xe90b;</i>\r\n                <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\" placeholder=\"Search Assessment Category\" />\r\n            </div>\r\n            <pagination\r\n\r\n                [pageCount]=\"assessmentCategory?.totalPage\"\r\n                [total]=\"assessmentCategory?.totalRecords\"\r\n                [start]=\"assessmentCategory?.start_value\"\r\n                [end]=\"assessmentCategory?.end_value\"\r\n                [activeAlphabet]=\"''\"\r\n                (selectedAlphabet)=\"onAlphabetSelected($event)\"\r\n                (selectedPage)=\"onPageSelection($event)\"\r\n            ></pagination>\r\n            <div *ngIf=\"assessmentCategory.data.length === 0 && !isLoader\" class=\"assessment-list-part\">\r\n            <app-no-data  [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\r\n            </div>\r\n            <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part\">\r\n                <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\r\n                    <div class=\"assessment-list-heading\">Assessment already selected for this responsibility</div>\r\n                    <div class=\"assessment-list-item\">\r\n                        <div class=\"table-row\">\r\n                            <div class=\"table-column serial disabled\">\r\n                                <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\r\n                            </div>\r\n                            <div class=\"table-column sub-name\">\r\n                                <div class=\"name-inner\">\r\n                                    <div class=\"value\" [appTooltip]=\"selectedAssessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.assessmentDetails?.assessment_name}}</div>\r\n                                    <div class=\"within-part\">\r\n                                        <span class=\"within-box\">Within</span>\r\n                                        <span class=\"value\" [appTooltip]=\"selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')}}</span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"table-column question\">\r\n                                <div class=\"label\">{{selectedAssessment?.assessmentDetails?.questions}} {{selectedAssessment?.assessmentDetails?.questions > 1 ? 'Questions': 'Question'}}</div>\r\n                                <div class=\"buttons\">\r\n                                    <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\"><i class=\"icons\">&#xeae5;</i> Preview</button>\r\n                                    <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe90c;</i> Edit</button> -->\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"assessment-list-heading\">Select an Assessment for this responsibility</div>\r\n\r\n                <!--\r\n                     Assessment category list\r\n                     active class is used for highlighting opened element\r\n                -->\r\n                <ng-container *ngIf=\"!isLoader\">\r\n                    <div *ngFor=\"let data of assessmentCategory.data; let  i = index;\" class=\"assessment-list-item\" [class.active]=\"openedCategory.includes(data?.id) || data.id === selectedAssessment?.category_id\">\r\n                        <div class=\"table-row main-list\" (click)=\"expandCategory(data?.id)\" [class.disabled]=\"data?.assessmentcount < 1\">\r\n                            <div class=\"table-column serial\">\r\n                                <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}</div>\r\n                            </div>\r\n                            <div class=\"table-column name\">\r\n                                <div class=\"name-inner\">\r\n                                    <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.category_name}}</div>\r\n                                    <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\r\n                                        <span class=\"within-box\">Within</span>\r\n                                        <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.parent_tree}}</span>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"table-column action\">\r\n                                <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled] = \"data?.assessmentcount < 1\" [disabled]=\"data?.assessmentcount < 1\">\r\n                                    <i *ngIf=\"!openedCategory.includes(data?.id)\" class=\"icons\">&#xe970;</i>\r\n                                    <i *ngIf=\"openedCategory.includes(data?.id)\" class=\"icons\">&#xe9e8;</i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Assessment list start from here -->\r\n                        <div *ngIf=\"openedCategory.includes(data?.id)\" class=\"sub-list\">\r\n                            <ng-container *ngIf=\"data.assessmentData?.length > 0\">\r\n                                <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"(selectedAssessmentData |selectedAssessment: data.id).includes(assessment.id)\">\r\n                                    <div class=\"table-column serial\">\r\n                                        <div [id]=\"'sub-sr-no'+ i+j\" class=\"sr-no active\" appTooltip=\"{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n                                            {{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\r\n                                            <!-- <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"assessment?.id === selectedAssessment?.assessment_id && data?.id === selectedAssessment?.category_id\"\r\n                                            (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio> -->\r\n                                            <!-- (change)=\"selectGroup($event,group)\" [disabled]=\"nonRemovableGroupIds?.includes(group?.group_id)\" [checked]=\"selectedGroupIds.includes(group?.group_id)\" -->\r\n\r\n                                            <vui-checkbox [checked]=\"(selectedAssessmentIds).includes(assessment.id)\" (change)=\"selectAssessment($event,assessment, data)\"></vui-checkbox>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"table-column sub-name\">\r\n                                        <div class=\"value\" [appTooltip]=\"'Mission and message, communications to external audiences'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assessment?.assessment_name}}</div>\r\n                                    </div>\r\n                                    <div class=\"table-column question\">\r\n                                        <div class=\"label\">{{assessment?.questions}} {{assessment?.questions > 1 ? 'Questions' : 'Question'}}</div>\r\n                                        <div class=\"buttons\">\r\n                                            <button class=\"action-btn\" (click)=\"preview(assessment)\"><i class=\"icons\">&#xeae5;</i> Preview</button>\r\n                                            <!-- <button class=\"action-btn\"><i class=\"icons\">&#xe9ba;</i> Edit</button> -->\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                             <!-- Loader loading isLoader  -->\r\n                            <assessment-sub-loader *ngIf=\"!data.assessmentData?.length\"></assessment-sub-loader>\r\n                            <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <!-- Loader loading isLoader  -->\r\n                <assessment-loader *ngIf=\"isLoader\"></assessment-loader>\r\n            </div>\r\n            <!-- No data image  -->\r\n            <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data to Display'\"></app-no-data>\r\n        </div>\r\n        <!--\r\n            bottom floating bar which includes cancel, next button\r\n            closing tab\r\n         -->\r\n\r\n\r\n            <vui-floating-bar  (closeEvent)=\"save()\" (closeList)=\"close()\">\r\n                <div class=\"counter\" *ngIf=\"selectedAssessment?.length\" appPopover (click)=\"assessmentCount.popover()\"\r\n                placement=\"left\">{{selectedAssessment?.length}}</div>\r\n              <div class=\"name\">\r\n                <span *ngIf=\"selectedAssessment?.length === 1\">Assessment selected</span>\r\n                <span *ngIf=\"selectedAssessment?.length > 1\">Assessments selected</span>\r\n              </div>\r\n            <app-popover #assessmentCount [dontCloseonClick]=\"true\">\r\n                <div class=\"action-list\">\r\n                  <ul class=\"action-item\">\r\n                    <li *ngFor=\"let element of selectedAssessment; let i =index\">\r\n                      <div class=\"avatar-card\">\r\n                        <span class=\"value\">\r\n                          <!-- <i class=\"icons\"\r\n                            (click)=\"selectAssessment({target:{checked:false}},element)\">&#xe90d;</i> -->\r\n                          {{element?.assessment_name}}\r\n                        </span>\r\n                      </div>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </app-popover>\r\n\r\n            </vui-floating-bar>\r\n\r\n    </ng-container>\r\n</div>\r\n",
                     styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .assessment-list{background:#fff;border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:1}::ng-deep .assessment-list.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 .assessment-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .assessment-list-head button.back-btn{background:transparent;border-radius:0;border:0;color:#161b2f;font-size:16px;padding:0;margin:0 8px 0 0}::ng-deep .assessment-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .assessment-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .assessment-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-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 .assessment-list-body .search-block input::-moz-placeholder{font-weight:400}::ng-deep .assessment-list-body .search-block input:-ms-input-placeholder{font-weight:400}::ng-deep .assessment-list-body .search-block input::placeholder{font-weight:400}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 228px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-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 .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no vui-checkbox{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no vui-checkbox label.checkbox-item{position:unset}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-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 .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-right:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{width:86px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li vui-checkbox{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li vui-checkbox .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.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}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.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}.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}.action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.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;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.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}.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}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}"]
                 },] }
     ];
@@ -26642,6 +27043,33 @@
                 },] }
     ];
+    var AssessmentResolverPipe = /** @class */ (function () {
+        function AssessmentResolverPipe() {
+        }
+        AssessmentResolverPipe.prototype.transform = function (value) {
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            var _a;
+            if (value && (value === null || value === void 0 ? void 0 : value.length)) {
+                value = value.filter(function (ele) { var _a; return (_a = ele === null || ele === void 0 ? void 0 : ele.assessmentIds) === null || _a === void 0 ? void 0 : _a.length; });
+                var val = (_a = value.map((function (category) { return category.assessmentIds.map(function (assessment) { return Object.assign(Object.assign({}, assessment), { category_id: category.category_id }); }); }))) === null || _a === void 0 ? void 0 : _a.flat();
+                return val;
+            }
+            else {
+                return [];
+            }
+        };
+        return AssessmentResolverPipe;
+    }());
+    AssessmentResolverPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'assessmentResolver',
+                    pure: false
+                },] }
+    ];
     // import { AssessmentListModule } from './assessment-list/assessment-list.module';
     // import { AssessmentPreviewModule } from '../../sharedComponents/assessment-preview/assessment-preview.module';
     var CreateProgramUiModule = /** @class */ (function () {
@@ -26678,7 +27106,8 @@
                         CategoryAllSelectPipe,
                         SubCatIndeterPipe,
                         SearchNewPipe,
-                        SelectedAssessmentPipe
+                        SelectedAssessmentPipe,
+                        AssessmentResolverPipe
                     ],
                     imports: [
                         common.CommonModule,
@@ -26710,7 +27139,8 @@
                         AssessmentPickerComponent,
                         Pagination,
                         DefineFrameworkListingComponent,
-                        CustomFieldComponent
+                        CustomFieldComponent,
+                        AssessmentResolverPipe
                         // AssessmentListModule
                     ]
                 },] }
@@ -26811,6 +27241,7 @@
                         AssessmentListLoaderComponent,
                         AssessmentListSubLoaderComponent,
                         UncategorizedFilterPipe,
+                        ProgramListingComponent,
                         WorkflowProgramComponent,
                         RolesListComponent,
                     ],
@@ -26925,202 +27356,204 @@
     exports.ɵdi = AssessmentListLoaderComponent;
     exports.ɵdj = AssessmentListSubLoaderComponent;
     exports.ɵdk = UncategorizedFilterPipe;
-    exports.ɵdl = WorkflowProgramComponent;
-    exports.ɵdm = ProgramsService;
-    exports.ɵdn = RolesListComponent;
-    exports.ɵdo = CreateAssessmentModule;
-    exports.ɵdp = CreateAssessmentContainerComponent;
-    exports.ɵdq = EditorService;
-    exports.ɵdr = DialogService;
-    exports.ɵds = DialogModule;
-    exports.ɵdt = DialogComponent;
-    exports.ɵdu = InsertionDirective;
-    exports.ɵdv = DialogRef;
-    exports.ɵdw = DialogConfig;
-    exports.ɵdx = QuestionTypeComponent;
-    exports.ɵdy = AddPageDetailsComponent;
-    exports.ɵdz = AssessmentSettingsComponent;
+    exports.ɵdl = ProgramListingComponent;
+    exports.ɵdm = WorkflowProgramComponent;
+    exports.ɵdn = ProgramsService;
+    exports.ɵdo = RolesListComponent;
+    exports.ɵdp = CreateAssessmentModule;
+    exports.ɵdq = CreateAssessmentContainerComponent;
+    exports.ɵdr = EditorService;
+    exports.ɵds = DialogService;
+    exports.ɵdt = DialogModule;
+    exports.ɵdu = DialogComponent;
+    exports.ɵdv = InsertionDirective;
+    exports.ɵdw = DialogRef;
+    exports.ɵdx = DialogConfig;
+    exports.ɵdy = QuestionTypeComponent;
+    exports.ɵdz = AddPageDetailsComponent;
     exports.ɵe = Configurations;
-    exports.ɵea = ResultCriteriaService;
-    exports.ɵeb = AddSegmentPopupComponent;
-    exports.ɵec = AddResponseSetPopupComponent;
-    exports.ɵed = EditorWrapperComponent;
-    exports.ɵee = ValidatorService;
-    exports.ɵef = QuickSettingsComponent;
-    exports.ɵeg = SingleLineEditorComponent;
-    exports.ɵeh = ResponseSelectorComponent;
-    exports.ɵei = MoveComponent;
-    exports.ɵej = LogicComponent;
-    exports.ɵek = AddLogicComponent;
-    exports.ɵel = ToolkitComponent;
-    exports.ɵem = ErrorMessagePipe;
-    exports.ɵen = QuestionFilterPipe;
-    exports.ɵeo = QuestionParserPipe;
-    exports.ɵep = FormatterPipe;
-    exports.ɵeq = SettingAnonymousComponent;
-    exports.ɵer = SettingResponseSegmentComponent;
-    exports.ɵes = PageHeaderComponent;
-    exports.ɵet = WelcomeThankyouComponent;
-    exports.ɵeu = CurrentPageQuestionPipe;
-    exports.ɵev = QuestionPageFilterPipe;
-    exports.ɵew = TypeOfPipe;
-    exports.ɵex = TooltipModule;
-    exports.ɵey = ToolTipDirective;
-    exports.ɵez = PopoverModule;
+    exports.ɵea = AssessmentSettingsComponent;
+    exports.ɵeb = ResultCriteriaService;
+    exports.ɵec = AddSegmentPopupComponent;
+    exports.ɵed = AddResponseSetPopupComponent;
+    exports.ɵee = EditorWrapperComponent;
+    exports.ɵef = ValidatorService;
+    exports.ɵeg = QuickSettingsComponent;
+    exports.ɵeh = SingleLineEditorComponent;
+    exports.ɵei = ResponseSelectorComponent;
+    exports.ɵej = MoveComponent;
+    exports.ɵek = LogicComponent;
+    exports.ɵel = AddLogicComponent;
+    exports.ɵem = ToolkitComponent;
+    exports.ɵen = ErrorMessagePipe;
+    exports.ɵeo = QuestionFilterPipe;
+    exports.ɵep = QuestionParserPipe;
+    exports.ɵeq = FormatterPipe;
+    exports.ɵer = SettingAnonymousComponent;
+    exports.ɵes = SettingResponseSegmentComponent;
+    exports.ɵet = PageHeaderComponent;
+    exports.ɵeu = WelcomeThankyouComponent;
+    exports.ɵev = CurrentPageQuestionPipe;
+    exports.ɵew = QuestionPageFilterPipe;
+    exports.ɵex = TypeOfPipe;
+    exports.ɵey = TooltipModule;
+    exports.ɵez = ToolTipDirective;
     exports.ɵf = WorkflowRiskComponent;
-    exports.ɵfa = PopoverComponent;
-    exports.ɵfb = PopoverService;
-    exports.ɵfc = PopoverDirective;
-    exports.ɵfd = PopoverEventDirective;
-    exports.ɵfe = PopoverLongpressDirective;
-    exports.ɵff = FormgroupModule$1;
-    exports.ɵfg = CsCheckboxComponent$1;
-    exports.ɵfh = CsRadioComponent$1;
-    exports.ɵfi = CsSwitchComponent$1;
-    exports.ɵfj = CsRadioGroupComponent$1;
-    exports.ɵfk = CsSelectComponent$2;
-    exports.ɵfl = PascalPipe$1;
-    exports.ɵfm = CsCheckboxIndeterminateComponent$1;
-    exports.ɵfn = NoDataModule$1;
-    exports.ɵfo = NoDataComponent$1;
-    exports.ɵfp = BuildModule;
-    exports.ɵfq = MultipleChoiceComponent;
-    exports.ɵfr = CheckboxComponent$1;
-    exports.ɵfs = ImageChoiceComponent;
-    exports.ɵft = StarRatingComponent;
-    exports.ɵfu = MatrixDropdownComponent;
-    exports.ɵfv = DropdownComponent;
-    exports.ɵfw = MatrixRatingScaleComponent;
-    exports.ɵfx = RankingComponent;
-    exports.ɵfy = SliderComponent;
-    exports.ɵfz = MultipleTextboxComponent;
+    exports.ɵfa = PopoverModule;
+    exports.ɵfb = PopoverComponent;
+    exports.ɵfc = PopoverService;
+    exports.ɵfd = PopoverDirective;
+    exports.ɵfe = PopoverEventDirective;
+    exports.ɵff = PopoverLongpressDirective;
+    exports.ɵfg = FormgroupModule$1;
+    exports.ɵfh = CsCheckboxComponent$1;
+    exports.ɵfi = CsRadioComponent$1;
+    exports.ɵfj = CsSwitchComponent$1;
+    exports.ɵfk = CsRadioGroupComponent$1;
+    exports.ɵfl = CsSelectComponent$2;
+    exports.ɵfm = PascalPipe$1;
+    exports.ɵfn = CsCheckboxIndeterminateComponent$1;
+    exports.ɵfo = NoDataModule$1;
+    exports.ɵfp = NoDataComponent$1;
+    exports.ɵfq = BuildModule;
+    exports.ɵfr = MultipleChoiceComponent;
+    exports.ɵfs = CheckboxComponent$1;
+    exports.ɵft = ImageChoiceComponent;
+    exports.ɵfu = StarRatingComponent;
+    exports.ɵfv = MatrixDropdownComponent;
+    exports.ɵfw = DropdownComponent;
+    exports.ɵfx = MatrixRatingScaleComponent;
+    exports.ɵfy = RankingComponent;
+    exports.ɵfz = SliderComponent;
     exports.ɵg = AddRiskService;
-    exports.ɵga = DateTimeComponent;
-    exports.ɵgb = ChoiceSettingsPanelComponent;
-    exports.ɵgc = WelcomeComponent$1;
-    exports.ɵgd = ThankYouComponent$1;
-    exports.ɵge = WeightageSelectorComponent;
-    exports.ɵgf = FormgroupModule;
-    exports.ɵgg = CsCheckboxComponent;
-    exports.ɵgh = CsRadioComponent;
-    exports.ɵgi = CsSwitchComponent;
-    exports.ɵgj = CsRadioGroupComponent;
-    exports.ɵgk = CsSelectComponent;
-    exports.ɵgl = PascalPipe;
-    exports.ɵgm = SearchMultiSelectPipe;
-    exports.ɵgn = ClickOutsideDirective;
-    exports.ɵgo = CsCheckboxIndeterminateComponent;
-    exports.ɵgp = PreviewModule;
-    exports.ɵgq = PreviewWrapperComponent;
-    exports.ɵgr = PreviewMultipleChoiceComponent;
-    exports.ɵgs = PreviewCheckboxComponent;
-    exports.ɵgt = PreviewImageChoiceComponent;
-    exports.ɵgu = PreviewStarRatingComponent;
-    exports.ɵgv = PreviewSingleTextboxComponent;
-    exports.ɵgw = PreviewCommentBoxComponent;
-    exports.ɵgx = PreviewMatrixDropdownComponent;
-    exports.ɵgy = PreviewDropdownComponent;
-    exports.ɵgz = PreviewMatrixRatingScaleComponent;
+    exports.ɵga = MultipleTextboxComponent;
+    exports.ɵgb = DateTimeComponent;
+    exports.ɵgc = ChoiceSettingsPanelComponent;
+    exports.ɵgd = WelcomeComponent$1;
+    exports.ɵge = ThankYouComponent$1;
+    exports.ɵgf = WeightageSelectorComponent;
+    exports.ɵgg = FormgroupModule;
+    exports.ɵgh = CsCheckboxComponent;
+    exports.ɵgi = CsRadioComponent;
+    exports.ɵgj = CsSwitchComponent;
+    exports.ɵgk = CsRadioGroupComponent;
+    exports.ɵgl = CsSelectComponent;
+    exports.ɵgm = PascalPipe;
+    exports.ɵgn = SearchMultiSelectPipe;
+    exports.ɵgo = ClickOutsideDirective;
+    exports.ɵgp = CsCheckboxIndeterminateComponent;
+    exports.ɵgq = PreviewModule;
+    exports.ɵgr = PreviewWrapperComponent;
+    exports.ɵgs = PreviewMultipleChoiceComponent;
+    exports.ɵgt = PreviewCheckboxComponent;
+    exports.ɵgu = PreviewImageChoiceComponent;
+    exports.ɵgv = PreviewStarRatingComponent;
+    exports.ɵgw = PreviewSingleTextboxComponent;
+    exports.ɵgx = PreviewCommentBoxComponent;
+    exports.ɵgy = PreviewMatrixDropdownComponent;
+    exports.ɵgz = PreviewDropdownComponent;
     exports.ɵh = WorkflowComplianceComponent;
-    exports.ɵha = PreviewRankingComponent;
-    exports.ɵhb = PreviewSliderComponent;
-    exports.ɵhc = PreviewMultipleTextboxComponent;
-    exports.ɵhd = PreviewDateTimeComponent;
-    exports.ɵhe = PreviewFileUploadComponent;
-    exports.ɵhf = WelcomeComponent;
-    exports.ɵhg = ThankYouComponent;
-    exports.ɵhh = SelectModule;
-    exports.ɵhi = CsSelectComponent$1;
-    exports.ɵhj = SelectService;
-    exports.ɵhk = CsOptionComponent;
-    exports.ɵhl = AssessmentPreviewModule;
-    exports.ɵhm = CheckboxQuestionComponent;
-    exports.ɵhn = DateTimeComponent$1;
-    exports.ɵho = DeviceComponent;
-    exports.ɵhp = FileUploadComponent;
-    exports.ɵhq = PreviewComponent;
-    exports.ɵhr = PreviewContainerComponent;
-    exports.ɵhs = QuickSettingsComponent$1;
-    exports.ɵht = RadioQuestionComponent;
-    exports.ɵhu = SelectQuestionComponent;
-    exports.ɵhv = SingleTextboxComponent;
-    exports.ɵhw = PageHeaderComponent$1;
-    exports.ɵhx = WelcomeComponent$2;
-    exports.ɵhy = LogicQuestionsModule;
-    exports.ɵhz = LogicMultipleChoiceComponent;
+    exports.ɵha = PreviewMatrixRatingScaleComponent;
+    exports.ɵhb = PreviewRankingComponent;
+    exports.ɵhc = PreviewSliderComponent;
+    exports.ɵhd = PreviewMultipleTextboxComponent;
+    exports.ɵhe = PreviewDateTimeComponent;
+    exports.ɵhf = PreviewFileUploadComponent;
+    exports.ɵhg = WelcomeComponent;
+    exports.ɵhh = ThankYouComponent;
+    exports.ɵhi = SelectModule;
+    exports.ɵhj = CsSelectComponent$1;
+    exports.ɵhk = SelectService;
+    exports.ɵhl = CsOptionComponent;
+    exports.ɵhm = AssessmentPreviewModule;
+    exports.ɵhn = CheckboxQuestionComponent;
+    exports.ɵho = DateTimeComponent$1;
+    exports.ɵhp = DeviceComponent;
+    exports.ɵhq = FileUploadComponent;
+    exports.ɵhr = PreviewComponent;
+    exports.ɵhs = PreviewContainerComponent;
+    exports.ɵht = QuickSettingsComponent$1;
+    exports.ɵhu = RadioQuestionComponent;
+    exports.ɵhv = SelectQuestionComponent;
+    exports.ɵhw = SingleTextboxComponent;
+    exports.ɵhx = PageHeaderComponent$1;
+    exports.ɵhy = WelcomeComponent$2;
+    exports.ɵhz = LogicQuestionsModule;
     exports.ɵi = ResponsibilityService;
-    exports.ɵia = LogicCheckboxComponent;
-    exports.ɵib = LogicImageChoiceComponent;
-    exports.ɵic = LogicStarRatingComponent;
-    exports.ɵid = LogicSingleTextboxComponent;
-    exports.ɵie = LogicCommentBoxComponent;
-    exports.ɵif = LogicDropdownComponent;
-    exports.ɵig = LogicRankingComponent;
-    exports.ɵih = LogicSliderComponent;
-    exports.ɵii = LogicMultipleTextboxComponent;
-    exports.ɵij = LogicDateTimeComponent;
-    exports.ɵik = EditorLoaderModule;
-    exports.ɵil = EditorLoaderComponent;
-    exports.ɵim = LineLoaderModule;
-    exports.ɵin = LineLoaderComponent;
-    exports.ɵio = VLoaderModule;
-    exports.ɵip = LoaderComponent$1;
-    exports.ɵiq = LoaderInlineComponent;
-    exports.ɵir = SmileyDialogModule;
-    exports.ɵis = SmileyDialogComponent;
-    exports.ɵit = SnackBarModule;
-    exports.ɵiu = SnackBarComponent;
-    exports.ɵiv = SmileyDialogInlineModule;
-    exports.ɵiw = SmileyDialogInlineComponent;
-    exports.ɵix = ClickOutsideModule;
-    exports.ɵiy = ClickOutsideDirective$1;
-    exports.ɵiz = PopoverHoverModule;
+    exports.ɵia = LogicMultipleChoiceComponent;
+    exports.ɵib = LogicCheckboxComponent;
+    exports.ɵic = LogicImageChoiceComponent;
+    exports.ɵid = LogicStarRatingComponent;
+    exports.ɵie = LogicSingleTextboxComponent;
+    exports.ɵif = LogicCommentBoxComponent;
+    exports.ɵig = LogicDropdownComponent;
+    exports.ɵih = LogicRankingComponent;
+    exports.ɵii = LogicSliderComponent;
+    exports.ɵij = LogicMultipleTextboxComponent;
+    exports.ɵik = LogicDateTimeComponent;
+    exports.ɵil = EditorLoaderModule;
+    exports.ɵim = EditorLoaderComponent;
+    exports.ɵin = LineLoaderModule;
+    exports.ɵio = LineLoaderComponent;
+    exports.ɵip = VLoaderModule;
+    exports.ɵiq = LoaderComponent$1;
+    exports.ɵir = LoaderInlineComponent;
+    exports.ɵis = SmileyDialogModule;
+    exports.ɵit = SmileyDialogComponent;
+    exports.ɵiu = SnackBarModule;
+    exports.ɵiv = SnackBarComponent;
+    exports.ɵiw = SmileyDialogInlineModule;
+    exports.ɵix = SmileyDialogInlineComponent;
+    exports.ɵiy = ClickOutsideModule;
+    exports.ɵiz = ClickOutsideDirective$1;
     exports.ɵj = FrequencyService;
-    exports.ɵja = PopoverHoverComponent;
-    exports.ɵjb = PopoverHoverService;
-    exports.ɵjc = PopoverHoverDirective;
-    exports.ɵjd = PaginationModule$1;
-    exports.ɵje = PaginationComponent$1;
-    exports.ɵjf = ActionDialogModule;
-    exports.ɵjg = DeleteComponent;
-    exports.ɵjh = DeactivateComponent;
-    exports.ɵji = ActiveComponent;
-    exports.ɵjj = DuplicateComponent;
-    exports.ɵjk = CreateProgramUiModule;
-    exports.ɵjl = TabSelector;
-    exports.ɵjm = TickMarkComponent;
-    exports.ɵjn = FormFieldComponent;
-    exports.ɵjo = FilePillComponent;
-    exports.ɵjp = InputWithPillComponent;
-    exports.ɵjq = SwitchComponent;
-    exports.ɵjr = InputTrimDirective;
-    exports.ɵjs = RoleListComponent;
-    exports.ɵjt = CheckboxComponent;
-    exports.ɵju = VuiFloatingBarComponent;
-    exports.ɵjv = SearchPipe;
-    exports.ɵjw = UserGroupListComponent;
-    exports.ɵjx = ListToIdPipe;
-    exports.ɵjy = RefDisconnectPipe;
-    exports.ɵjz = AssessmentPickerComponent;
+    exports.ɵja = PopoverHoverModule;
+    exports.ɵjb = PopoverHoverComponent;
+    exports.ɵjc = PopoverHoverService;
+    exports.ɵjd = PopoverHoverDirective;
+    exports.ɵje = PaginationModule$1;
+    exports.ɵjf = PaginationComponent$1;
+    exports.ɵjg = ActionDialogModule;
+    exports.ɵjh = DeleteComponent;
+    exports.ɵji = DeactivateComponent;
+    exports.ɵjj = ActiveComponent;
+    exports.ɵjk = DuplicateComponent;
+    exports.ɵjl = CreateProgramUiModule;
+    exports.ɵjm = TabSelector;
+    exports.ɵjn = TickMarkComponent;
+    exports.ɵjo = FormFieldComponent;
+    exports.ɵjp = FilePillComponent;
+    exports.ɵjq = InputWithPillComponent;
+    exports.ɵjr = SwitchComponent;
+    exports.ɵjs = InputTrimDirective;
+    exports.ɵjt = RoleListComponent;
+    exports.ɵju = CheckboxComponent;
+    exports.ɵjv = VuiFloatingBarComponent;
+    exports.ɵjw = SearchPipe;
+    exports.ɵjx = UserGroupListComponent;
+    exports.ɵjy = ListToIdPipe;
+    exports.ɵjz = RefDisconnectPipe;
     exports.ɵk = WorkflowPolicyComponent;
-    exports.ɵka = AssessmentService;
-    exports.ɵkb = AssessmentLoaderComponent;
-    exports.ɵkc = AssessmentSubLoaderComponent;
-    exports.ɵkd = Pagination;
-    exports.ɵke = DefineFrameworkListingComponent;
-    exports.ɵkf = FrameworkService;
-    exports.ɵkg = CustomFieldComponent;
-    exports.ɵkh = LoaderComponent;
-    exports.ɵki = LoaderFrameworkComponent;
-    exports.ɵkj = PagerPipe;
-    exports.ɵkk = CategoryAllSelectPipe;
-    exports.ɵkl = SubCatIndeterPipe;
-    exports.ɵkm = SearchNewPipe;
-    exports.ɵkn = SelectedAssessmentPipe;
-    exports.ɵko = PaginationModule;
-    exports.ɵkp = PaginationComponent;
-    exports.ɵkq = NoDataModule;
-    exports.ɵkr = NoDataComponent;
+    exports.ɵka = AssessmentPickerComponent;
+    exports.ɵkb = AssessmentService;
+    exports.ɵkc = AssessmentLoaderComponent;
+    exports.ɵkd = AssessmentSubLoaderComponent;
+    exports.ɵke = Pagination;
+    exports.ɵkf = DefineFrameworkListingComponent;
+    exports.ɵkg = FrameworkService;
+    exports.ɵkh = CustomFieldComponent;
+    exports.ɵki = LoaderComponent;
+    exports.ɵkj = LoaderFrameworkComponent;
+    exports.ɵkk = PagerPipe;
+    exports.ɵkl = CategoryAllSelectPipe;
+    exports.ɵkm = SubCatIndeterPipe;
+    exports.ɵkn = SearchNewPipe;
+    exports.ɵko = SelectedAssessmentPipe;
+    exports.ɵkp = AssessmentResolverPipe;
+    exports.ɵkq = PaginationModule;
+    exports.ɵkr = PaginationComponent;
+    exports.ɵks = NoDataModule;
+    exports.ɵkt = NoDataComponent;
     exports.ɵl = PolicyService;
     exports.ɵm = MoreOptionComponent;
     exports.ɵn = OwnerListComponent;