vcomply-workflow-engine 2.6.31 → 2.6.33
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.
- package/bundles/vcomply-workflow-engine.umd.js +71 -39
- package/bundles/vcomply-workflow-engine.umd.js.map +1 -1
- package/esm2015/lib/formgroup/cs-radio/cs-radio.component.js +1 -2
- package/esm2015/lib/workflow-compliance/workflow-compliance.component.js +18 -11
- package/esm2015/lib/workflow-compliance/workflow-compliance.component.ngfactory.js +82 -84
- package/esm2015/lib/workflow-compliance/workflow-compliance.component.ngsummary.json +1 -1
- package/esm2015/lib/workflow-engine-container/workflow-engine-container.component.js +38 -17
- package/esm2015/lib/workflow-engine-container/workflow-engine-container.component.ngfactory.js +19 -16
- package/esm2015/lib/workflow-engine-container/workflow-engine-container.component.ngsummary.json +1 -1
- package/esm2015/lib/workflow-services/programs.service.js +10 -9
- package/esm2015/lib/workflow-services/responsibility.service.js +9 -5
- package/fesm2015/vcomply-workflow-engine.js +71 -39
- package/fesm2015/vcomply-workflow-engine.js.map +1 -1
- package/lib/workflow-compliance/workflow-compliance.component.d.ts +7 -0
- package/lib/workflow-engine-container/workflow-engine-container.component.d.ts +1 -0
- package/package.json +2 -2
- package/vcomply-workflow-engine.metadata.json +1 -1
|
@@ -466,10 +466,11 @@ class WorkflowEngineContainerComponent {
|
|
|
466
466
|
}
|
|
467
467
|
}
|
|
468
468
|
decideViewMoreOption(type) {
|
|
469
|
+
var _a, _b, _c, _d;
|
|
469
470
|
if (type) {
|
|
470
471
|
this.closeOnEsc = false;
|
|
471
472
|
}
|
|
472
|
-
if ((this.currentWorkflow.code === 'CMR' || this.currentWorkflow.code === 'AMR' || this.currentWorkflow.code === 'AAA' || this.currentWorkflow.code === 'IAA')) {
|
|
473
|
+
if ((((_a = this.currentWorkflow) === null || _a === void 0 ? void 0 : _a.code) === 'CMR' || ((_b = this.currentWorkflow) === null || _b === void 0 ? void 0 : _b.code) === 'AMR' || ((_c = this.currentWorkflow) === null || _c === void 0 ? void 0 : _c.code) === 'AAA' || ((_d = this.currentWorkflow) === null || _d === void 0 ? void 0 : _d.code) === 'IAA')) {
|
|
473
474
|
this.showMoreOption = false;
|
|
474
475
|
if (type === true) {
|
|
475
476
|
this.isWorkflowSelectorEnabled = false;
|
|
@@ -533,13 +534,15 @@ class WorkflowEngineContainerComponent {
|
|
|
533
534
|
this.workflowList = false;
|
|
534
535
|
}
|
|
535
536
|
changeWorkflow(evt, selectedWorkflow) {
|
|
536
|
-
|
|
537
|
+
var _a;
|
|
538
|
+
if ((selectedWorkflow === null || selectedWorkflow === void 0 ? void 0 : selectedWorkflow.code) === ((_a = this.currentWorkflow) === null || _a === void 0 ? void 0 : _a.code)) {
|
|
537
539
|
return;
|
|
538
540
|
}
|
|
539
541
|
this.confirmationAlertConfig = { isVisible: true, message: 'If you change the workflow, any unsaved changes would be lost.', action: 'WORKFLOW_CHANGE', data: selectedWorkflow };
|
|
540
542
|
}
|
|
541
543
|
confirmWorkflowChange(evt) {
|
|
542
544
|
var _a, _b, _c, _d, _e;
|
|
545
|
+
console.log("event =====>", evt);
|
|
543
546
|
if (evt.action === 'YES') {
|
|
544
547
|
this.closeOnEsc = true;
|
|
545
548
|
switch (evt.payload.action) {
|
|
@@ -563,10 +566,10 @@ class WorkflowEngineContainerComponent {
|
|
|
563
566
|
break;
|
|
564
567
|
case 'checkpoint':
|
|
565
568
|
this.moreOption.moreOptionsList.CAR.forEach((option) => {
|
|
566
|
-
if (option.code === 'ASSESSMENT' || option.code === 'CHECKPOINTS_NEW') {
|
|
569
|
+
if ((option === null || option === void 0 ? void 0 : option.code) === 'ASSESSMENT' || (option === null || option === void 0 ? void 0 : option.code) === 'CHECKPOINTS_NEW') {
|
|
567
570
|
option.isDisabled = false;
|
|
568
571
|
}
|
|
569
|
-
if (option.code === 'CHECKPOINTS') {
|
|
572
|
+
if ((option === null || option === void 0 ? void 0 : option.code) === 'CHECKPOINTS') {
|
|
570
573
|
option.isDisabled = true;
|
|
571
574
|
}
|
|
572
575
|
});
|
|
@@ -577,13 +580,13 @@ class WorkflowEngineContainerComponent {
|
|
|
577
580
|
break;
|
|
578
581
|
case 'new-checkpoints':
|
|
579
582
|
this.moreOption.moreOptionsList.CAR.forEach((option) => {
|
|
580
|
-
if (option.code === 'ASSESSMENT' && !evt.payload.isDataRemoved) {
|
|
583
|
+
if ((option === null || option === void 0 ? void 0 : option.code) === 'ASSESSMENT' && !evt.payload.isDataRemoved) {
|
|
581
584
|
option.isDisabled = false;
|
|
582
585
|
}
|
|
583
|
-
if (option.code === 'CHECKPOINTS' && !evt.payload.isDataRemoved) {
|
|
586
|
+
if ((option === null || option === void 0 ? void 0 : option.code) === 'CHECKPOINTS' && !evt.payload.isDataRemoved) {
|
|
584
587
|
option.isDisabled = true;
|
|
585
588
|
}
|
|
586
|
-
if (evt.payload.isCheckpointChecked && option.code === 'CHECKPOINTS_NEW') {
|
|
589
|
+
if (evt.payload.isCheckpointChecked && (option === null || option === void 0 ? void 0 : option.code) === 'CHECKPOINTS_NEW') {
|
|
587
590
|
option.checked = false;
|
|
588
591
|
this.compliance.moreOptions.CHECKPOINTS_NEW = false;
|
|
589
592
|
}
|
|
@@ -594,6 +597,12 @@ class WorkflowEngineContainerComponent {
|
|
|
594
597
|
this.compliance.responsibilityForm.assignees.whoCanComplete = 'ALL';
|
|
595
598
|
this.compliance.responsibilityForm.assignees.list = this.compliance.setList(this.compliance.assigneesList, this.compliance.originalAssignee, 'employee_id');
|
|
596
599
|
break;
|
|
600
|
+
case 'sequential':
|
|
601
|
+
this.compliance['responsibilityForm']['reviewers']['sequentialWorkflow'] = true;
|
|
602
|
+
break;
|
|
603
|
+
case 'anyReviewer':
|
|
604
|
+
this.compliance['responsibilityForm']['reviewers']['sequentialWorkflow'] = false;
|
|
605
|
+
break;
|
|
597
606
|
}
|
|
598
607
|
}
|
|
599
608
|
else {
|
|
@@ -604,13 +613,19 @@ class WorkflowEngineContainerComponent {
|
|
|
604
613
|
case 'assigneeTypeChange':
|
|
605
614
|
this.compliance.responsibilityForm.assignees.whoCanComplete = 'ANY_ONE';
|
|
606
615
|
break;
|
|
616
|
+
case 'sequential':
|
|
617
|
+
this.compliance['responsibilityForm']['reviewers']['sequentialWorkflow'] = false;
|
|
618
|
+
break;
|
|
619
|
+
case 'anyReviewer':
|
|
620
|
+
this.compliance['responsibilityForm']['reviewers']['sequentialWorkflow'] = true;
|
|
621
|
+
break;
|
|
607
622
|
}
|
|
608
623
|
}
|
|
609
624
|
this.confirmationAlertConfig = { isVisible: false, message: '', action: '', data: null };
|
|
610
625
|
return evt;
|
|
611
626
|
}
|
|
612
627
|
setWorkflow(workFlowCode, workFlowList) {
|
|
613
|
-
const selectedWorkflow = workFlowList.find((element) => element.code === workFlowCode);
|
|
628
|
+
const selectedWorkflow = workFlowList.find((element) => (element === null || element === void 0 ? void 0 : element.code) === workFlowCode);
|
|
614
629
|
selectedWorkflow ? this.currentWorkflow = selectedWorkflow : this.currentWorkflow = null;
|
|
615
630
|
return selectedWorkflow;
|
|
616
631
|
}
|
|
@@ -624,18 +639,18 @@ class WorkflowEngineContainerComponent {
|
|
|
624
639
|
this.logIssueComponent.addMoreInfo(event);
|
|
625
640
|
break;
|
|
626
641
|
case 'CAR':
|
|
627
|
-
if (event.code === "CHECKPOINTS") {
|
|
642
|
+
if ((event === null || event === void 0 ? void 0 : event.code) === "CHECKPOINTS") {
|
|
628
643
|
this.onRemovingCheckpoint('checkpoint');
|
|
629
644
|
break;
|
|
630
645
|
}
|
|
631
|
-
if (event.code === 'CHECKPOINTS_NEW') {
|
|
632
|
-
const index = this.moreOption.moreOptionsList.CAR.findIndex((ele) => ele.code === 'ASSESSMENT');
|
|
646
|
+
if ((event === null || event === void 0 ? void 0 : event.code) === 'CHECKPOINTS_NEW') {
|
|
647
|
+
const index = this.moreOption.moreOptionsList.CAR.findIndex((ele) => (ele === null || ele === void 0 ? void 0 : ele.code) === 'ASSESSMENT');
|
|
633
648
|
this.moreOption.moreOptionsList.CAR[index].isDisabled = event.checked ? true : false;
|
|
634
649
|
if (event.checkpoint_new && this.checkpointCount) {
|
|
635
650
|
this.onRemovingCheckpoint('new-checkpoints', true);
|
|
636
651
|
}
|
|
637
652
|
else {
|
|
638
|
-
const CHECKPOINT_INDEX = this.moreOption.moreOptionsList.CAR.findIndex((ele) => ele.code === 'CHECKPOINTS_NEW');
|
|
653
|
+
const CHECKPOINT_INDEX = this.moreOption.moreOptionsList.CAR.findIndex((ele) => (ele === null || ele === void 0 ? void 0 : ele.code) === 'CHECKPOINTS_NEW');
|
|
639
654
|
this.compliance.moreOptions.CHECKPOINTS_NEW = event.checked;
|
|
640
655
|
if (event.checkpoint_new) {
|
|
641
656
|
const isChecked = event.checked ? false : true;
|
|
@@ -645,8 +660,8 @@ class WorkflowEngineContainerComponent {
|
|
|
645
660
|
this.moreOption.moreOptionsList.CAR[index].isDisabled = event.checked;
|
|
646
661
|
}
|
|
647
662
|
}
|
|
648
|
-
if (event.code === 'ASSESSMENT') {
|
|
649
|
-
const index = this.moreOption.moreOptionsList.CAR.findIndex((ele) => ele.code === 'CHECKPOINTS_NEW');
|
|
663
|
+
if ((event === null || event === void 0 ? void 0 : event.code) === 'ASSESSMENT') {
|
|
664
|
+
const index = this.moreOption.moreOptionsList.CAR.findIndex((ele) => (ele === null || ele === void 0 ? void 0 : ele.code) === 'CHECKPOINTS_NEW');
|
|
650
665
|
this.moreOption.moreOptionsList.CAR[index].isDisabled = event.checked;
|
|
651
666
|
}
|
|
652
667
|
this.compliance.addMoreInfo(event);
|
|
@@ -726,7 +741,7 @@ class WorkflowEngineContainerComponent {
|
|
|
726
741
|
}
|
|
727
742
|
isAssessmentDisabled(isDisabled) {
|
|
728
743
|
this.moreOption.moreOptionsList.CAR.forEach((option) => {
|
|
729
|
-
if (option.code === 'ASSESSMENT' || option.code === 'CHECKPOINTS_NEW') {
|
|
744
|
+
if ((option === null || option === void 0 ? void 0 : option.code) === 'ASSESSMENT' || (option === null || option === void 0 ? void 0 : option.code) === 'CHECKPOINTS_NEW') {
|
|
730
745
|
option.isDisabled = true;
|
|
731
746
|
}
|
|
732
747
|
});
|
|
@@ -752,11 +767,17 @@ class WorkflowEngineContainerComponent {
|
|
|
752
767
|
assigneeTypeChange() {
|
|
753
768
|
this.confirmationAlertConfig = { isVisible: true, message: 'This action will reset the changes and assign the responsibility back to the original assignee.', action: 'assigneeTypeChange', data: {}, isRedAlert: true };
|
|
754
769
|
}
|
|
770
|
+
// event => 'sequential' || 'anyReviewer'
|
|
771
|
+
onReviewerChange(event) {
|
|
772
|
+
const commonText = 'Once confirmed, the new review workflow will be applicable for all current and future review due dates.';
|
|
773
|
+
const msg = commonText + (event === 'anyReviewer' ? ` If any reviewer had completed the review, the current review due date will be closed and the review status will be updated to 'Completed'.` : '');
|
|
774
|
+
this.confirmationAlertConfig = { isVisible: true, message: msg, action: event, };
|
|
775
|
+
}
|
|
755
776
|
}
|
|
756
777
|
WorkflowEngineContainerComponent.decorators = [
|
|
757
778
|
{ type: Component, args: [{
|
|
758
779
|
selector: 'app-vcomply-workflow-engine-container',
|
|
759
|
-
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 || importAnAssessment?.showSmiley\">\r\n <i class=\"icons\"></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)\" [isProgramSelected]=\"selectedProgram\">\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 || selectedProgram\">\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\"></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\"></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 [closeOnEsc]=\"closeOnEsc\" (assigneeTypeChange)=\"assigneeTypeChange()\"\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'\" [programType]=\"programType\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\" (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [programId]=\"id\" (onRemovingRole)=\"onRemovingRole($event)\"></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\r\n <!-- This has ternary operation to handle the both scenarios of how it works with compliance and program module, please don't change this. -->\r\n <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\"\r\n *ngSwitchCase=\"'CAR'\">{{entrustButtonName !== '' && mode !== 'EDIT' ? entrustButtonName : (mode === 'EDIT' ?'UPDATE': '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'\">{{mode === 'EDIT' ? 'Update' : '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",
|
|
780
|
+
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 || importAnAssessment?.showSmiley\">\r\n <i class=\"icons\"></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)\" [isProgramSelected]=\"selectedProgram\">\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 || selectedProgram\">\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\"></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\"></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 [closeOnEsc]=\"closeOnEsc\" (assigneeTypeChange)=\"assigneeTypeChange($event)\"\r\n (onReviewerTypeChange)=\"onReviewerChange($event)\"\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'\" [programType]=\"programType\" (pickerChanged)=\"decideViewMoreOption($event)\" (disconnectRefresh)=\"isHostRefreshActive = $event\" (showConfirmationAlert)=\"showConfirmationPopup($event)\" (closeWorkflow)=\"closeWorkflowEngine($event)\" (pickerChanged)=\"decideViewMoreOption($event)\" (populateOption)=\"populateMoreOption($event)\" (refreshForm)=\"onResetForm()\" [mode]=\"mode\" [programId]=\"id\" (onRemovingRole)=\"onRemovingRole($event)\"></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\r\n <!-- This has ternary operation to handle the both scenarios of how it works with compliance and program module, please don't change this. -->\r\n <button class=\"submit\" [class.disabled]=\"!isWorkflowSelectorEnabled\" (click)=\"submit()\"\r\n *ngSwitchCase=\"'CAR'\">{{entrustButtonName !== '' && mode !== 'EDIT' ? entrustButtonName : (mode === 'EDIT' ?'UPDATE': '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'\">{{mode === 'EDIT' ? 'Update' : '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 id=\"confirmation-dialogue\" (action)=\"confirmWorkflowChange($event)\" *ngIf=\"confirmationAlertConfig?.isVisible\"\r\n [message]=\"confirmationAlertConfig?.message\" [config]=\"confirmationAlertConfig\"></app-confirmation-alert>\r\n </div>\r\n</div>\r\n",
|
|
760
781
|
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:#161b2fcc;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 .chip-container .chip-inner i.cross{cursor:pointer}::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;position:static}::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:12px}::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}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}"]
|
|
761
782
|
},] }
|
|
762
783
|
];
|
|
@@ -1722,8 +1743,9 @@ class ResponsibilityService {
|
|
|
1722
1743
|
}
|
|
1723
1744
|
}
|
|
1724
1745
|
getResponsibilityCenterList(params) {
|
|
1746
|
+
var _a;
|
|
1725
1747
|
const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
|
|
1726
|
-
return this.http.get(this.env.complianceGet + 'responsibilityCenterTree', {
|
|
1748
|
+
return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.complianceGet) + 'responsibilityCenterTree', {
|
|
1727
1749
|
params, headers
|
|
1728
1750
|
}).pipe(retry(2));
|
|
1729
1751
|
}
|
|
@@ -1746,23 +1768,26 @@ class ResponsibilityService {
|
|
|
1746
1768
|
}).pipe(retry(2));
|
|
1747
1769
|
}
|
|
1748
1770
|
getAssignorsList(params) {
|
|
1771
|
+
var _a;
|
|
1749
1772
|
const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
|
|
1750
|
-
return this.http.get(this.env.organizationGet + 'organizationUsers&isOnBehalf=1', {
|
|
1773
|
+
return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.organizationGet) + 'organizationUsers&isOnBehalf=1', {
|
|
1751
1774
|
params, headers
|
|
1752
1775
|
}).pipe(retry(2));
|
|
1753
1776
|
}
|
|
1754
1777
|
getCategoriesList() {
|
|
1778
|
+
var _a;
|
|
1755
1779
|
const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
|
|
1756
|
-
return this.http.get(this.env.complianceGet + 'complianceCategory/CategoryListTree', {
|
|
1780
|
+
return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.complianceGet) + 'complianceCategory/CategoryListTree', {
|
|
1757
1781
|
headers,
|
|
1758
1782
|
}).pipe(retry(2));
|
|
1759
1783
|
}
|
|
1760
1784
|
getProgramsList(params, ids) {
|
|
1785
|
+
var _a;
|
|
1761
1786
|
let headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken());
|
|
1762
1787
|
const programId = { programId: ids };
|
|
1763
1788
|
if (ids === null || ids === void 0 ? void 0 : ids.length) {
|
|
1764
1789
|
headers = headers.append('payload-object', JSON.stringify(programId));
|
|
1765
|
-
return this.http.post(this.env.compliancePost + 'complianceCategory/programList', programId, { params, headers }).pipe(retry(2));
|
|
1790
|
+
return this.http.post(((_a = this.env) === null || _a === void 0 ? void 0 : _a.compliancePost) + 'complianceCategory/programList', programId, { params, headers }).pipe(retry(2));
|
|
1766
1791
|
}
|
|
1767
1792
|
return this.http.get(this.env.complianceGet + 'complianceCategory/programList', {
|
|
1768
1793
|
params, headers
|
|
@@ -2388,18 +2413,18 @@ class ProgramsService {
|
|
|
2388
2413
|
return this.http.get(this.env.organizationGet + 'groupsList&status=1&type=compliance&bypass-businessCycle=true', { headers }).pipe(retry$1(2));
|
|
2389
2414
|
}
|
|
2390
2415
|
getBusinessCycle() {
|
|
2391
|
-
var _a, _b;
|
|
2392
|
-
const businessCycle = JSON.parse((_a = localStorage.getItem("businessCycle")) !== null && _a !== void 0 ? _a : '');
|
|
2416
|
+
var _a, _b, _c, _d, _e, _f;
|
|
2417
|
+
const businessCycle = JSON.parse((_a = localStorage.getItem("businessCycle")) !== null && _a !== void 0 ? _a : '{}');
|
|
2393
2418
|
return {
|
|
2394
2419
|
selected_cycle: businessCycle
|
|
2395
|
-
? businessCycle.selectedCycle.start_date +
|
|
2420
|
+
? ((_b = businessCycle === null || businessCycle === void 0 ? void 0 : businessCycle.selectedCycle) === null || _b === void 0 ? void 0 : _b.start_date) +
|
|
2396
2421
|
"-" +
|
|
2397
|
-
businessCycle.selectedCycle.end_date
|
|
2422
|
+
((_c = businessCycle === null || businessCycle === void 0 ? void 0 : businessCycle.selectedCycle) === null || _c === void 0 ? void 0 : _c.end_date)
|
|
2398
2423
|
: "",
|
|
2399
|
-
start_date: businessCycle ? businessCycle.selectedCycle.start_date : "",
|
|
2400
|
-
end_date: businessCycle ? businessCycle.selectedCycle.end_date : "",
|
|
2424
|
+
start_date: businessCycle ? (_d = businessCycle === null || businessCycle === void 0 ? void 0 : businessCycle.selectedCycle) === null || _d === void 0 ? void 0 : _d.start_date : "",
|
|
2425
|
+
end_date: businessCycle ? (_e = businessCycle === null || businessCycle === void 0 ? void 0 : businessCycle.selectedCycle) === null || _e === void 0 ? void 0 : _e.end_date : "",
|
|
2401
2426
|
selected_cycle_arr: businessCycle
|
|
2402
|
-
? (
|
|
2427
|
+
? (_f = businessCycle === null || businessCycle === void 0 ? void 0 : businessCycle.selectedCycle) === null || _f === void 0 ? void 0 : _f.selected_cycle_arr
|
|
2403
2428
|
: [],
|
|
2404
2429
|
};
|
|
2405
2430
|
}
|
|
@@ -2489,8 +2514,9 @@ class ProgramsService {
|
|
|
2489
2514
|
* @returns
|
|
2490
2515
|
*/
|
|
2491
2516
|
getProgram(id) {
|
|
2517
|
+
var _a;
|
|
2492
2518
|
const headers = new HttpHeaders().set('token', this.authService.getAuthorizationToken()).set('x-business-cycle', JSON.stringify((this.getBusinessCycle())));
|
|
2493
|
-
return this.http.get(this.env.programEndpoint + '/' + id + '?isBusinessCycle=true&bypass-businessCycle=true', { headers });
|
|
2519
|
+
return this.http.get(((_a = this.env) === null || _a === void 0 ? void 0 : _a.programEndpoint) + '/' + id + '?isBusinessCycle=true&bypass-businessCycle=true', { headers });
|
|
2494
2520
|
}
|
|
2495
2521
|
/**
|
|
2496
2522
|
*
|
|
@@ -2552,6 +2578,7 @@ class WorkflowComplianceComponent {
|
|
|
2552
2578
|
this.onRemovingCheckpoint = new EventEmitter();
|
|
2553
2579
|
this.isAssessmentDisabled = new EventEmitter();
|
|
2554
2580
|
this.assigneeTypeChange = new EventEmitter(); // it will emit when assignee type change
|
|
2581
|
+
this.onReviewerTypeChange = new EventEmitter(); // it will emit when reviewer type change
|
|
2555
2582
|
this.scrollToBottom = false;
|
|
2556
2583
|
this.description = {
|
|
2557
2584
|
mode: 'prime',
|
|
@@ -2580,6 +2607,7 @@ class WorkflowComplianceComponent {
|
|
|
2580
2607
|
this.categoriesListLoaded = false;
|
|
2581
2608
|
this.groupsListLoaded = false;
|
|
2582
2609
|
this.assuranceCategoryListLoaded = false;
|
|
2610
|
+
this.hasReviewer = false;
|
|
2583
2611
|
// usersList: any[] = [];
|
|
2584
2612
|
this.assignorsList = [];
|
|
2585
2613
|
this.assigneesList = [];
|
|
@@ -2840,11 +2868,12 @@ class WorkflowComplianceComponent {
|
|
|
2840
2868
|
}
|
|
2841
2869
|
}
|
|
2842
2870
|
getRCList(program_id) {
|
|
2871
|
+
var _a;
|
|
2843
2872
|
let params = new HttpParams();
|
|
2844
2873
|
if (program_id) {
|
|
2845
2874
|
params = params.append('program_ids', program_id);
|
|
2846
2875
|
}
|
|
2847
|
-
this.responsibilityService.getResponsibilityCenterList(params).subscribe(res => {
|
|
2876
|
+
(_a = this.responsibilityService) === null || _a === void 0 ? void 0 : _a.getResponsibilityCenterList(params).subscribe(res => {
|
|
2848
2877
|
this.responsibilityCentersList = res;
|
|
2849
2878
|
this.rcListLoaded = true;
|
|
2850
2879
|
const ids = this.returnIds(this.responsibilityForm.rc, 'item_id');
|
|
@@ -2934,13 +2963,6 @@ class WorkflowComplianceComponent {
|
|
|
2934
2963
|
});
|
|
2935
2964
|
}
|
|
2936
2965
|
filterListsAccordingToProgram(program_id) {
|
|
2937
|
-
// this.responsibilityForm.rc = [];
|
|
2938
|
-
// this.responsibilityForm.assignees.list = [];
|
|
2939
|
-
// this.responsibilityForm.reviewers.list = [];
|
|
2940
|
-
// this.responsibilityForm.overseers.list = [];
|
|
2941
|
-
// this.responsibilityForm.overseers.notifyList = [];
|
|
2942
|
-
// this.responsibilityForm.assessment = { assessment_id: "", category_id: "" }
|
|
2943
|
-
// this.groupsList = [];
|
|
2944
2966
|
this.unSubscribeProgram.next();
|
|
2945
2967
|
this.unSubscribeProgram.complete();
|
|
2946
2968
|
if (program_id) {
|
|
@@ -3198,6 +3220,7 @@ class WorkflowComplianceComponent {
|
|
|
3198
3220
|
const 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;
|
|
3199
3221
|
const 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] : [];
|
|
3200
3222
|
const reviewerDetails = Object.keys(res === null || res === void 0 ? void 0 : res.reviewer_arr);
|
|
3223
|
+
this.hasReviewer = reviewerDetails.length > 0;
|
|
3201
3224
|
this.assigneeRadioSelect = (((_d = res === null || res === void 0 ? void 0 : res.assigned_to_member_id) === null || _d === void 0 ? void 0 : _d.length) == 0) ? true : false;
|
|
3202
3225
|
this.isEntrust = res.isGroupAssignTo ? true : false;
|
|
3203
3226
|
let linkage = res === null || res === void 0 ? void 0 : res.linkedProgramDetails;
|
|
@@ -4879,7 +4902,6 @@ class WorkflowComplianceComponent {
|
|
|
4879
4902
|
return unique;
|
|
4880
4903
|
}
|
|
4881
4904
|
openAssigneeChangeConfirmation(event) {
|
|
4882
|
-
console.log("event ===>", event);
|
|
4883
4905
|
if (event) {
|
|
4884
4906
|
this.responsibilityForm.assignees.whoCanComplete = "ANY_ONE";
|
|
4885
4907
|
}
|
|
@@ -4888,11 +4910,21 @@ class WorkflowComplianceComponent {
|
|
|
4888
4910
|
this.assigneeTypeChange.emit(true);
|
|
4889
4911
|
}
|
|
4890
4912
|
}
|
|
4913
|
+
/**
|
|
4914
|
+
* If the mode is EDIT, emit the event.
|
|
4915
|
+
* @param {any} event - any - the event that is triggered when the user selects a radio button
|
|
4916
|
+
*/
|
|
4917
|
+
onReviewerWorkflowChange(event) {
|
|
4918
|
+
this.responsibilityForm.reviewers.sequentialWorkflow = event === 'sequential' ? true : false;
|
|
4919
|
+
if (this.mode === 'EDIT' && this.hasReviewer) {
|
|
4920
|
+
this.onReviewerTypeChange.emit(event);
|
|
4921
|
+
}
|
|
4922
|
+
}
|
|
4891
4923
|
}
|
|
4892
4924
|
WorkflowComplianceComponent.decorators = [
|
|
4893
4925
|
{ type: Component, args: [{
|
|
4894
4926
|
selector: 'app-workflow-compliance',
|
|
4895
|
-
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\"\r\n [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 = [];\">\r\n </app-cs-switch>\r\n </label>\r\n <div class=\"select\"\r\n *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\r\n [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n </div>\r\n <div class=\"selected\"\r\n *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)\"></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\"\r\n (click)=\"activateSelector('assignors',true)\"><i class=\"icons\"></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 *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)\"></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'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n 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\"\r\n [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'\"\r\n (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n </label>\r\n <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\r\n [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n <i class=\"icons\"></i>\r\n </span>\r\n <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\" type=\"text\"\r\n [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\r\n (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName',true)\"\r\n (focusout)=\"activeDeselector()\" (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\"></i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for\r\n 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\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\"\r\n [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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('assignees',true)\"><i class=\"icons\"></i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the person\r\n responsible for completing this responsibility.</p>\r\n <ng-container *ngIf=\"!isGroupAssigned\">\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED\r\n PERSONS NEED TO\r\n COMPLETE THIS<i class=\"icons\"\r\n [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\"></i>\r\n </app-cs-radio>\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED\r\n 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\"></i>\r\n </app-cs-radio>\r\n\r\n <div class=\"switch-row align-right\" *ngIf=\"mode == 'EDIT'\">\r\n <app-cs-switch\r\n (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"> ANY SELECTED\r\n PERSON CAN COMPLETE\r\n THIS\r\n </app-cs-switch>\r\n </div>\r\n </ng-container>\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)\"></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'\"\r\n class=\"select button-sec\">\r\n <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\"\r\n 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'\"\r\n 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\"></i>Edit\r\n </button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n 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\"\r\n [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\"\r\n *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\r\n <!-- Objective -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\"\r\n [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\"\r\n *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'\"\r\n [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\"\r\n alt=\"\" *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)\"\r\n aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\r\n </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\"\r\n [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\"\r\n [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\"\r\n (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\"></i>\r\n {{rc?.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover\r\n (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\"\r\n type=\"button\" (click)=\"activateSelector('rc',true)\"><i class=\"icons\"></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)\"></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 <!-- Program -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\" [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/category.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 Program or Program 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\"><i class=\"icons\" *ngIf=\"false\" (click)=\"remove('program',program)\"></i> {{program?.name??'--'}}</span>\r\n <!-- <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> -->\r\n <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i class=\"icons\"></i> 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 class=\"multiple-program\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [appTooltip]=\"responsibilityForm?.program[0]?.name\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n <!-- <i class=\"icons\"></i> -->\r\n {{responsibilityForm?.program[0]?.name}}\r\n </span>\r\n <div class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let program of responsibilityForm?.linkedProgram; let j = index\">\r\n <div class=\"avatar-card\" *ngIf=\"program?.category_id !== responsibilityForm?.program[0]?.category_id\">\r\n <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n <i *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" class=\"icons\" (click)=\"remove('program',program)\"></i>\r\n {{ program?.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 <!-- Responsibility Category -->\r\n <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\" [attr.id]=\"'CATEGORY'\"\r\n [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=\"\"\r\n *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)\"\r\n aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\">\r\n </div>\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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('category',true)\"><i class=\"icons\"></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)\"></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\r\n <!-- Format & Evidence -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n [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 *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\" alt=\"im\">\r\n\r\n <svg *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)\"\r\n [mode]=\"'responsibility'\" [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\">\r\n </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\"\r\n [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\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\" alt=\"im\">\r\n\r\n <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" 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\">ASSESSMENTS</label>\r\n <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\"\r\n placeholder=\"Select an assessment for this responsibility\"\r\n [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\"\r\n [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i\r\n class=\"icons\"\r\n (click)=\"remove('assessment',category)\"></i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n 'Question'}}</span>\r\n </span>\r\n </div>\r\n <button (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\"\r\n type=\"button\">\r\n <i class=\"icons\"></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\"\r\n [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\"\r\n (click)=\"activateSelector('checkpoints',true)\"\r\n placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n <button [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n (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\"\r\n [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\"\r\n (click)=\"activateSelector('checkpoints',true)\">\r\n <i class=\"icons\"></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\"></i>\r\n <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature\r\n instead of the old checkpoints functionality to create analytical questions. <button\r\n class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to\r\n 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\"\r\n [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\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')\"></i>\r\n {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('checkpoints-new',true)\">\r\n <i class=\"icons\"></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\"\r\n [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'\"\r\n [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'\"\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\">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\"\r\n 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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('reviewer',true)\"><i class=\"icons\"></i>\r\n Edit</button>\r\n </div>\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\"\r\n (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = $event\"\r\n [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\">\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\"></i>\r\n </app-cs-radio>\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\" [name]=\"'reviewer'\"\r\n (checkedEvent)=\"responsibilityForm.reviewers.sequentialWorkflow = !($event)\"\r\n [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\">\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\"></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)\"></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\"></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\"></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'\"\r\n [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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('overseer',true)\"><i class=\"icons\"></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\r\n [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\"\r\n 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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('overseerNotify',true)\"><i class=\"icons\"></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)\"></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\" (click)=\"remove('overseerNotifyList',overseer)\"></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\"\r\n [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)\"\r\n aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\">\r\n </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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('assurance',true)\"><i class=\"icons\"></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)\"></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\"\r\n *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\r\n [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'\"\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\">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\r\n (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)\"></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\"></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)\"></i>\r\n {{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n </div>\r\n <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i\r\n class=\"icons\"></i> Edit</button>\r\n <!-- class=\"icons\"></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)\"\r\n [checked]=\"selectedSample === 0\">\r\n <div class=\"name\">COUNT</div>\r\n <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\"\r\n [(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)\"\r\n [checked]=\"selectedSample === 1\">\r\n <div class=\"name\">PERCENTAGE</div>\r\n <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\r\n 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\"\r\n [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"\r\n [min]=\"currentTime\" readonly>\r\n <i class=\"icons\"></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)\"></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'\"\r\n [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors',$event)\"\r\n (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 || responsibilityForm.assignees.whoCanComplete === 'ANY_ONE'\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\"\r\n [groupsList]=\"groupsList\" [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 && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\" [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'\"\r\n [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()\">\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [radioSelection]=\"(mode == 'EDIT')?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\r\n [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\" [programsList]=\"programsList\"\r\n [selectedCategories]=\"responsibilityForm.category | refDisconnect\" [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\" [linkedProgram]=\"responsibilityForm?.linkedProgram\" [mode]=\"(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' ) ? '' : mode\"\r\n [openedFrom]=\"openedFrom\" [responsibilityId]=\"responsibilityId\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer'\" [listHeading]=\"'Select a Reviewer'\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"reviewersList\" [showWorkflow]=\"true\"\r\n [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\"\r\n [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\"\r\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n [usersList]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\"\r\n [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('overseer',$event)\"\r\n (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'\" [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\r\n [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\r\n [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\r\n [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\"\r\n [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'\" (assignControl)=\"assignFromFramework($event)\"\r\n[previousSelectedValues]=\"selectedFrameworkValues\"\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</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\"\r\n [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n (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'\"\r\n (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n </app-create-assessment-container>\r\n</div>\r\n",
|
|
4927
|
+
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\"\r\n [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 = [];\">\r\n </app-cs-switch>\r\n </label>\r\n <div class=\"select\"\r\n *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\r\n [disabled]=\"!responsibilityForm?.assignors?.enable\">\r\n </div>\r\n <div class=\"selected\"\r\n *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)\"></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\"\r\n (click)=\"activateSelector('assignors',true)\"><i class=\"icons\"></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 *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)\"></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'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n 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\"\r\n [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'\"\r\n (click)=\"activateSelector('framework',true)\" class=\"button\">Select From A framework</button>\r\n </label>\r\n <span *ngIf=\"responsibilityForm?.responsibility?.keyResponsibility\" class=\"indicator\"\r\n [appTooltip]=\"'This responsibility is marked as key responsibility.'\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n <i class=\"icons\"></i>\r\n </span>\r\n <input *ngIf=\"responsibilityForm?.responsibility?.name.trim() =='' || !isEditWhat\" type=\"text\"\r\n [ngModel]=\"responsibilityForm.responsibility.name\" placeholder=\"What is the responsibility?\"\r\n (change)=\"whatChanged($event)\" (focusin)=\"activateSelector('responsibilityName',true)\"\r\n (focusout)=\"activeDeselector()\" (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\"></i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'what'\" [appScrollInView]=\"true\" class=\"error-message\">Please enter a name for\r\n 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\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\"\r\n [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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('assignees',true)\"><i class=\"icons\"></i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'who'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the person\r\n responsible for completing this responsibility.</p>\r\n <ng-container *ngIf=\"!isGroupAssigned\">\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ALL'\"\r\n [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ALL'\" [name]=\"'what'\">ALL SELECTED\r\n PERSONS NEED TO\r\n COMPLETE THIS<i class=\"icons\"\r\n [appTooltip]=\"'If selected, separate responsibilities will be created for each person.'\"\r\n placement=\"bottom-right\" type=\"white\" delay=\"0\" [tooltipMandatory]=\"true\"></i>\r\n </app-cs-radio>\r\n <app-cs-radio *ngIf=\"mode !== 'EDIT'\"\r\n (checkedEvent)=\"responsibilityForm.assignees.whoCanComplete = 'ANY_ONE'\"\r\n [checked]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\" [name]=\"'what'\">ANY SELECTED\r\n 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\"></i>\r\n </app-cs-radio>\r\n\r\n <div class=\"switch-row align-right\" *ngIf=\"mode == 'EDIT'\">\r\n <app-cs-switch\r\n (ngValueChange)=\"openAssigneeChangeConfirmation($event)\" [ngValue]=\"responsibilityForm.assignees.whoCanComplete == 'ANY_ONE'\"> ANY SELECTED\r\n PERSON CAN COMPLETE\r\n THIS\r\n </app-cs-switch>\r\n </div>\r\n </ng-container>\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)\"></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'\"\r\n class=\"select button-sec\">\r\n <input type=\"text\" (click)=\"activateSelector('frequency',true)\" [placeholder]=\"frequencyPlaceholder\"\r\n 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'\"\r\n 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\"></i>Edit\r\n </button>\r\n </div>\r\n <p *ngIf=\"invalidType === 'when'\" [appScrollInView]=\"true\" class=\"error-message\">Please select the\r\n 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\"\r\n [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\"\r\n *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\r\n <!-- Objective -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.OBJECTIVE\"\r\n [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\"\r\n *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'\"\r\n [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\"\r\n alt=\"\" *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)\"\r\n aria-placeholder=\"Select the responsibility center or the responsibility centers for this responsibility.\">\r\n </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\"\r\n [class.readOnly]=\"openedFrom === 'RISK_TREATMENT'\">\r\n <div class=\"chip-container\" [class.more-one]=\"responsibilityForm?.rc?.length>1\"\r\n [class.plus]=\"responsibilityForm?.rc?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rc of responsibilityForm?.rc?.slice(0,2)\"><i class=\"icons\"\r\n (click)=\"remove('rc',rc)\" *ngIf=\"openedFrom !== 'RISK_TREATMENT'\"></i>\r\n {{rc?.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"responsibilityForm?.rc?.length > 2\" type=\"button\" appPopover\r\n (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\"\r\n type=\"button\" (click)=\"activateSelector('rc',true)\"><i class=\"icons\"></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)\"></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 <!-- Program -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.PROGRAM\" [attr.id]=\"'PROGRAM'\" [class.active]=\"activeSelector === 'program'\" [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/category.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 Program or Program 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\"><i class=\"icons\" *ngIf=\"false\" (click)=\"remove('program',program)\"></i> {{program?.name??'--'}}</span>\r\n <!-- <button *ngIf=\"responsibilityForm?.program?.length > 2\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.program?.slice(2).length}}</button> -->\r\n <button *ngIf=\"responsibilityForm?.linkedProgram?.length > 1\" class=\"count\" type=\"button\" appPopover (click)=\"program.popover()\" placement=\"right\">+ {{responsibilityForm?.linkedProgram?.length - 1}}</button>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'program' && !hiddenList.includes('PROGRAM')\" class=\"edit\" type=\"button\" (click)=\"activateSelector('program',true)\"><i class=\"icons\"></i> 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 class=\"multiple-program\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" [appTooltip]=\"responsibilityForm?.program[0]?.name\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n <!-- <i class=\"icons\"></i> -->\r\n {{responsibilityForm?.program[0]?.name}}\r\n </span>\r\n <div class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li>\r\n <li *ngFor=\"let program of responsibilityForm?.linkedProgram; let j = index\">\r\n <div class=\"avatar-card\" *ngIf=\"program?.category_id !== responsibilityForm?.program[0]?.category_id\">\r\n <span class=\"value\" [appTooltip]=\"program?.name\" placement=\"bottom\"\r\n type=\"black\" delay=\"0\" [tooltipMandatory]=\"false\">\r\n <i *ngIf=\"!hiddenList?.includes('PROGRAM') && !program?.isViewOnlyProgram\" class=\"icons\" (click)=\"remove('program',program)\"></i>\r\n {{ program?.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 <!-- Responsibility Category -->\r\n <!-- <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.CATEGORY\" [attr.id]=\"'CATEGORY'\"\r\n [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=\"\"\r\n *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)\"\r\n aria-placeholder=\"Select the responsibility category or categories that this responsibility relates to.\">\r\n </div>\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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('category',true)\"><i class=\"icons\"></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)\"></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\r\n <!-- Format & Evidence -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"moreOptions?.FORMATE_EVIDENCE\"\r\n [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 *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\" alt=\"im\">\r\n\r\n <svg *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)\"\r\n [mode]=\"'responsibility'\" [formatEvidanceData]=\"responsibilityForm?.formatAndEvidence\">\r\n </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\"\r\n [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\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\" alt=\"im\">\r\n\r\n <svg *ngIf=\"responsibilityForm.assessment?.assessment_id\" 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\">ASSESSMENTS</label>\r\n <div *ngIf=\"!responsibilityForm.assessment?.assessment_id\" class=\"select\">\r\n <input type=\"text\" (click)=\"activateSelector('isAssessment',true);isAssessment = true\"\r\n placeholder=\"Select an assessment for this responsibility\"\r\n [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\"\r\n [appTooltip]=\"responsibilityForm.assessment?.assessmentDetails?.assessment_name\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><i\r\n class=\"icons\"\r\n (click)=\"remove('assessment',category)\"></i>{{responsibilityForm.assessment?.assessmentDetails?.assessment_name}}</span>\r\n <span class=\"label\">{{responsibilityForm.assessment?.assessmentDetails?.questions}}\r\n {{responsibilityForm.assessment?.assessmentDetails?.questions > 1 ? 'Questions':\r\n 'Question'}}</span>\r\n </span>\r\n </div>\r\n <button (click)=\"activateSelector('isAssessment',true);isAssessment = true\" class=\"edit\"\r\n type=\"button\">\r\n <i class=\"icons\"></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\"\r\n [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\"\r\n (click)=\"activateSelector('checkpoints',true)\"\r\n placeholder=\"Add checkpoints for this responsibility\" readonly>\r\n <button [disabled]=\"!responsibilityForm.checkpoints?.length\"\r\n (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\"\r\n [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\"\r\n (click)=\"activateSelector('checkpoints',true)\">\r\n <i class=\"icons\"></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\"></i>\r\n <span>You can now use the new <strong>Checkpoints </strong>or <strong>Assessments</strong> feature\r\n instead of the old checkpoints functionality to create analytical questions. <button\r\n class=\"remove-btn\" (click)=\"onRemoveCheckpoints('checkpoint')\">Remove Checkpoints</button> to\r\n 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\"\r\n [attr.id]=\"'CHECKPOINTS-NEW'\" [class.active]=\"activeSelector === 'checkpoints-new'\">\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')\"></i>\r\n {{checkpointCount}} {{checkpointCount > 1 ? 'Questions': 'Question'}}</span>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'checkpoints-new'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('checkpoints-new',true)\">\r\n <i class=\"icons\"></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\"\r\n [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'\"\r\n [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'\"\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\">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\"\r\n 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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('reviewer',true)\"><i class=\"icons\"></i>\r\n Edit</button>\r\n </div>\r\n <app-cs-radio\r\n\r\n [checked]=\"responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('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\"></i>\r\n </app-cs-radio>\r\n <app-cs-radio\r\n [checked]=\"!responsibilityForm.reviewers.sequentialWorkflow\" [name]=\"'reviewer'\" (checkedEvent)=\"onReviewerWorkflowChange('anyReviewer')\">\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\"></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)\"></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>\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'\"\r\n [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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('overseer',true)\"><i class=\"icons\"></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\r\n [appTooltip]=\"'Who should be notified if the responsibility is not completed?'\"\r\n 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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('overseerNotify',true)\"><i class=\"icons\"></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)\"></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\" (click)=\"remove('overseerNotifyList',overseer)\"></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\"\r\n [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)\"\r\n aria-placeholder=\"Select the test plan categories that you would like to add this responsibility to.\">\r\n </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\"\r\n [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)\"></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\"\r\n (click)=\"activateSelector('assurance',true)\"><i class=\"icons\"></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)\"></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\"\r\n *ngIf=\"moreOptions?.REQUIRES_AUDIT && responsibilityForm.rc.length > 0\" [attr.id]=\"'REQUIRES_AUDIT'\"\r\n [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'\"\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\">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\r\n (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)\"></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\"></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)\"></i>\r\n {{responsibilityForm?.requiresAuditList[0]?.category_name}}</span>\r\n </div>\r\n <button class=\"edit\" type=\"button\" (click)=\"activateSelector('requires_audit',true)\"><i\r\n class=\"icons\"></i> Edit</button>\r\n <!-- class=\"icons\"></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)\"\r\n [checked]=\"selectedSample === 0\">\r\n <div class=\"name\">COUNT</div>\r\n <input type=\"number\" placeholder=\"--\" (keypress)=\"checkInputValue($event)\"\r\n [(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)\"\r\n [checked]=\"selectedSample === 1\">\r\n <div class=\"name\">PERCENTAGE</div>\r\n <input type=\"number\" (keypress)=\"checkInputValue($event)\" [(ngModel)]=\"samplePercentage\"\r\n 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\"\r\n [ngxTimepicker]=\"dailyTime\" placeholder=\"auditTime.toUpperCase()\" type=\"text\"\r\n [min]=\"currentTime\" readonly>\r\n <i class=\"icons\"></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)\"></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'\"\r\n [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('assignors',$event)\"\r\n (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 || responsibilityForm.assignees.whoCanComplete === 'ANY_ONE'\" [openedFrom]=\"openedFrom\" [usersList]=\"assigneesList\"\r\n [groupsList]=\"groupsList\" [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 && responsibilityForm.assignees.whoCanComplete !== 'ANY_ONE'\" [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'\"\r\n [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()\">\r\n</app-frequency-container>\r\n\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [radioSelection]=\"(mode == 'EDIT')?true:false\" [selectedResponsibilityCenters]=\"responsibilityForm.rc\"\r\n [rcIdKey]=\"'item_id'\" (saveSelectedList)=\"saveSelectedList('rc',$event)\" (closeRcList)=\"activeDeselector()\">\r\n</app-responsibility-centers-list>\r\n\r\n<app-category-multi-select *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categories\"\r\n [allCategories]=\"allCategories\" [categoryIdKey]=\"'category_id'\" [selectedCategories]=\"responsibilityForm.category\"\r\n (saveSelectedCategory)=\"saveSelectedList('category',$event)\" (closeCategoriesList)=\"activeDeselector()\">\r\n</app-category-multi-select>\r\n\r\n<!-- [hideProgramsList]=\"(selectedProgram && !(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' )) ? true : false\" -->\r\n<app-program-listing *ngIf=\"activeSelector === 'program'\" [programsList]=\"programsList\"\r\n [selectedCategories]=\"responsibilityForm.category | refDisconnect\" [selectedProgram]=\"responsibilityForm.program | refDisconnect\"\r\n (saveSelectedProgram)=\"saveSelectedList('program',$event)\" (closeEvent)=\"activeDeselector()\" [linkedProgram]=\"responsibilityForm?.linkedProgram\" [mode]=\"(this.selectedProgram?.programType === 0 && this.selectedProgram?.name?.toLowerCase() === 'uncategorized' ) ? '' : mode\"\r\n [openedFrom]=\"openedFrom\" [responsibilityId]=\"responsibilityId\"></app-program-listing>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'reviewer'\" [listHeading]=\"'Select a Reviewer'\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"reviewersList\" [showWorkflow]=\"true\"\r\n [selectedUsers]=\"responsibilityForm.reviewers.list\" [userIdKey]=\"'employee_id'\" [itemEmailKey]=\"'employee_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('reviewer',$event);activateSelector('reviewerFrequency',true)\"\r\n (closeUsersList)=\"activeDeselector()\" [mode]=\"mode\"\r\n [reviewerWorkflowType]=\"(responsibilityForm?.reviewers?.sequentialWorkflow) ? 'SEQUENTIAL' : 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\"\r\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\"\r\n [usersList]=\"overseersList\" [selectedUsers]=\"responsibilityForm.overseers.list\" [userIdKey]=\"'employee_id'\"\r\n [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedList('overseer',$event)\"\r\n (closeUsersList)=\"activeDeselector()\" [itemEmailKey]=\"'employee_email'\">\r\n</app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector ==='overseerNotify'\" [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\" [usersList]=\"overseersList\"\r\n [selectedUsers]=\"responsibilityForm.overseers.notifyList\" [userIdKey]=\"'employee_id'\" [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('overseerNotify',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n [itemEmailKey]=\"'employee_email'\"></app-owner-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'assurance'\" [singularText]=\"'Test Category selected'\"\r\n [pluralText]=\"'Test Categories selected'\" [searchPlaceholder]=\"'Search Test Category...'\"\r\n [listHeading]=\"'Select Test Categories'\" [usersList]=\"assuranceCategoriesList\"\r\n [noDataText]=\"'No Test Categories Found'\" [selectedUsers]=\"responsibilityForm.assuranceList\"\r\n [userIdKey]=\"'category_id'\" [itemEmailKey]=\"'category_name'\" [itemNameKey]=\"'category_name'\"\r\n (saveSelectedList)=\"saveSelectedList('assurance',$event)\" (closeUsersList)=\"activeDeselector()\"\r\n [searchPlaceholder]=\"'Search Category'\">\r\n</app-owner-list>\r\n\r\n<app-audit-category-list *ngIf=\"activeSelector === 'requires_audit'\" (closeList)=\"activeDeselector()\"\r\n [auditCategory]=\"assuranceRequiresAuditList\" (saveSelectedList)=\"saveSelectedList('requires_audit',$event)\"\r\n [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'\" (assignControl)=\"assignFromFramework($event)\"\r\n[previousSelectedValues]=\"selectedFrameworkValues\"\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</app-review-frequency>\r\n\r\n\r\n<app-assessment-list *ngIf=\"isAssessment\" [program_ids]=\"responsibilityForm.program[0]?._id\"\r\n (cancelAssessment)=\"isAssessment = false; activateSelector('isAssessment', false)\"\r\n [isEdit]=\"responsibilityForm?.assessment?.assessment_id ? true : false\"\r\n [selectedAssessment]=\"responsibilityForm?.assessment\"\r\n (onAssessmentSelect)=\"onAssessmentSelect($event);activateSelector('isAssessment', false)\"></app-assessment-list>\r\n\r\n<app-smiley-dialog-inline *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n (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'\"\r\n (postAssessment)=\"postAssessment($event)\" (setIsUploaded)=\"setIsUploaded($event)\"\r\n [checkpointJSON]=\"responsibilityForm.new_checkpoints\">\r\n </app-create-assessment-container>\r\n</div>\r\n",
|
|
4896
4928
|
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)}.action-list ul.action-item li.multiple-program{background:#f8f8f8}.action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}", "@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 .chip-container .chip-inner i.cross{cursor:pointer}::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;position:static}::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:12px}::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}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}"]
|
|
4897
4929
|
},] }
|
|
4898
4930
|
];
|
|
@@ -4925,6 +4957,7 @@ WorkflowComplianceComponent.propDecorators = {
|
|
|
4925
4957
|
onRemovingCheckpoint: [{ type: Output }],
|
|
4926
4958
|
isAssessmentDisabled: [{ type: Output }],
|
|
4927
4959
|
assigneeTypeChange: [{ type: Output }],
|
|
4960
|
+
onReviewerTypeChange: [{ type: Output }],
|
|
4928
4961
|
whatInput: [{ type: ViewChild, args: ['what',] }]
|
|
4929
4962
|
};
|
|
4930
4963
|
|
|
@@ -7083,7 +7116,6 @@ class CsRadioComponent$1 {
|
|
|
7083
7116
|
this.checkedEvent = new EventEmitter();
|
|
7084
7117
|
}
|
|
7085
7118
|
ngOnInit() {
|
|
7086
|
-
console.log("this.selected index", this.checked, this.value);
|
|
7087
7119
|
}
|
|
7088
7120
|
changeState(evt) {
|
|
7089
7121
|
this.checkedEvent.emit(evt);
|