vcomply-workflow-engine 2.9.63 → 2.9.64
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 +114 -114
- package/bundles/vcomply-workflow-engine.umd.js.map +1 -1
- package/esm2015/lib/sharedComponents/approval-workflow/approval-create-form/approval-create-form.component.js +28 -36
- package/esm2015/lib/sharedComponents/approval-workflow/approval-create-form/approval-create-form.component.ngfactory.js +35 -25
- package/esm2015/lib/sharedComponents/approval-workflow/approval-create-form/approval-create-form.component.ngsummary.json +1 -1
- package/esm2015/lib/sharedComponents/approval-workflow/approval-workflow-list/approval-workflow-list.component.js +10 -8
- package/esm2015/lib/sharedComponents/approval-workflow/approval-workflow-list/approval-workflow-list.component.ngfactory.js +7 -3
- package/esm2015/lib/sharedComponents/approval-workflow/approval-workflow-list/approval-workflow-list.component.ngsummary.json +1 -1
- package/esm2015/lib/sharedComponents/approval-workflow/approval-workflow.component.js +19 -3
- package/esm2015/lib/sharedComponents/approval-workflow/approval-workflow.component.ngfactory.js +7 -4
- package/esm2015/lib/sharedComponents/approval-workflow/approval-workflow.component.ngsummary.json +1 -1
- package/esm2015/lib/sharedComponents/assessment-list/assessment-list.component.js +2 -2
- package/esm2015/lib/sharedComponents/assessment-list/assessment-list.component.ngfactory.js +5 -5
- package/esm2015/lib/sharedComponents/floating-bar/floating-bar.component.js +2 -2
- package/esm2015/lib/sharedComponents/floating-bar/floating-bar.component.ngfactory.js +3 -3
- package/esm2015/lib/sharedComponents/format-and-evidence/format-and-evidence.component.js +4 -4
- package/esm2015/lib/sharedComponents/format-and-evidence/format-and-evidence.component.ngfactory.js +19 -40
- package/esm2015/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.js +3 -3
- package/esm2015/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.ngfactory.js +4 -4
- package/esm2015/lib/sharedComponents/frequency/frequency-container/frequency-container.component.js +3 -3
- package/esm2015/lib/sharedComponents/frequency/frequency-container/frequency-container.component.ngfactory.js +6 -6
- package/esm2015/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.js +3 -3
- package/esm2015/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.ngfactory.js +3 -3
- package/esm2015/lib/sharedComponents/frequency/frequency-one-time/frequency-one-time.component.js +3 -3
- package/esm2015/lib/sharedComponents/frequency/frequency-one-time/frequency-one-time.component.ngfactory.js +9 -9
- package/esm2015/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.js +3 -3
- package/esm2015/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.ngfactory.js +4 -4
- package/esm2015/lib/sharedComponents/frequency/frequency-top/frequency-top.component.js +5 -5
- package/esm2015/lib/sharedComponents/frequency/frequency-top/frequency-top.component.ngfactory.js +19 -19
- package/esm2015/lib/sharedComponents/frequency-dialog/frequency-dialog-checkbox-list/frequency-dialog-checkbox-list.component.js +1 -1
- package/esm2015/lib/sharedComponents/frequency-dialog/frequency-dialog-container/frequency-dialog-container.component.js +3 -3
- package/esm2015/lib/sharedComponents/frequency-dialog/frequency-dialog-container/frequency-dialog-container.component.ngfactory.js +2 -2
- package/esm2015/lib/sharedComponents/group-users-list/group-users-list.component.js +3 -3
- package/esm2015/lib/sharedComponents/group-users-list/group-users-list.component.ngfactory.js +2 -2
- package/esm2015/lib/sharedComponents/link-program/link-program/link-program.component.js +2 -2
- package/esm2015/lib/sharedComponents/link-program/link-program/link-program.component.ngfactory.js +61 -36
- package/esm2015/lib/sharedComponents/select-approvers/select-approvers.component.js +2 -8
- package/esm2015/lib/sharedComponents/select-approvers/select-approvers.component.ngfactory.js +2 -2
- package/esm2015/lib/workflow-engine.module.ngfactory.js +1 -1
- package/esm2015/lib/workflow-policy/workflow-policy.component.js +33 -37
- package/esm2015/lib/workflow-policy/workflow-policy.component.ngfactory.js +339 -224
- package/esm2015/lib/workflow-policy/workflow-policy.component.ngsummary.json +1 -1
- package/esm2015/lib/workflow-program/create-program-ui/floating-bar/floating-bar.component.js +2 -2
- package/esm2015/lib/workflow-program/create-program-ui/floating-bar/floating-bar.component.ngfactory.js +2 -2
- package/fesm2015/vcomply-workflow-engine.js +114 -114
- package/fesm2015/vcomply-workflow-engine.js.map +1 -1
- package/lib/sharedComponents/approval-workflow/approval-create-form/approval-create-form.component.d.ts +3 -0
- package/lib/sharedComponents/approval-workflow/approval-workflow-list/approval-workflow-list.component.d.ts +2 -0
- package/lib/sharedComponents/approval-workflow/approval-workflow.component.d.ts +4 -0
- package/lib/workflow-policy/workflow-policy.component.d.ts +5 -0
- package/package.json +1 -1
- package/vcomply-workflow-engine.metadata.json +1 -1
|
@@ -7052,6 +7052,7 @@
|
|
|
7052
7052
|
'checkpoints',
|
|
7053
7053
|
'linkProgram',
|
|
7054
7054
|
'isAssessment',
|
|
7055
|
+
'owners',
|
|
7055
7056
|
];
|
|
7056
7057
|
this.riskClassification = [
|
|
7057
7058
|
{ name: 'LOW', value: 1, class: 'low' },
|
|
@@ -7072,6 +7073,8 @@
|
|
|
7072
7073
|
this.selectedLinkProgram = {};
|
|
7073
7074
|
this.versionErrorMessage = 'You have entered an incorrect format. The version field can either include numbers, alphabets, hyphen or dots.';
|
|
7074
7075
|
this.selectedWorkflow = [];
|
|
7076
|
+
this.createApprovalClick = false;
|
|
7077
|
+
this.editWorkflowLevel = {};
|
|
7075
7078
|
this.policyForm = {
|
|
7076
7079
|
policyName: '',
|
|
7077
7080
|
policyNotes: '',
|
|
@@ -7170,7 +7173,6 @@
|
|
|
7170
7173
|
this.workflowType = workflowType;
|
|
7171
7174
|
}
|
|
7172
7175
|
this.activeSelector = event ? type : '';
|
|
7173
|
-
console.log('this.activeSelector 285', this.activeSelector);
|
|
7174
7176
|
if (this.sideSelectorElements.includes(type)) {
|
|
7175
7177
|
this.pickerChanged.emit(event);
|
|
7176
7178
|
}
|
|
@@ -7179,7 +7181,6 @@
|
|
|
7179
7181
|
* Closes the listing pages
|
|
7180
7182
|
*/
|
|
7181
7183
|
WorkflowPolicyComponent.prototype.disableSelector = function () {
|
|
7182
|
-
console.log('disableSelector');
|
|
7183
7184
|
this.addMoreLevels = false;
|
|
7184
7185
|
this.activeSelector = '';
|
|
7185
7186
|
this.pickerChanged.emit(false);
|
|
@@ -7298,11 +7299,11 @@
|
|
|
7298
7299
|
*/
|
|
7299
7300
|
WorkflowPolicyComponent.prototype.getApproverWorkFlow = function (id) {
|
|
7300
7301
|
var _this = this;
|
|
7301
|
-
console.log('category id in get approval workflow', id);
|
|
7302
7302
|
this.loader = true;
|
|
7303
7303
|
this.policyService.getWorkflowList(id).subscribe(function (res) {
|
|
7304
7304
|
if ((res === null || res === void 0 ? void 0 : res.length) >= 0) {
|
|
7305
7305
|
_this.approverWorkFlowList = res; // getting all approver saved workflows
|
|
7306
|
+
console.log('this.approverWorkFlowList ==>', _this.approverWorkFlowList);
|
|
7306
7307
|
_this.loader = false;
|
|
7307
7308
|
}
|
|
7308
7309
|
}, function (err) {
|
|
@@ -7325,7 +7326,6 @@
|
|
|
7325
7326
|
res.forEach(function (element) {
|
|
7326
7327
|
var _a;
|
|
7327
7328
|
_this.allApprovers = lodash.uniqBy(_this.allApprovers.concat(element.all_approvers), 'member_id');
|
|
7328
|
-
console.log('this.allApprovers', _this.allApprovers);
|
|
7329
7329
|
_this.allReviewers = lodash.uniqBy(element.all_approvers.concat(_this.allReviewers, element.all_authors), 'member_id');
|
|
7330
7330
|
if (_this.mode === 'CREATE')
|
|
7331
7331
|
_this.setOwnersOnLoad();
|
|
@@ -7409,7 +7409,6 @@
|
|
|
7409
7409
|
activatedOptions.push('LINK_PROGRAM_RESPONSIBILITIES');
|
|
7410
7410
|
this.policyForm.addLinkProgram = true;
|
|
7411
7411
|
}
|
|
7412
|
-
console.log('==============>12', activatedOptions);
|
|
7413
7412
|
this.populateOption.emit(activatedOptions);
|
|
7414
7413
|
};
|
|
7415
7414
|
/**
|
|
@@ -7613,7 +7612,6 @@
|
|
|
7613
7612
|
break;
|
|
7614
7613
|
case 'owners':
|
|
7615
7614
|
this.policyForm.policy_owners = this.setList(this.allApprovers, selectedItems, 'member_id');
|
|
7616
|
-
console.log('this.policyForm.policy_owners ppp ==>', selectedItems, this.policyForm.policy_owners);
|
|
7617
7615
|
}
|
|
7618
7616
|
this.disableSelector();
|
|
7619
7617
|
};
|
|
@@ -7803,7 +7801,6 @@
|
|
|
7803
7801
|
WorkflowPolicyComponent.prototype.frequencyDataPopulation = function (event, mode) {
|
|
7804
7802
|
if (mode === void 0) { mode = 'SELECT'; }
|
|
7805
7803
|
//needs to discuss with backend about edit and default values
|
|
7806
|
-
console.log('event ====>', event);
|
|
7807
7804
|
var data = {
|
|
7808
7805
|
pattern: event === null || event === void 0 ? void 0 : event.frequency_details,
|
|
7809
7806
|
window: event === null || event === void 0 ? void 0 : event.remind_days_before_due_date,
|
|
@@ -7825,14 +7822,12 @@
|
|
|
7825
7822
|
* @param event contains selected frequency details
|
|
7826
7823
|
*/
|
|
7827
7824
|
WorkflowPolicyComponent.prototype.frequencyData = function (event) {
|
|
7828
|
-
console.log('policy frequency data', event);
|
|
7829
7825
|
this.policyForm.frequency_details = event.pattern;
|
|
7830
7826
|
(this.policyForm.frequency_text = event.placeholder),
|
|
7831
7827
|
(this.policyForm.mark_failed_after = event.failedAfter);
|
|
7832
7828
|
this.policyForm.remind_days_before_due_date = event.window;
|
|
7833
7829
|
this.policyForm.failed_time = event.timeIn24Hr;
|
|
7834
7830
|
this.policyForm.assignee_start_date = moment__namespace(event.startFrom * 1000).format('ddd MMM DD YYYY');
|
|
7835
|
-
console.log('policy frequency data', this.policyForm);
|
|
7836
7831
|
this.activateSelector('frequency', false);
|
|
7837
7832
|
var payload = {
|
|
7838
7833
|
frequency_details: event.pattern,
|
|
@@ -7914,7 +7909,6 @@
|
|
|
7914
7909
|
* @param event contains selected frequency details
|
|
7915
7910
|
*/
|
|
7916
7911
|
WorkflowPolicyComponent.prototype.reviewerFrequencyData = function (event) {
|
|
7917
|
-
console.log('event ====>', event);
|
|
7918
7912
|
this.policyForm.reviewFailedAfter = event.failedAfter;
|
|
7919
7913
|
this.policyForm.review_frequency_details = event.pattern;
|
|
7920
7914
|
this.policyForm.review_frequency_type = event.pattern.split('~')[0];
|
|
@@ -8010,7 +8004,6 @@
|
|
|
8010
8004
|
this.uiKitService.isLoader = true;
|
|
8011
8005
|
var policy = this.policyForm;
|
|
8012
8006
|
var approversData = this.convertApprovalWorkflow(policy.selectedApprovers);
|
|
8013
|
-
console.log('policy.selectedApprovers ==>', policy.selectedApprovers, this.convertApprovalWorkflow(policy.selectedApprovers));
|
|
8014
8007
|
var reviewerFilesArray = lodash.cloneDeep(policy.documentsAndLinks.formatFiles);
|
|
8015
8008
|
var reviewerFiles = reviewerFilesArray.map(function (file) {
|
|
8016
8009
|
file.name = file.filename;
|
|
@@ -8137,7 +8130,6 @@
|
|
|
8137
8130
|
? policy === null || policy === void 0 ? void 0 : policy.businessCycle
|
|
8138
8131
|
: undefined,
|
|
8139
8132
|
};
|
|
8140
|
-
console.log('reviewerIDreviewerIDreviewerID', policy.selectedReviewers, reviewerID, payload);
|
|
8141
8133
|
if (this.mode == 'CREATE') {
|
|
8142
8134
|
this.policyService.submitPolicy(payload).subscribe(function (res) {
|
|
8143
8135
|
var _a;
|
|
@@ -8410,7 +8402,6 @@
|
|
|
8410
8402
|
this.policyForm.assessment = (_r = data === null || data === void 0 ? void 0 : data.assessment) !== null && _r !== void 0 ? _r : [];
|
|
8411
8403
|
this.policyForm.addLinkAssessment = (_s = data === null || data === void 0 ? void 0 : data.assessment) === null || _s === void 0 ? void 0 : _s.length;
|
|
8412
8404
|
this.policyForm.addVersion = (data === null || data === void 0 ? void 0 : data.policy_version) ? true : false;
|
|
8413
|
-
console.log('this.policyForm ==>', this.policyForm, data);
|
|
8414
8405
|
// this.checkForCreateDocuments();
|
|
8415
8406
|
this.policyForm.policy_version = data.policy_version;
|
|
8416
8407
|
this.policyForm.programSelectedValues.program =
|
|
@@ -8436,7 +8427,6 @@
|
|
|
8436
8427
|
var _a, _b;
|
|
8437
8428
|
var regexMatch = new RegExp('^[A-Za-z0-9\\.-]*$');
|
|
8438
8429
|
this.isVersionValid = regexMatch.test(this.policyForm.policy_version);
|
|
8439
|
-
console.log('this.isVersionValid ==>', this.isVersionValid);
|
|
8440
8430
|
if (!this.isVersionValid) {
|
|
8441
8431
|
if (((_a = this.policyForm.policy_version) === null || _a === void 0 ? void 0 : _a.length) > 20) {
|
|
8442
8432
|
this.versionErrorMessage =
|
|
@@ -8448,27 +8438,23 @@
|
|
|
8448
8438
|
this.versionErrorMessage =
|
|
8449
8439
|
'Your input is invalid. The maximum character limit is 20 characters.';
|
|
8450
8440
|
}
|
|
8451
|
-
console.log('version match', event, regexMatch.test(this.policyForm.policy_version));
|
|
8452
8441
|
};
|
|
8453
8442
|
WorkflowPolicyComponent.prototype.clickApprovalWorkflow = function (event) {
|
|
8454
8443
|
this.enableApprovalWorkflow = event;
|
|
8455
|
-
|
|
8456
|
-
console.log('this.enableApprovalWorkflow', this.enableApprovalWorkflow);
|
|
8444
|
+
this.activateSelector('approvers', true);
|
|
8457
8445
|
};
|
|
8458
8446
|
WorkflowPolicyComponent.prototype.listCancelClicked = function (event) {
|
|
8459
|
-
console.log('list cancel in policy listing', event);
|
|
8460
8447
|
if (event) {
|
|
8461
8448
|
this.enableApprovalWorkflow = false;
|
|
8449
|
+
this.disableSelector();
|
|
8462
8450
|
// this.pickerChanged.emit(false);
|
|
8463
8451
|
}
|
|
8464
8452
|
};
|
|
8465
8453
|
WorkflowPolicyComponent.prototype.selectedApprovalWorkflow = function (event) {
|
|
8466
|
-
var _a;
|
|
8467
8454
|
this.selectedWorkflow = [event];
|
|
8468
8455
|
this.enableApprovalWorkflow = false;
|
|
8469
|
-
console.log('selectedApprovalWorkflow', this.selectedWorkflow);
|
|
8470
8456
|
this.policyForm.selectedApprovers = [event];
|
|
8471
|
-
|
|
8457
|
+
this.disableSelector();
|
|
8472
8458
|
};
|
|
8473
8459
|
WorkflowPolicyComponent.prototype.updatedProgramDetails = function (event) {
|
|
8474
8460
|
this.policyForm.linkProgram = event === null || event === void 0 ? void 0 : event.linkProgram;
|
|
@@ -8477,7 +8463,6 @@
|
|
|
8477
8463
|
this.disableSelector();
|
|
8478
8464
|
};
|
|
8479
8465
|
WorkflowPolicyComponent.prototype.onAssessmentSelect = function (event) {
|
|
8480
|
-
console.log('event ==>', event);
|
|
8481
8466
|
this.policyForm.assessment = [event];
|
|
8482
8467
|
};
|
|
8483
8468
|
WorkflowPolicyComponent.prototype.getAssessmentDetails = function (assessmentDetails, type) {
|
|
@@ -8499,7 +8484,6 @@
|
|
|
8499
8484
|
category_details: categoryDetails,
|
|
8500
8485
|
},
|
|
8501
8486
|
];
|
|
8502
|
-
console.log('this.policyForm.assessment ==>', _this.policyForm.assessment);
|
|
8503
8487
|
}
|
|
8504
8488
|
});
|
|
8505
8489
|
};
|
|
@@ -8507,10 +8491,8 @@
|
|
|
8507
8491
|
this.policyForm.policy_owners = this.setList(this.allApprovers, [this.authService.getMemberId()], 'member_id');
|
|
8508
8492
|
};
|
|
8509
8493
|
WorkflowPolicyComponent.prototype.approvalWorkflowAPICall = function (event) {
|
|
8510
|
-
console.log('approvalWorkflowAPICall', event);
|
|
8511
8494
|
if (event) {
|
|
8512
8495
|
var objectIds = this.returnIds(this.policyForm.selectedCategories, '_id');
|
|
8513
|
-
console.log('approvalWorkflowAPICall objectIds', objectIds);
|
|
8514
8496
|
this.getApproverWorkFlow(objectIds);
|
|
8515
8497
|
this.enableApprovalWorkflow = true;
|
|
8516
8498
|
}
|
|
@@ -8519,7 +8501,8 @@
|
|
|
8519
8501
|
var returnJson = {};
|
|
8520
8502
|
var modifiedData = JSON.parse(JSON.stringify(approverList));
|
|
8521
8503
|
modifiedData === null || modifiedData === void 0 ? void 0 : modifiedData.forEach(function (workflow) {
|
|
8522
|
-
|
|
8504
|
+
var _a;
|
|
8505
|
+
(_a = workflow === null || workflow === void 0 ? void 0 : workflow.approval_workflow) === null || _a === void 0 ? void 0 : _a.forEach(function (approver, index) {
|
|
8523
8506
|
var i = index + 1;
|
|
8524
8507
|
returnJson['level' + i] = approver;
|
|
8525
8508
|
});
|
|
@@ -8527,32 +8510,45 @@
|
|
|
8527
8510
|
return returnJson;
|
|
8528
8511
|
};
|
|
8529
8512
|
WorkflowPolicyComponent.prototype.deleteLevel = function (index) {
|
|
8530
|
-
var _a, _b, _c
|
|
8513
|
+
var _a, _b, _c;
|
|
8531
8514
|
// Approver Level delete
|
|
8532
|
-
|
|
8533
|
-
(_b = this.selectedWorkflow[0]) === null || _b === void 0 ? void 0 : _b.approval_workflow.
|
|
8534
|
-
console.log('this.approvalWorkflows after splice', (_c = this.selectedWorkflow[0]) === null || _c === void 0 ? void 0 : _c.approval_workflow, index);
|
|
8535
|
-
for (var i = index; i < ((_e = this.selectedWorkflow[0]) === null || _e === void 0 ? void 0 : _e.approval_workflow.length); i++) {
|
|
8515
|
+
(_a = this.selectedWorkflow[0]) === null || _a === void 0 ? void 0 : _a.approval_workflow.splice(index, 1);
|
|
8516
|
+
for (var i = index; i < ((_b = this.selectedWorkflow[0]) === null || _b === void 0 ? void 0 : _b.approval_workflow.length); i++) {
|
|
8536
8517
|
if (this.selectedWorkflow[0].approval_workflow[index]['level1'] ===
|
|
8537
|
-
((
|
|
8518
|
+
((_c = this.selectedWorkflow[0]) === null || _c === void 0 ? void 0 : _c.approval_workflow[index]['alias_name'])) {
|
|
8538
8519
|
this.selectedWorkflow[0].approval_workflow[index]['alias_name'] = "Level " + (i + 1);
|
|
8539
8520
|
}
|
|
8540
8521
|
this.selectedWorkflow[0].approval_workflow[index]['level1'] = "Level " + (i + 1);
|
|
8541
8522
|
}
|
|
8542
|
-
console.log('this.approvalWorkflows after delete', (_g = this.selectedWorkflow[0]) === null || _g === void 0 ? void 0 : _g.approval_workflow);
|
|
8543
8523
|
};
|
|
8544
8524
|
WorkflowPolicyComponent.prototype.editWorkflow = function (event) {
|
|
8545
|
-
console.log('edit workflow', event);
|
|
8546
8525
|
this.enableApprovalWorkflow = true;
|
|
8547
8526
|
this.editApprovalWorkflow = event;
|
|
8527
|
+
this.activateSelector('approvers', true);
|
|
8528
|
+
};
|
|
8529
|
+
WorkflowPolicyComponent.prototype.createApprovalWorkflow = function () {
|
|
8530
|
+
this.enableApprovalWorkflow = true;
|
|
8531
|
+
this.createApprovalClick = true;
|
|
8532
|
+
};
|
|
8533
|
+
WorkflowPolicyComponent.prototype.closeClickedCreateForm = function () {
|
|
8534
|
+
this.enableApprovalWorkflow = false;
|
|
8535
|
+
this.disableSelector();
|
|
8536
|
+
};
|
|
8537
|
+
WorkflowPolicyComponent.prototype.editLevelClicked = function (editLevel, index) {
|
|
8538
|
+
this.enableApprovalWorkflow = true;
|
|
8539
|
+
this.editWorkflowLevel = {
|
|
8540
|
+
editLevel: editLevel,
|
|
8541
|
+
index: index,
|
|
8542
|
+
};
|
|
8543
|
+
this.activateSelector('approvers', true);
|
|
8548
8544
|
};
|
|
8549
8545
|
return WorkflowPolicyComponent;
|
|
8550
8546
|
}());
|
|
8551
8547
|
WorkflowPolicyComponent.decorators = [
|
|
8552
8548
|
{ type: i0.Component, args: [{
|
|
8553
8549
|
selector: 'app-workflow-policy',
|
|
8554
|
-
template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n <div class=\"workflow-policy\">\r\n <!-- Policy Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n alt=\"name\"\r\n *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Policy Name <span class=\"required\">*</span>\r\n </label>\r\n <input\r\n type=\"text\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n [ngModel]=\"policyForm.policyName\"\r\n (ngModelChange)=\"policyForm.policyName = changeName($event)\"\r\n placeholder=\"Name this policy\"\r\n />\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\r\n >\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{ policyForm.policyName }}</span>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n (click)=\"activateSelector('name', true)\"\r\n type=\"button\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n\r\n <p\r\n *ngIf=\"submitted && !policyForm.policyName.trim()\"\r\n [appScrollInView]=\"true\"\r\n class=\"error-message\"\r\n >\r\n Please enter a name for this policy.\r\n </p>\r\n <marx-editor\r\n [(ngModel)]=\"policyForm.policyNotes\"\r\n [editorConfig]=\"description\"\r\n ></marx-editor>\r\n <app-cs-switch\r\n [(ngValue)]=\"policyForm.availableOnPortal\"\r\n (ngValueChange)=\"availabilityOnPortal($event)\"\r\n >\r\n Do you want this policy to be available on the portal?\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\r\n \"\r\n placement=\"bottom-right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </app-cs-switch>\r\n <app-cs-switch\r\n *ngIf=\"policyForm.availableOnPortal\"\r\n [(ngValue)]=\"policyForm.acceptSuggestions\"\r\n >\r\n Accept suggestions\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\r\n \"\r\n placement=\"bottom-right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></app-cs-switch\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Policy Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'category' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedCategories?.length == 0 ||\r\n activeSelector === 'category'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedCategories?.length > 0 &&\r\n activeSelector !== 'category'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Policy Category <span class=\"required\">*</span>\r\n </label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"policyForm?.selectedCategories?.length == 0\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('category', true)\"\r\n placeholder=\"Select a category for this policy.\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"policyForm?.selectedCategories?.length > 0\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"\r\n let category of policyForm?.selectedCategories?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n (click)=\"remove('category', category)\"\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"category.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ category.item_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n *ngIf=\"policyForm?.selectedCategories?.length > 1\"\r\n type=\"button\"\r\n appPopover\r\n (click)=\"category.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ policyForm?.selectedCategories?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\r\n [class.plus]=\"policyForm?.selectedCategories?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('category',category)\"></i>\r\n {{category.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\r\n appPopover (click)=\"category.popover()\" placement=\"right\">+\r\n {{policyForm?.selectedCategories?.slice(2).length}}</button>\r\n </div> -->\r\n <button\r\n *ngIf=\"activeSelector !== 'category'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('category', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #category [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let category of policyForm?.selectedCategories | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('category', category)\"\r\n ></i\r\n >\r\n {{ category.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <p\r\n *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\r\n [appScrollInView]=\"true\"\r\n class=\"error-message\"\r\n >\r\n Please select the category for this policy.\r\n </p>\r\n </div>\r\n\r\n <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\r\n <ng-container *ngFor=\"let tag of policyForm?.customTags\">\r\n <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"tag.value\"\r\n placeholder=\"{{ tag.tagname }}\"\r\n />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Effective Date -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">Effective Date</label>\r\n <div class=\"date-time-picker\">\r\n <div class=\"picker-group\">\r\n <input\r\n type=\"text\"\r\n readonly\r\n placeholder=\"Select the effective date of the policy.\"\r\n [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n />\r\n <i class=\"icons\"></i>\r\n <dp-date-picker\r\n #datePicker\r\n (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\r\n [config]=\"dateConfig\"\r\n [(ngModel)]=\"policyForm.policyDueDate\"\r\n >\r\n </dp-date-picker>\r\n <div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatePicker($event)\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Policy Owner -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'owners'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'owners' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\r\n <img\r\n *ngIf=\"!policyForm.policy_owners?.length\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm.policy_owners?.length\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <label class=\"vx-control-panel\">POLICY OWNER</label>\r\n </div>\r\n <div\r\n *ngIf=\"!policyForm.policy_owners?.length\"\r\n (click)=\"activateSelector('owners', true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n I am creating this Policy on behalf of someone else\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"policyForm.policy_owners?.length\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ policyForm?.policy_owners[0]?.member_name }}</span\r\n >\r\n\r\n <button\r\n *ngIf=\"policyForm?.policy_owners?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"policyUserPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n + {{ policyForm?.policy_owners.length - 1 }}\r\n </button>\r\n </div>\r\n <div\r\n *ngIf=\"false\"\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\r\n >\r\n &\r\n </div>\r\n <div\r\n *ngIf=\"false\"\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >Samantha Jones</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"policyGroupPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +4\r\n </button>\r\n </div>\r\n <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of policyForm?.policy_owners | slice : 1;\r\n let i = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"owner?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n (click)=\"remove('owners', owner, i + 1)\"\r\n class=\"icons\"\r\n ></i\r\n >\r\n {{ owner?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n Harshvardhan Kariwala\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <button\r\n (click)=\"activateSelector('owners', true)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Review -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"\r\n activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\r\n \"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewer' &&\r\n activeSelector !== 'reviewerFrequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\r\n <img\r\n *ngIf=\"!policyForm?.addReviewers\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.addReviewers\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">REVIEW</label>\r\n <div\r\n class=\"reviewSelection vx-p-3 vx-pb-0\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\r\n Does this policy need to be reviewed?\r\n </div>\r\n <app-cs-radio\r\n [checked]=\"policyForm?.addReviewers\"\r\n (checkedEvent)=\"typeSelected(true)\"\r\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n YES\r\n </div></app-cs-radio\r\n >\r\n <app-cs-radio\r\n [checked]=\"!policyForm?.addReviewers\"\r\n (checkedEvent)=\"typeSelected(false)\"\r\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n NO\r\n </div></app-cs-radio\r\n >\r\n </div>\r\n\r\n <ng-container *ngIf=\"policyForm?.addReviewers\">\r\n <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\r\n <div\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n [class.active]=\"activeSelector === 'reviewer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewer' &&\r\n activeSelector !== 'reviewerFrequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n (click)=\"activateSelector('reviewer', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the person responsible for reviewing this policy\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n [class.active]=\"activeSelector === 'reviewer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewer' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n >\r\n <i\r\n (click)=\"remove('reviewer', reviewer)\"\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ reviewer?.member_name }}</span\r\n >\r\n </div>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n *ngIf=\"activeSelector !== 'reviewer'\"\r\n (click)=\"activateSelector('reviewer', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\r\n <div\r\n *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n When does this policy needs to be reviewed?\r\n </div>\r\n <div\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\r\n >\r\n SET A FREQUENCY\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewerFrequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n >\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\r\n {{ reviewerFrequencyPlaceholder }}\r\n </div>\r\n <button\r\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n policyForm?.selectedReviewers?.length > 0 &&\r\n !policyForm?.review_frequency_details\r\n \"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select the review schedule for this policy.\r\n </p>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- New Approval Workflow -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'approvers'\"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedApprovers?.length == 0 ||\r\n activeSelector === 'approvers'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedApprovers?.length > 0 &&\r\n activeSelector !== 'approvers'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <label class=\"vx-control-panel\"\r\n >APPROVAL <span class=\"required\">*</span></label\r\n >\r\n <button\r\n class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\r\n >\r\n CREATE A NEW APPROVAL WORKFLOW\r\n </button>\r\n </div>\r\n <div *ngIf=\"selectedWorkflow?.length === 0\"\r\n (click)=\"clickApprovalWorkflow(true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Select the approval workflow for this policy\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"selectedWorkflow?.length > 0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3\">\r\n <div\r\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{selectedWorkflow[0]?.workflow_name\r\n }}</span\r\n >\r\n </div>\r\n <button (click)=\"editWorkflow(selectedWorkflow[0])\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\r\n <div *ngFor=\"let approval of selectedWorkflow[0]?.approval_workflow; let approvalIndex = index\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n >\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <div class=\"level-left vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block\">\r\n <div\r\n class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n [appTooltip]=\"approval?.level1\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{approval?.level1\r\n }}\r\n </div>\r\n <div\r\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n >\r\n {{approval?.type\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <div\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n 1\r\n </div>\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"approval?.approvers[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{approval?.approvers[0]?.member_name}}</span\r\n >\r\n <button *ngIf=\"approval?.approvers?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"workflowPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{approval?.approvers?.length - 1}}\r\n </button>\r\n </div>\r\n <app-popover #workflowPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let approval of approval?.approvers | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"approval?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n <span\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >Final</span\r\n >\r\n {{approval?.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\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n <button (click)=\"deleteLevel(approvalIndex)\"\r\n class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> DELETE\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Policy Access -->\r\n <div\r\n *ngIf=\"false\"\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <label class=\"vx-control-panel\">POLICY ACCESS</label>\r\n </div>\r\n <div\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Who should be able to view this policy?\r\n </div>\r\n </div>\r\n\r\n <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\">\r\n <div\r\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >Samantha Jones</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"policyAccessPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +4\r\n </button>\r\n </div>\r\n <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n Harshvardhan Kariwala\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n\r\n <div class=\"vx-mt-4 vx-mb-2\">\r\n <app-cs-radio\r\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n Everyone who has access to this Policy Category\r\n </div></app-cs-radio\r\n >\r\n <app-cs-radio class=\"vx-mt-1\"\r\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n Select users/groups\r\n </div></app-cs-radio\r\n >\r\n </div>\r\n </div>\r\n\r\n <div class=\"vx-mt-2\">\r\n <app-cs-switch\r\n >ACCEPT SUGGESTIONS\r\n <i\r\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n [appTooltip]=\"'Accept suggestions info text here...'\"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></app-cs-switch\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Attestations -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"false\"\r\n *ngIf=\"false\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/attestations.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <label class=\"vx-control-panel\">ATTESTATIONS</label>\r\n </div>\r\n <div\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Select the persons required to attest to this Policy\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >Samantha Jones</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"policyAttestationPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +4\r\n </button>\r\n </div>\r\n <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n Harshvardhan Kariwala\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n\r\n <div class=\"vx-mt-2\">\r\n <app-cs-switch\r\n >REQUIRES E-SIGNATURE FOR ATTESTATION\r\n <i\r\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n [appTooltip]=\"\r\n 'Requires e-signature for attestation info text here...'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></app-cs-switch\r\n >\r\n </div>\r\n\r\n <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\r\n <div\r\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n What is the attestation schedule for this<br />policy?\r\n </div>\r\n <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\r\n SET A FREQUENCY\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\r\n Every Wednesday by 11:59 pm\r\n </div>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n\r\n <label class=\"vx-control-panel vx-mt-2\"\r\n >ASSESSMENT OF UNDERSTANDING</label\r\n >\r\n <div\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n of the policy.\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\r\n </div>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Approval Workflow -->\r\n <div\r\n class=\"form-group-row\"\r\n *ngIf=\"false\"\r\n [class.active]=\"activeSelector === 'approvers'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'approvers'\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedApprovers?.length == 0 ||\r\n activeSelector === 'approvers'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedApprovers?.length > 0 &&\r\n activeSelector !== 'approvers'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div\r\n class=\"vx-form-group approval-workflow\"\r\n [class.disabled]=\"policyApprovalFlag !== 0\"\r\n >\r\n <label class=\"vx-control-panel\">\r\n Approval workflow <span class=\"required\">*</span>\r\n <button\r\n (click)=\"\r\n activateSelector('approvers', true);\r\n addMoreLevels = true;\r\n workflowType = 'SEQUENTIAL'\r\n \"\r\n class=\"button\"\r\n >\r\n Create a new Approval Workflow\r\n </button>\r\n </label>\r\n <div\r\n class=\"select\"\r\n [class.disabled]=\"approverWorkFlowList?.length == 0\"\r\n *ngIf=\"\r\n policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\r\n policyForm?.selectedApprovers.length == 0\r\n \"\r\n >\r\n <cs-select\r\n [ngModel]=\"selectedApprovalWorkflow\"\r\n (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n [placeholder]=\"'Select approval workflow for this policy'\"\r\n name=\"selectedApprovalWorkflow\"\r\n [setMaxWidth]=\"true\"\r\n >\r\n <cs-option\r\n *ngFor=\"let data of approverWorkFlowList\"\r\n [value]=\"data\"\r\n >\r\n {{ data.workflow_name }}\r\n </cs-option>\r\n <cs-option\r\n [value]=\"-1\"\r\n (click)=\"\r\n activateSelector('approvers', true);\r\n addMoreLevels = true;\r\n workflowType = 'SEQUENTIAL'\r\n \"\r\n >Create a new approval workflow</cs-option\r\n >\r\n </cs-select>\r\n </div>\r\n <ng-container\r\n *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\r\n >\r\n <div\r\n class=\"selected\"\r\n *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\r\n >\r\n <div class=\"workflow-label\">\r\n <p class=\"title\">Level {{ i + 1 }}</p>\r\n <p class=\"description\">{{ level.name }}</p>\r\n </div>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <div class=\"chip-container\">\r\n <span\r\n class=\"chip\"\r\n *ngFor=\"\r\n let approver of level.approvers.slice(0, 1);\r\n let j = index\r\n \"\r\n ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\r\n ></i\r\n >\r\n <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\r\n j + 1\r\n }}</span\r\n >{{ approver.member_name }}</span\r\n >\r\n\r\n <button\r\n class=\"count\"\r\n *ngIf=\"level.approvers?.length > 1\"\r\n type=\"button\"\r\n appPopover\r\n (click)=\"labelName.popover()\"\r\n placement=\"right\"\r\n >\r\n +\r\n\r\n {{ level.approvers.slice(1).length }}\r\n </button>\r\n <app-popover #labelName [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let approver of level.approvers | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n class=\"icons\"\r\n (click)=\"remove('approvers', approver, i)\"\r\n ></i\r\n >\r\n <span\r\n class=\"step\"\r\n *ngIf=\"level.name == 'SEQUENTIAL'\"\r\n >\r\n {{\r\n j == level.approvers.slice(1).length - 1\r\n ? \"Final\"\r\n : j + 2\r\n }}\r\n </span>\r\n {{ approver.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"\r\n activateSelector('approvers', true, level.name);\r\n approversListIndex = i\r\n \"\r\n >\r\n <i class=\"icons\"></i>Edit\r\n </button>\r\n <button\r\n class=\"close-btn\"\r\n (click)=\"remove('workflowLevel', level, i)\"\r\n >\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n policyForm?.selectedApprovers?.length == 0 &&\r\n policyApprovalFlag === 0\r\n \"\r\n [appScrollInView]=\"true\"\r\n class=\"error-message\"\r\n >\r\n Select or create an approval workflow for this policy.\r\n </p>\r\n\r\n <label\r\n class=\"vx-control-panel\"\r\n *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\r\n ><button\r\n class=\"button\"\r\n (click)=\"\r\n activateSelector('approvers', true);\r\n addMoreLevels = true;\r\n workflowType = 'SEQUENTIAL'\r\n \"\r\n >\r\n + Add More Levels\r\n </button></label\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who / now Attestation -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'assignees'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'assignees'\"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedAssignees?.length == 0 ||\r\n activeSelector === 'assignees'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedAssignees?.length > 0 &&\r\n activeSelector !== 'assignees'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">Attestation?</label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"\r\n (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\r\n (policyForm?.selectedAssignees?.length == 0 &&\r\n groupEnabled &&\r\n policyForm?.selectedGroupAssignee.length == 0)\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('assignees', true)\"\r\n placeholder=\"Select the persons responsible for attesting this policy.\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n policyForm?.selectedAssignees?.length > 0 ||\r\n policyForm?.selectedGroupAssignee?.length > 0\r\n \"\r\n >\r\n <div class=\"chip-container\" *ngIf=\"!groupEnabled\">\r\n <span\r\n class=\"chip\"\r\n *ngFor=\"\r\n let assignee of policyForm?.selectedAssignees?.slice(0, 2)\r\n \"\r\n ><i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n ></i\r\n >\r\n {{ assignee.employee_name }}</span\r\n >\r\n <button\r\n class=\"count\"\r\n *ngIf=\"policyForm?.selectedAssignees?.length > 2\"\r\n type=\"button\"\r\n appPopover\r\n (click)=\"assigneePopover.popover()\"\r\n placement=\"right\"\r\n >\r\n + {{ policyForm?.selectedAssignees?.slice(2).length }}\r\n </button>\r\n </div>\r\n <div class=\"chip-container\" *ngIf=\"groupEnabled\">\r\n <div\r\n class=\"chip-inner\"\r\n *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-mr-1\"\r\n (click)=\"\r\n remove('assignees', policyForm?.selectedAssignees[0])\r\n \"\r\n ></i\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <span\r\n class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\"\r\n >\r\n {{ policyForm?.selectedAssignees[0]?.employee_name }}\r\n </span>\r\n </span>\r\n <button\r\n *ngIf=\"policyForm?.selectedAssignees.length > 1\"\r\n class=\"count user\"\r\n appPopover\r\n (click)=\"UserPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ policyForm?.selectedAssignees.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n policyForm?.selectedAssignees.length > 0 &&\r\n policyForm?.selectedGroupAssignee.length > 0\r\n \"\r\n >&</span\r\n >\r\n <div\r\n class=\"chip-inner\"\r\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-mr-1\"\r\n (click)=\"\r\n remove(\r\n 'groupAssignees',\r\n policyForm?.selectedGroupAssignee[0]\r\n )\r\n \"\r\n ></i\r\n >\r\n <span class=\"chip\"\r\n ><span\r\n class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\"\r\n >{{\r\n policyForm?.selectedGroupAssignee[0]?.group_name\r\n }}</span\r\n ></span\r\n >\r\n <button\r\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\r\n class=\"count\"\r\n appPopover\r\n (click)=\"group.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ policyForm?.selectedGroupAssignee.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('assignees', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n ((policyForm?.selectedAssignees?.length == 0 &&\r\n policyForm?.frequency_details &&\r\n !groupEnabled) ||\r\n (policyForm?.selectedAssignees?.length == 0 &&\r\n policyForm.selectedGroupAssignee.length == 0 &&\r\n policyForm?.frequency_details &&\r\n groupEnabled))\r\n \"\r\n id=\"whovalidatemsg\"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select the persons required to attest to this Policy.\r\n </p>\r\n <app-cs-switch\r\n [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\r\n class=\"who-toggle\"\r\n >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'If selected, the readers will be required to attest this policy using their electronic signature.'\r\n \"\r\n placement=\"bottom-right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></app-cs-switch\r\n >\r\n <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let assignee of policyForm?.selectedAssignees | slice : 2;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n ></i\r\n >\r\n {{ assignee.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #UserPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let assignee of policyForm?.selectedAssignees | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n ></i\r\n >\r\n {{ assignee.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let data of policyForm?.selectedGroupAssignee | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n\r\n <!-- overseer -->\r\n <app-popover #overseerPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let overseer of policyForm?.CCEmail | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\r\n ></i\r\n >\r\n {{ overseer?.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let data of policyForm?.CCGroupEmail | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\r\n ></i\r\n >\r\n {{ data?.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <!-- overseer end -->\r\n\r\n <!-- overseer fail start -->\r\n <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let overseer of policyForm?.CCFailEmail | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\r\n ></i\r\n >\r\n {{ overseer?.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let data of policyForm?.CCFailEmailGroup | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n class=\"icons\"\r\n (click)=\"remove('ccGroupFailEmail', data)\"\r\n ></i\r\n >\r\n {{ data?.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <!-- overseer fail end -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- When -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.frequency_details\">\r\n <img\r\n *ngIf=\"\r\n !policyForm?.frequency_details || activeSelector === 'frequency'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.frequency_details && activeSelector !== 'frequency'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">When?</label>\r\n\r\n <div\r\n *ngIf=\"policyForm?.frequency_details == ''\"\r\n class=\"select button-sec\"\r\n >\r\n <div\r\n class=\"custom-input frequency-custom-input\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n {{ frequencyPlaceholder }}\r\n </div>\r\n\r\n <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\r\n Set A frequency\r\n </button>\r\n </div>\r\n <div\r\n *ngIf=\"policyForm?.frequency_details != ''\"\r\n class=\"selected button-sec\"\r\n >\r\n <span class=\"chip\">{{ frequencyPlaceholder }}</span>\r\n <button\r\n *ngIf=\"activeSelector !== 'frequency'\"\r\n type=\"button\"\r\n class=\"edit\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons\"></i>Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n ((policyForm?.selectedAssignees?.length > 0 &&\r\n !policyForm?.frequency_details &&\r\n !groupEnabled) ||\r\n ((policyForm?.selectedAssignees?.length > 0 ||\r\n policyForm?.selectedGroupAssignee?.length > 0) &&\r\n !policyForm?.frequency_details &&\r\n groupEnabled))\r\n \"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select an attestation schedule for this policy.\r\n </p>\r\n\r\n <!-- <label class=\"vx-control-panel\">Effective Date</label>\r\n <div class=\"date-time-picker\">\r\n <div class=\"picker-group\">\r\n <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\r\n [value]=\"policyForm.policyDueDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n <i class=\"icons\"></i>\r\n <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\r\n [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\r\n </dp-date-picker>\r\n <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Checkpoints / Assessment of Understanding -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"true\"\r\n [class.active]=\"activeSelector === 'checkpoints'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'checkpoints' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.checkpointDetails?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.checkpointDetails?.length == 0 ||\r\n activeSelector === 'checkpoints'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.checkpointDetails?.length > 0 &&\r\n activeSelector !== 'checkpoints'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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 Assessment of Understanding\r\n <!-- <button *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n </label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\r\n (click)=\"activateSelector('checkpoints', true)\"\r\n >\r\n <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\r\n <div class=\"custom-input\">\r\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n of the policy.\r\n </div>\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\r\n >\r\n <!-- <div class=\"chip-container\">\r\n <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\r\n\r\n <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\r\n\r\n <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\r\n\r\n </div> -->\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">{{\r\n policyForm?.checkpointDetails?.length +\r\n (policyForm?.checkpointDetails?.length > 1\r\n ? \" Questions\"\r\n : \" Question\")\r\n }}</span>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('checkpoints', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\"></i>\r\n {{ checkpoint?.question }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Classification -->\r\n <div\r\n class=\"form-group-row\"\r\n *ngIf=\"showRiskClassification && false\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n alt=\"im\"\r\n *ngIf=\"!policyForm?.riskRating\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n *ngIf=\"policyForm?.riskRating\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Classification</label>\r\n <div class=\"classification\">\r\n <label\r\n class=\"low\"\r\n *ngFor=\"let class of riskClassification\"\r\n [ngClass]=\"[class.class]\"\r\n >\r\n <input\r\n type=\"radio\"\r\n name=\"classification\"\r\n [value]=\"class.value\"\r\n [checked]=\"policyForm?.riskRating === class.value\"\r\n [(ngModel)]=\"policyForm.riskRating\"\r\n />\r\n <span>{{ class.name }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"policyForm.addResponsibilityCenters\"\r\n [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rc' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Responsibility Center</label>\r\n <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('rc', true)\"\r\n placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\r\n readonly\r\n />\r\n </div>\r\n <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n <div class=\"chip-container\">\r\n <span\r\n class=\"chip\"\r\n *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 2)\"\r\n ><i class=\"icons\" (click)=\"remove('rc', rc)\"></i>\r\n {{ rc.item_name }}</span\r\n >\r\n <button\r\n class=\"count\"\r\n *ngIf=\"policyForm?.selectedRCs?.length > 2\"\r\n type=\"button\"\r\n appPopover\r\n (click)=\"rcPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n + {{ policyForm?.selectedRCs?.slice(2).length }}\r\n </button>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('rc', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let rc of policyForm?.selectedRCs | slice : 2;\r\n let j = index\r\n \"\r\n >\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\r\n <!-- Version -->\r\n <div\r\n *ngIf=\"policyForm.addVersion\"\r\n class=\"form-group-row\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n alt=\"name\"\r\n *ngIf=\"!policyForm.policy_version\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm.policy_version\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">VERSION</label>\r\n <input\r\n [(ngModel)]=\"policyForm.policy_version\"\r\n (change)=\"onVersion($event)\"\r\n type=\"text\"\r\n placeholder=\"Specify the policy version.\"\r\n />\r\n <p\r\n *ngIf=\"!isVersionValid\"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n {{ versionErrorMessage }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Reviewer -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"policyForm.addReviewers && false\"\r\n [class.active]=\"activeSelector === 'reviewer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewer' &&\r\n activeSelector !== 'reviewerFrequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedReviewers?.length == 0 ||\r\n activeSelector === 'reviewer'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedReviewers?.length > 0 &&\r\n activeSelector !== 'reviewer'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"select\"\r\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('reviewer', true)\"\r\n placeholder=\"Select the person responsible for reviewing this policy\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n >\r\n <div class=\"chip-container\">\r\n <span\r\n class=\"chip\"\r\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n ><i class=\"icons\" (click)=\"remove('reviewer', reviewer)\"\r\n ></i\r\n >\r\n {{ reviewer.member_name }}</span\r\n >\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('reviewer', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n policyForm?.selectedReviewers?.length == 0 &&\r\n policyForm?.review_frequency_details\r\n \"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select a reviewer for this policy.\r\n </p>\r\n\r\n <label class=\"vx-control-panel\">When? </label>\r\n\r\n <div\r\n *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n class=\"select button-sec\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n [placeholder]=\"reviewerFrequencyPlaceholder\"\r\n readonly\r\n />\r\n <button\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n type=\"button\"\r\n >\r\n Set A frequency\r\n </button>\r\n </div>\r\n <div\r\n *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n class=\"selected button-sec\"\r\n >\r\n <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\r\n <button\r\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n type=\"button\"\r\n class=\"edit\"\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n >\r\n <i class=\"icons\"></i>Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n policyForm?.selectedReviewers?.length > 0 &&\r\n !policyForm?.review_frequency_details\r\n \"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select the review schedule for this policy.\r\n </p>\r\n\r\n <app-format-and-evidence\r\n (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\r\n #formatEvidence\r\n [mode]=\"'policyReviewer'\"\r\n [organization_id]=\"organization_id\"\r\n [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\r\n >\r\n </app-format-and-evidence>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Overseer -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"policyForm.addOverseers\"\r\n [class.active]=\"\r\n activeSelector === 'ccEmail' || activeSelector === 'ccFail'\r\n \"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'ccEmail' &&\r\n activeSelector !== 'ccFail' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"\r\n policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\r\n \"\r\n >\r\n <img\r\n *ngIf=\"\r\n (policyForm?.CCFailEmail?.length == 0 &&\r\n policyForm?.CCEmail?.length == 0) ||\r\n activeSelector === 'ccEmail' ||\r\n activeSelector === 'ccFail'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n (policyForm?.CCFailEmail?.length > 0 ||\r\n policyForm?.CCEmail?.length > 0) &&\r\n activeSelector !== 'ccEmail' &&\r\n activeSelector !== 'ccFail'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"select\"\r\n *ngIf=\"\r\n policyForm?.CCEmail?.length == 0 &&\r\n policyForm?.CCGroupEmail.length == 0\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('ccEmail', true)\"\r\n placeholder=\"Who should have oversight of this policy?\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n policyForm?.CCEmail?.length > 0 ||\r\n policyForm?.CCGroupEmail.length > 0\r\n \"\r\n >\r\n <div *ngIf=\"!groupEnabled\" class=\"chip-container\">\r\n <span\r\n class=\"chip\"\r\n *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 2)\"\r\n ><i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\r\n ></i\r\n >\r\n {{ ccEmail.employee_name }}</span\r\n >\r\n <button\r\n class=\"count\"\r\n *ngIf=\"policyForm?.CCEmail?.length > 2\"\r\n type=\"button\"\r\n appPopover\r\n (click)=\"ccEmailPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n + {{ policyForm?.CCEmail?.slice(2).length }}\r\n </button>\r\n </div>\r\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n <div\r\n class=\"chip-inner\"\r\n *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-mr-1\"\r\n (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n ><span\r\n class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\"\r\n >{{ policyForm?.CCEmail[0].employee_name }}</span\r\n ></span\r\n >\r\n <button\r\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\r\n class=\"count user\"\r\n appPopover\r\n (click)=\"overseerPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ policyForm?.CCEmail?.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n policyForm?.CCEmail.length > 0 &&\r\n policyForm?.CCGroupEmail?.length > 0\r\n \"\r\n >&</span\r\n >\r\n\r\n <div\r\n class=\"chip-inner\"\r\n *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-mr-1\"\r\n (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n ><span\r\n class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\"\r\n >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\r\n ></span\r\n >\r\n <button\r\n *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\r\n class=\"count\"\r\n appPopover\r\n (click)=\"overseerGroup.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ policyForm?.CCGroupEmail?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('ccEmail', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n\r\n <div\r\n class=\"select\"\r\n *ngIf=\"\r\n policyForm?.CCFailEmail?.length == 0 &&\r\n policyForm?.CCFailEmailGroup?.length == 0\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('ccFail', true)\"\r\n placeholder=\"Who should be notified if the policy is not attested on time?\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n policyForm?.CCFailEmail?.length > 0 ||\r\n policyForm?.CCFailEmailGroup?.length > 0\r\n \"\r\n >\r\n <div *ngIf=\"!groupEnabled\" class=\"chip-container\">\r\n <span\r\n class=\"chip\"\r\n *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 2)\"\r\n ><i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\r\n ></i\r\n >\r\n {{ ccFail.employee_name }}</span\r\n >\r\n <button\r\n class=\"count\"\r\n *ngIf=\"policyForm?.CCFailEmail?.length > 2\"\r\n type=\"button\"\r\n appPopover\r\n (click)=\"ccFailPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n + {{ policyForm?.CCFailEmail?.slice(2).length }}\r\n </button>\r\n </div>\r\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n <div\r\n class=\"chip-inner\"\r\n *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-mr-1\"\r\n (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\r\n ></i\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <span\r\n class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\"\r\n >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\r\n ></span\r\n >\r\n <button\r\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\r\n class=\"count user\"\r\n appPopover\r\n (click)=\"overseerFailPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ policyForm?.CCFailEmail?.length - 1 }}\r\n </button>\r\n </div>\r\n <span\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n policyForm?.CCFailEmail?.length > 0 &&\r\n policyForm?.CCFailEmailGroup?.length > 0\r\n \"\r\n >&</span\r\n >\r\n <div\r\n class=\"chip-inner\"\r\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\r\n >\r\n <i\r\n class=\"icons cross vx-mr-1\"\r\n (click)=\"\r\n remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\r\n \"\r\n ></i\r\n >\r\n <span\r\n class=\"chip\"\r\n [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\r\n placement=\"bottom-left\"\r\n type=\"black\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <span\r\n class=\"vx-fs-11 vx-paragraph-txt vx-fw-500 vx-tt-uppercase\"\r\n >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\r\n ></span\r\n >\r\n <button\r\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\r\n class=\"count\"\r\n appPopover\r\n (click)=\"overseerFailGroup.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\r\n </button>\r\n </div>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('ccFail', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let ccEmail of policyForm?.CCEmail | slice : 2;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\r\n ></i\r\n >\r\n {{ ccEmail.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let ccFail of policyForm?.CCFailEmail | slice : 2;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\r\n ></i\r\n >\r\n {{ ccFail.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Related Documents -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"policyForm.addAssociatedDocuments\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"left\">\r\n <img\r\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">RELATED DOCUMENTS</label>\r\n <app-format-and-evidence\r\n (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\r\n [mode]=\"'policy'\"\r\n [organization_id]=\"organization_id\"\r\n [formatEvidanceData]=\"policyForm?.associatedDocuments\"\r\n ></app-format-and-evidence>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Link Programs & Responsibilities -->\r\n <div\r\n *ngIf=\"policyForm?.addLinkProgram\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'linkProgram'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'linkProgram' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"\r\n policyForm?.programSelectedValues?.program?.category_id\r\n \"\r\n >\r\n <img\r\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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 >LINK PROGRAMS & RESPONSIBILITIES</label\r\n >\r\n <div\r\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n (click)=\"activateSelector('linkProgram', true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Select Programs & responsibilities that are<br />associated with\r\n this policy.\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n (click)=\"\r\n remove('linkProgram', policyForm?.programSelectedValues)\r\n \"\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ policyForm?.programSelectedValues?.program?.name }}</span\r\n >\r\n <!-- <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"programResponsibilityPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +4\r\n </button> -->\r\n </div>\r\n <app-popover\r\n #programResponsibilityPopover\r\n [dontCloseonClick]=\"true\"\r\n >\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"\r\n 'Reporting information security weaknesses'\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n Reporting information security weaknesses\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('linkProgram', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Link Assessment -->\r\n <div\r\n *ngIf=\"policyForm.addLinkAssessment\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'isAssessment'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'isAssessment' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\r\n <img\r\n *ngIf=\"!policyForm?.assessment?.length\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.assessment?.length\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">LINK ASSESSMENTS</label>\r\n <div\r\n *ngIf=\"policyForm?.assessment?.length === 0\"\r\n (click)=\"activateSelector('isAssessment', true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Select assessments that are associated with this<br />policy.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"policyForm?.assessment?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"\r\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{\r\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n }}</span\r\n >\r\n </div>\r\n <app-popover\r\n #programResponsibilityPopover\r\n [dontCloseonClick]=\"true\"\r\n >\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"\r\n assessment?.assessmentDetails?.assessment_name\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n {{ assessment?.assessmentDetails?.assessment_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <button\r\n (click)=\"activateSelector('isAssessment', true)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <app-checkbox-list\r\n [config]=\"categoryConfig\"\r\n [twoColumn]=\"false\"\r\n [itemsList]=\"categoryList\"\r\n [selectedItems]=\"policyForm.selectedCategories\"\r\n [identifierKey]=\"'_id'\"\r\n [displayKey]=\"'item_name'\"\r\n [tooltipKey]=\"'item_name'\"\r\n *ngIf=\"activeSelector === 'category'\"\r\n (saveList)=\"saveSelectedList('category', $event)\"\r\n (closeList)=\"disableSelector()\"\r\n >\r\n </app-checkbox-list>\r\n <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\r\n [itemsList]=\"\"\r\n [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\r\n (closeList)=\"fieldDeselector('ISSUE_CC')\">\r\n</app-checkbox-list> -->\r\n\r\n <app-responsibility-centers-list\r\n *ngIf=\"activeSelector === 'rc'\"\r\n [responsibilityCentersList]=\"rcList\"\r\n [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\r\n [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n (closeRcList)=\"disableSelector()\"\r\n >\r\n </app-responsibility-centers-list>\r\n\r\n <app-users-radio-list\r\n *ngIf=\"activeSelector === 'reviewer'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [usersList]=\"allReviewers\"\r\n [selectedUsers]=\"policyForm.selectedReviewers\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n >\r\n </app-users-radio-list>\r\n\r\n <app-owner-list\r\n *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\r\n [usersList]=\"overseersList\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [selectedUsers]=\"policyForm.CCEmail\"\r\n [userIdKey]=\"'employee_id'\"\r\n [itemNameKey]=\"'employee_name'\"\r\n (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n >\r\n </app-owner-list>\r\n\r\n <user-group-list\r\n *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\r\n [groupEnabled]=\"true\"\r\n [userlist]=\"overseersList\"\r\n [groupList]=\"overseerGroupsList\"\r\n [selectedUsers]=\"policyForm.CCEmail\"\r\n [selectedGroups]=\"policyForm.CCGroupEmail\"\r\n (save)=\"saveSelectedList('ccEmail', $event)\"\r\n (cancel)=\"disableSelector()\"\r\n [featureflag]=\"groupEnabled\"\r\n >\r\n </user-group-list>\r\n\r\n <app-owner-list\r\n *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\r\n [usersList]=\"overseersList\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [selectedUsers]=\"policyForm.CCFailEmail\"\r\n [userIdKey]=\"'employee_id'\"\r\n [itemNameKey]=\"'employee_name'\"\r\n (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n >\r\n </app-owner-list>\r\n\r\n <user-group-list\r\n *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\r\n [groupEnabled]=\"true\"\r\n [userlist]=\"overseersList\"\r\n [groupList]=\"overseerGroupsList\"\r\n [selectedUsers]=\"policyForm.CCFailEmail\"\r\n [selectedGroups]=\"policyForm.CCFailEmailGroup\"\r\n (save)=\"saveSelectedList('ccFail', $event)\"\r\n (cancel)=\"disableSelector()\"\r\n [featureflag]=\"groupEnabled\"\r\n >\r\n </user-group-list>\r\n\r\n <app-group-users-list\r\n *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\r\n [usersList]=\"assigneesList\"\r\n [groupsList]=\"groupsList\"\r\n [selectedUsers]=\"policyForm.selectedAssignees\"\r\n [userIdKey]=\"'my_member_id'\"\r\n (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n >\r\n </app-group-users-list>\r\n\r\n <user-group-list\r\n *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\r\n [groupEnabled]=\"true\"\r\n [userlist]=\"ownerlist\"\r\n [groupList]=\"groupsList\"\r\n (save)=\"saveSelectedList('assignees', $event)\"\r\n (cancel)=\"disableSelector()\"\r\n [selectedGroups]=\"policyForm.selectedGroupAssignee\"\r\n [selectedUsers]=\"policyForm.selectedAssignees\"\r\n [featureflag]=\"groupEnabled\"\r\n >\r\n </user-group-list>\r\n\r\n <app-owner-list\r\n *ngIf=\"activeSelector === 'approvers'\"\r\n [listHeading]=\"'Select Approvers'\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [usersList]=\"allApprovers\"\r\n [showWorkflow]=\"true\"\r\n [selectedUsers]=\"\r\n addMoreLevels\r\n ? []\r\n : policyForm.selectedApprovers[approversListIndex].approvers\r\n \"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n [mode]=\"mode\"\r\n [reviewerWorkflowType]=\"workflowType\"\r\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n [workflowList]=\"workflowList\"\r\n [workflowText]=\"'Approval Workflow'\"\r\n >\r\n </app-owner-list>\r\n\r\n <app-frequency-container\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n [mode]=\"'policy'\"\r\n [frequencyDetails]=\"frequencyDetails\"\r\n (selectedFrequency)=\"frequencyData($event)\"\r\n [feature]=\"feature\"\r\n [pageType]=\"'policy'\"\r\n (closeFrequency)=\"disableSelector()\"\r\n ></app-frequency-container>\r\n\r\n <app-frequency-container\r\n *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n [mode]=\"'reviewerFrequency'\"\r\n [frequencyDetails]=\"reviewerFrequencyDetails\"\r\n (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n [feature]=\"feature\"\r\n [pageType]=\"'policy'\"\r\n (closeFrequency)=\"disableSelector()\"\r\n ></app-frequency-container>\r\n\r\n <vc-link-program\r\n *ngIf=\"activeSelector === 'linkProgram'\"\r\n (close)=\"disableSelector()\"\r\n [policy]=\"policyForm\"\r\n [selectedProgram]=\"policyForm?.programSelectedValues\"\r\n [mode]=\"mode\"\r\n [selectedLinkProgram]=\"selectedLinkProgram\"\r\n (changeTab)=\"changeTab('linkedPrograms')\"\r\n (updatedProgramDetails)=\"updatedProgramDetails($event)\"\r\n >\r\n </vc-link-program>\r\n\r\n <app-checkpoints-policy-container\r\n (closeCheckPoint)=\"disableSelector()\"\r\n [checkpointData]=\"policyForm?.checkpointDetails\"\r\n [requiredPoint]=\"policyForm?.passingMarks\"\r\n *ngIf=\"activeSelector === 'checkpoints'\"\r\n (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\r\n ></app-checkpoints-policy-container>\r\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n <app-approval-workflow\r\n *ngIf=\"enableApprovalWorkflow\"\r\n [selectedCategory]=\"policyForm?.selectedCategories\"\r\n [approverWorkFlowList]=\"approverWorkFlowList\"\r\n [allApprovers]=\"allApprovers\"\r\n (listCancelClicked)=\"listCancelClicked($event)\"\r\n (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\r\n (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\r\n [editApprovalWorkflow] =\"editApprovalWorkflow\"\r\n ></app-approval-workflow>\r\n <!-- <app-select-approvers></app-select-approvers> -->\r\n\r\n <!-- <app-policy-access></app-policy-access> -->\r\n</ng-container>\r\n<ng-container *ngIf=\"showCreateDocuments\">\r\n <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\r\n [organization_id]=\"organization_id\"\r\n [member_obj_id]=\"member_obj_id\"\r\n [userInfo]=\"userInfo\"\r\n [policyId]=\"policyId\"\r\n [policyName]=\"policyForm.policyName\"\r\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n (editPolicy)=\"editPolicyFromDocuments()\"\r\n ></app-create-documents> -->\r\n <lib-document-section\r\n *ngIf=\"showCreateDocuments\"\r\n [organization_id]=\"organization_id\"\r\n [member_obj_id]=\"member_obj_id\"\r\n [userInfo]=\"userInfo\"\r\n [policyId]=\"policyId\"\r\n [policyName]=\"policyForm.policyName\"\r\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n (editPolicy)=\"editPolicyFromDocuments()\"\r\n ></lib-document-section>\r\n</ng-container>\r\n\r\n<app-assessment-list\r\n *ngIf=\"activeSelector === 'isAssessment'\"\r\n [program_ids]=\"''\"\r\n [isEdit]=\"policyForm?.assessment?.length\"\r\n (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\r\n [selectedAssessment]=\"policyForm?.assessment[0]\"\r\n (onAssessmentSelect)=\"\r\n onAssessmentSelect($event); saveSelectedList('isAssessment', false)\r\n \"\r\n></app-assessment-list>\r\n\r\n<app-owner-list\r\n *ngIf=\"activeSelector === 'approvers'\"\r\n [listHeading]=\"'Select Approvers'\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [usersList]=\"allApprovers\"\r\n [showWorkflow]=\"true\"\r\n [selectedUsers]=\"\r\n addMoreLevels\r\n ? []\r\n : policyForm.selectedApprovers[approversListIndex].approvers\r\n \"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n [mode]=\"mode\"\r\n [reviewerWorkflowType]=\"workflowType\"\r\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n [workflowList]=\"workflowList\"\r\n [workflowText]=\"'Approval Workflow'\"\r\n>\r\n</app-owner-list>\r\n\r\n<app-owner-list\r\n *ngIf=\"activeSelector === 'owners'\"\r\n [listHeading]=\"'Select User(s)'\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [usersList]=\"allApprovers\"\r\n [showWorkflow]=\"false\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('owners', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n [mode]=\"mode\"\r\n [selectedUsers]=\"policyForm?.policy_owners ?? []\"\r\n>\r\n</app-owner-list>\r\n",
|
|
8555
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}.disabled{opacity:.5;pointer-events:none}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-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-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:\"Poppins\",sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34AA44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::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-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;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:#FFFFFF;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 #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::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;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;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::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:8px 0!important;text-align:center}::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%;text-align:center}::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:#FFFFFF}::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:13px!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;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:14px;font-weight:500;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[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #DBDBDB;background:#FFFFFF;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[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#F1F1F1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .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[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .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[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #DBDBDB;background:#FFFFFF;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::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:#FFFFFF;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;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:100px}::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;position:relative;top:1px;font-size:8px}::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:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;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:#FFFFFF;box-shadow:0 0 5px #1e5dd345;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;box-shadow:0 3px 6px #1e5dd31a}::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;box-shadow:0 3px 6px #1e5dd31a}::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 #1e5dd345}::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:#FFFFFF;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::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:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;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 app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::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;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:26px;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:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;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;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;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;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:#FFFFFF;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 input,.form-group-row.active .right .vx-form-group .custom-input{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::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}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}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{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;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@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:#FFFFFF;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;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-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right{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-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right: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:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .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-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-month-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-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)}@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;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::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 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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;background:#ffffff}::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 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .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 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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:#0000000d!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:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px 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:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px 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-editor{display:block}::ng-deep marx-editor .editor-container{border-radius:4px;border:1px solid #DBDBDB;transition:all .2s ease-in-out}::ng-deep marx-editor .editor-container:hover,::ng-deep marx-editor .editor-container:focus-within{border:1px solid #1E5DD3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep marx-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep marx-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep marx-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep marx-editor .editor-container .editor-tools{border-top:1px solid #DBDBDB;border-radius:0 0 3px 3px}::ng-deep marx-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep 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 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 marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#F1F1F1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"]
|
|
8550
|
+
template: "<!-- <p>workflow-policy works!</p> -->\r\n\r\n<ng-container *ngIf=\"!showCreateDocuments\">\r\n <div class=\"workflow-policy\">\r\n <!-- Policy Name -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n alt=\"name\"\r\n *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">\r\n Policy Name <span class=\"required\">*</span>\r\n </label>\r\n <input\r\n type=\"text\"\r\n (keydown)=\"activeSelector = 'name'\"\r\n (focusin)=\"activateSelector('name', true)\"\r\n *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\r\n (focusout)=\"activateSelector('name', false)\"\r\n [ngModel]=\"policyForm.policyName\"\r\n (ngModelChange)=\"policyForm.policyName = changeName($event)\"\r\n placeholder=\"Name this policy\"\r\n />\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\r\n >\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{ policyForm.policyName }}</span>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n (click)=\"activateSelector('name', true)\"\r\n type=\"button\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n\r\n <p\r\n *ngIf=\"submitted && !policyForm.policyName.trim()\"\r\n [appScrollInView]=\"true\"\r\n class=\"error-message\"\r\n >\r\n Please enter a name for this policy.\r\n </p>\r\n <marx-editor\r\n [(ngModel)]=\"policyForm.policyNotes\"\r\n [editorConfig]=\"description\"\r\n ></marx-editor>\r\n <app-cs-switch\r\n [(ngValue)]=\"policyForm.availableOnPortal\"\r\n (ngValueChange)=\"availabilityOnPortal($event)\"\r\n >\r\n Do you want this policy to be available on the portal?\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\r\n \"\r\n placement=\"bottom-right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n >\r\n </app-cs-switch>\r\n <app-cs-switch\r\n *ngIf=\"policyForm.availableOnPortal\"\r\n [(ngValue)]=\"policyForm.acceptSuggestions\"\r\n >\r\n Accept suggestions\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\r\n \"\r\n placement=\"bottom-right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></app-cs-switch\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Policy Category -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'category' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedCategories?.length == 0 ||\r\n activeSelector === 'category'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedCategories?.length > 0 &&\r\n activeSelector !== 'category'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\"\r\n >Policy Category <span class=\"required\">*</span>\r\n </label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"policyForm?.selectedCategories?.length == 0\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('category', true)\"\r\n placeholder=\"Select a category for this policy.\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"policyForm?.selectedCategories?.length > 0\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"\r\n let category of policyForm?.selectedCategories?.slice(0, 1)\r\n \"\r\n >\r\n <i\r\n (click)=\"remove('category', category)\"\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"category.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ category.item_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n *ngIf=\"policyForm?.selectedCategories?.length > 1\"\r\n type=\"button\"\r\n appPopover\r\n (click)=\"category.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ policyForm?.selectedCategories?.slice(1).length }}\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\r\n [class.plus]=\"policyForm?.selectedCategories?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('category',category)\"></i>\r\n {{category.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\r\n appPopover (click)=\"category.popover()\" placement=\"right\">+\r\n {{policyForm?.selectedCategories?.slice(2).length}}</button>\r\n </div> -->\r\n <button\r\n *ngIf=\"activeSelector !== 'category'\"\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('category', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #category [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let category of policyForm?.selectedCategories | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('category', category)\"\r\n ></i\r\n >\r\n {{ category.item_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <p\r\n *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\r\n [appScrollInView]=\"true\"\r\n class=\"error-message\"\r\n >\r\n Please select the category for this policy.\r\n </p>\r\n </div>\r\n\r\n <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\r\n <ng-container *ngFor=\"let tag of policyForm?.customTags\">\r\n <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"tag.value\"\r\n placeholder=\"{{ tag.tagname }}\"\r\n />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Effective Date -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">Effective Date</label>\r\n <div class=\"date-time-picker\">\r\n <div class=\"picker-group\">\r\n <input\r\n type=\"text\"\r\n readonly\r\n placeholder=\"Select the effective date of the policy.\"\r\n [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n />\r\n <i class=\"icons\"></i>\r\n <dp-date-picker\r\n #datePicker\r\n (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\r\n [config]=\"dateConfig\"\r\n [(ngModel)]=\"policyForm.policyDueDate\"\r\n >\r\n </dp-date-picker>\r\n <div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatePicker($event)\"\r\n *ngIf=\"datePickerOverlay\"\r\n ></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Policy Owner -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'owners'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'owners' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\r\n <img\r\n *ngIf=\"!policyForm.policy_owners?.length\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm.policy_owners?.length\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <label class=\"vx-control-panel\">POLICY OWNER</label>\r\n </div>\r\n <div\r\n *ngIf=\"!policyForm.policy_owners?.length\"\r\n (click)=\"activateSelector('owners', true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n I am creating this Policy on behalf of someone else\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"policyForm.policy_owners?.length\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ policyForm?.policy_owners[0]?.member_name }}</span\r\n >\r\n\r\n <button\r\n *ngIf=\"policyForm?.policy_owners?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\r\n appPopover\r\n (click)=\"policyUserPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n + {{ policyForm?.policy_owners.length - 1 }}\r\n </button>\r\n </div>\r\n <div\r\n *ngIf=\"false\"\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\r\n >\r\n &\r\n </div>\r\n <div\r\n *ngIf=\"false\"\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >Samantha Jones</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"policyGroupPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +4\r\n </button>\r\n </div>\r\n <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let owner of policyForm?.policy_owners | slice : 1;\r\n let i = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"owner?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i\r\n (click)=\"remove('owners', owner, i + 1)\"\r\n class=\"icons\"\r\n ></i\r\n >\r\n {{ owner?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n Harshvardhan Kariwala\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <button\r\n (click)=\"activateSelector('owners', true)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Review -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewer' &&\r\n activeSelector !== 'reviewerFrequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\r\n <img\r\n *ngIf=\"!policyForm?.addReviewers\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.addReviewers\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">REVIEW</label>\r\n <div\r\n class=\"reviewSelection vx-p-3 vx-pb-0\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\r\n Does this policy need to be reviewed?\r\n </div>\r\n <app-cs-radio name=\"review-type\"\r\n [checked]=\"policyForm?.addReviewers\"\r\n (checkedEvent)=\"typeSelected(true)\"\r\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n YES\r\n </div></app-cs-radio\r\n >\r\n <app-cs-radio name=\"review-type\"\r\n [checked]=\"!policyForm?.addReviewers\"\r\n (checkedEvent)=\"typeSelected(false)\"\r\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\r\n NO\r\n </div></app-cs-radio\r\n >\r\n </div>\r\n\r\n <ng-container *ngIf=\"policyForm?.addReviewers\">\r\n <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\r\n <div\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n [class.active]=\"activeSelector === 'reviewer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewer' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n (click)=\"activateSelector('reviewer', true)\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the person responsible for reviewing this policy\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n [class.active]=\"activeSelector === 'reviewer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewer' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\r\n >\r\n <i\r\n (click)=\"remove('reviewer', reviewer)\"\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ reviewer?.member_name }}</span\r\n >\r\n </div>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n *ngIf=\"activeSelector !== 'reviewer'\"\r\n (click)=\"activateSelector('reviewer', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\r\n <div\r\n *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewerFrequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n >\r\n <div\r\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n When does this policy needs to be reviewed?\r\n </div>\r\n <div\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\r\n >\r\n SET A FREQUENCY\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewerFrequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\r\n >\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\" [appTooltip]=\"reviewerFrequencyPlaceholder\" placement=\"bottom-left\"\r\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n {{ reviewerFrequencyPlaceholder }}\r\n </div>\r\n <button\r\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n policyForm?.selectedReviewers?.length > 0 &&\r\n !policyForm?.review_frequency_details\r\n \"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select the review schedule for this policy.\r\n </p>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- New Approval Workflow -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'approvers'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'approvers' &&\r\n sideSelectorElements.includes(activeSelector)\"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedApprovers?.length == 0 ||\r\n activeSelector === 'approvers'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedApprovers?.length > 0 &&\r\n activeSelector !== 'approvers'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <label class=\"vx-control-panel\"\r\n >APPROVAL <span class=\"required\">*</span></label\r\n >\r\n <button (click)=\"createApprovalWorkflow(); activateSelector('approvers', true)\"\r\n class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\r\n >\r\n CREATE A NEW APPROVAL WORKFLOW\r\n </button>\r\n </div>\r\n <div *ngIf=\"selectedWorkflow?.length === 0\"\r\n (click)=\"clickApprovalWorkflow(true); activateSelector('approvers', true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Select the approval workflow for this policy\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"selectedWorkflow?.length > 0\" class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\">\r\n <div\r\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{selectedWorkflow[0]?.workflow_name\r\n }}</span\r\n >\r\n </div>\r\n <button (click)=\"editWorkflow(selectedWorkflow[0])\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\r\n <div *ngFor=\"let approval of selectedWorkflow[0]?.approval_workflow; let approvalIndex = index\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n >\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <div class=\"level-left vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block\">\r\n <div\r\n class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n [appTooltip]=\"approval?.level1\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{approval?.level1\r\n }}\r\n </div>\r\n <div\r\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n >\r\n {{approval?.type\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\r\n >\r\n <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n > -->\r\n <div *ngIf=\"\r\n approval?.type?.toLowerCase() ===\r\n 'sequential' && approval?.approvers?.length<2\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{\r\n 1 == approval?.approvers?.length\r\n ? \"Final\"\r\n : 1\r\n }}\r\n </div>\r\n <div *ngIf=\"approval?.approvers?.length > 1\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n 1\r\n </div>\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"approval?.approvers[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{approval?.approvers[0]?.member_name}}</span\r\n >\r\n <button *ngIf=\"approval?.approvers?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"workflowPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{approval?.approvers?.length - 1}}\r\n </button>\r\n </div>\r\n <app-popover #workflowPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let approver of approval?.approvers | slice : 1; let approvalIndex=index\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"approver?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <!-- <i class=\"icons\"></i> -->\r\n <span *ngIf=\"approval?.type?.toLowerCase()=== 'sequential'\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >{{\r\n approvalIndex+1 ===\r\n approval?.approvers?.length - 1\r\n ? \"Final\"\r\n : approvalIndex + 2\r\n }}</span\r\n >\r\n <span *ngIf=\"approval?.type?.toLowerCase() !== 'sequential'\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >{{approvalIndex+2}}</span\r\n >\r\n {{approver?.member_name}}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <!-- <div class=\"vx-d-flex vx-align-center\">\r\n <button (click)=\"editLevelClicked(approval,approvalIndex)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n <button (click)=\"deleteLevel(approvalIndex)\"\r\n class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> DELETE\r\n </button>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Policy Access -->\r\n <div\r\n *ngIf=\"false\"\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/lock-scope.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <label class=\"vx-control-panel\">POLICY ACCESS</label>\r\n </div>\r\n <div\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Who should be able to view this policy?\r\n </div>\r\n </div>\r\n\r\n <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3\">\r\n <div\r\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >Samantha Jones</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"policyAccessPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +4\r\n </button>\r\n </div>\r\n <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n Harshvardhan Kariwala\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n\r\n <div class=\"vx-mt-4 vx-mb-2\">\r\n <app-cs-radio\r\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n Everyone who has access to this Policy Category\r\n </div></app-cs-radio\r\n >\r\n <app-cs-radio class=\"vx-mt-1\"\r\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\r\n Select users/groups\r\n </div></app-cs-radio\r\n >\r\n </div>\r\n </div>\r\n\r\n <div class=\"vx-mt-2\">\r\n <app-cs-switch\r\n >ACCEPT SUGGESTIONS\r\n <i\r\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n [appTooltip]=\"'Accept suggestions info text here...'\"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></app-cs-switch\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Attestations -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"false\"\r\n [class.disabled]=\"false\"\r\n *ngIf=\"false\"\r\n >\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/attestations.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"false\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <label class=\"vx-control-panel\">ATTESTATIONS</label>\r\n </div>\r\n <div\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Select the persons required to attest to this Policy\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >Samantha Jones</span\r\n >\r\n <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"policyAttestationPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +4\r\n </button>\r\n </div>\r\n <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"'Harshvardhan Kariwala'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n Harshvardhan Kariwala\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n\r\n <div class=\"vx-mt-2\">\r\n <app-cs-switch\r\n >REQUIRES E-SIGNATURE FOR ATTESTATION\r\n <i\r\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\r\n [appTooltip]=\"\r\n 'Requires e-signature for attestation info text here...'\r\n \"\r\n placement=\"bottom-right\"\r\n delay=\"0\"\r\n type=\"white\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></app-cs-switch\r\n >\r\n </div>\r\n\r\n <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\r\n <div\r\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n What is the attestation schedule for this<br />policy?\r\n </div>\r\n <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\r\n SET A FREQUENCY\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\r\n Every Wednesday by 11:59 pm\r\n </div>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n\r\n <label class=\"vx-control-panel vx-mt-2\"\r\n >ASSESSMENT OF UNDERSTANDING</label\r\n >\r\n <div\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n of the policy.\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\r\n </div>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Approval Workflow -->\r\n <div\r\n class=\"form-group-row\"\r\n *ngIf=\"false\"\r\n [class.active]=\"activeSelector === 'approvers'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'approvers' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedApprovers?.length == 0 ||\r\n activeSelector === 'approvers'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedApprovers?.length > 0 &&\r\n activeSelector !== 'approvers'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div\r\n class=\"vx-form-group approval-workflow\"\r\n [class.disabled]=\"policyApprovalFlag !== 0\"\r\n >\r\n <label class=\"vx-control-panel\">\r\n Approval workflow <span class=\"required\">*</span>\r\n <button\r\n (click)=\"\r\n activateSelector('approvers', true);\r\n addMoreLevels = true;\r\n workflowType = 'SEQUENTIAL'\r\n \"\r\n class=\"button\"\r\n >\r\n Create a new Approval Workflow\r\n </button>\r\n </label>\r\n <div\r\n class=\"select\"\r\n [class.disabled]=\"approverWorkFlowList?.length == 0\"\r\n *ngIf=\"\r\n policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\r\n policyForm?.selectedApprovers.length == 0\r\n \"\r\n >\r\n <cs-select\r\n [ngModel]=\"selectedApprovalWorkflow\"\r\n (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n [placeholder]=\"'Select approval workflow for this policy'\"\r\n name=\"selectedApprovalWorkflow\"\r\n [setMaxWidth]=\"true\"\r\n >\r\n <cs-option\r\n *ngFor=\"let data of approverWorkFlowList\"\r\n [value]=\"data\"\r\n >\r\n {{ data.workflow_name }}\r\n </cs-option>\r\n <cs-option\r\n [value]=\"-1\"\r\n (click)=\"\r\n activateSelector('approvers', true);\r\n addMoreLevels = true;\r\n workflowType = 'SEQUENTIAL'\r\n \"\r\n >Create a new approval workflow</cs-option\r\n >\r\n </cs-select>\r\n </div>\r\n <ng-container\r\n *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\r\n >\r\n <div\r\n class=\"selected\"\r\n *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\r\n >\r\n <div class=\"workflow-label\">\r\n <p class=\"title\">Level {{ i + 1 }}</p>\r\n <p class=\"description\">{{ level.name }}</p>\r\n </div>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <div class=\"chip-container\">\r\n <span\r\n class=\"chip\"\r\n *ngFor=\"\r\n let approver of level.approvers.slice(0, 1);\r\n let j = index\r\n \"\r\n ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\r\n ></i\r\n >\r\n <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\r\n j + 1\r\n }}</span\r\n >{{ approver.member_name }}</span\r\n >\r\n\r\n <button\r\n class=\"count\"\r\n *ngIf=\"level.approvers?.length > 1\"\r\n type=\"button\"\r\n appPopover\r\n (click)=\"labelName.popover()\"\r\n placement=\"right\"\r\n >\r\n +\r\n\r\n {{ level.approvers.slice(1).length }}\r\n </button>\r\n <app-popover #labelName [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let approver of level.approvers | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n class=\"icons\"\r\n (click)=\"remove('approvers', approver, i)\"\r\n ></i\r\n >\r\n <span\r\n class=\"step\"\r\n *ngIf=\"level.name == 'SEQUENTIAL'\"\r\n >\r\n {{\r\n j == level.approvers.slice(1).length - 1\r\n ? \"Final\"\r\n : j + 2\r\n }}\r\n </span>\r\n {{ approver.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"\r\n activateSelector('approvers', true, level.name);\r\n approversListIndex = i\r\n \"\r\n >\r\n <i class=\"icons\"></i>Edit\r\n </button>\r\n <button\r\n class=\"close-btn\"\r\n (click)=\"remove('workflowLevel', level, i)\"\r\n >\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n policyForm?.selectedApprovers?.length == 0 &&\r\n policyApprovalFlag === 0\r\n \"\r\n [appScrollInView]=\"true\"\r\n class=\"error-message\"\r\n >\r\n Select or create an approval workflow for this policy.\r\n </p>\r\n\r\n <label\r\n class=\"vx-control-panel\"\r\n *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\r\n ><button\r\n class=\"button\"\r\n (click)=\"\r\n activateSelector('approvers', true);\r\n addMoreLevels = true;\r\n workflowType = 'SEQUENTIAL'\r\n \"\r\n >\r\n + Add More Levels\r\n </button></label\r\n >\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Who / now Attestation -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'assignees'\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'assignees' &&\r\n sideSelectorElements.includes(activeSelector)\"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedAssignees?.length == 0 ||\r\n activeSelector === 'assignees'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/who.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedAssignees?.length > 0 &&\r\n activeSelector !== 'assignees'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">Attestation?</label>\r\n <div class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\" *ngIf=\"\r\n (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\r\n (policyForm?.selectedAssignees?.length == 0 &&\r\n groupEnabled &&\r\n policyForm?.selectedGroupAssignee.length == 0)\r\n \" (click)=\"activateSelector('assignees', true)\">\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">Select the persons responsible for attesting this policy.</div>\r\n </div>\r\n\r\n <div class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\" *ngIf=\"\r\n policyForm?.selectedAssignees?.length > 0 ||\r\n policyForm?.selectedGroupAssignee?.length > 0\r\n \">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\r\n <ng-container *ngFor=\"let assignee of policyForm?.selectedAssignees?.slice(0, 1)\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('assignees', assignee)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"assignee.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ assignee.employee_name }}</span>\r\n </ng-container>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"assigneePopover.popover()\" placement=\"right\" *ngIf=\"policyForm?.selectedAssignees?.length > 1\">+{{ policyForm?.selectedAssignees?.slice(1).length }}</button>\r\n </div>\r\n <ng-container *ngIf=\"groupEnabled\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('assignees', policyForm?.selectedAssignees[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.selectedAssignees[0]?.employee_name }}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"UserPopover.popover()\" placement=\"right\" *ngIf=\"policyForm?.selectedAssignees.length > 1\">+{{ policyForm?.selectedAssignees.length - 1 }}</button>\r\n </div>\r\n <div class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\" *ngIf=\"policyForm?.selectedAssignees.length > 0 && policyForm?.selectedGroupAssignee.length > 0\">&</div>\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('groupAssignees', policyForm?.selectedGroupAssignee[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.selectedGroupAssignee[0]?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{policyForm?.selectedGroupAssignee[0]?.group_name}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"group.popover()\" placement=\"right\" *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\">+{{ policyForm?.selectedGroupAssignee.length - 1 }}</button>\r\n </div>\r\n </ng-container>\r\n <button class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\" (click)=\"activateSelector('assignees', true)\"><i class=\"icons vx-mr-1\"></i> EDIT</button>\r\n </div>\r\n\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n ((policyForm?.selectedAssignees?.length == 0 &&\r\n policyForm?.frequency_details &&\r\n !groupEnabled) ||\r\n (policyForm?.selectedAssignees?.length == 0 &&\r\n policyForm.selectedGroupAssignee.length == 0 &&\r\n policyForm?.frequency_details &&\r\n groupEnabled))\r\n \"\r\n id=\"whovalidatemsg\"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select the persons required to attest to this Policy.\r\n </p>\r\n <app-cs-switch\r\n [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\r\n [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\r\n class=\"who-toggle\"\r\n >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\r\n <i\r\n class=\"icons\"\r\n [appTooltip]=\"\r\n 'If selected, the readers will be required to attest this policy using their electronic signature.'\r\n \"\r\n placement=\"bottom-right\"\r\n type=\"white\"\r\n delay=\"0\"\r\n [tooltipMandatory]=\"true\"\r\n ></i\r\n ></app-cs-switch\r\n >\r\n <app-popover #assigneePopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let assignee of policyForm?.selectedAssignees | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n ></i\r\n >\r\n {{ assignee.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #UserPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let assignee of policyForm?.selectedAssignees | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\r\n ></i\r\n >\r\n {{ assignee.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #group [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let data of policyForm?.selectedGroupAssignee | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\r\n ></i\r\n >\r\n {{ data.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n\r\n <!-- overseer -->\r\n <app-popover #overseerPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let overseer of policyForm?.CCEmail | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\r\n ></i\r\n >\r\n {{ overseer?.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let data of policyForm?.CCGroupEmail | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\r\n ></i\r\n >\r\n {{ data?.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <!-- overseer end -->\r\n\r\n <!-- overseer fail start -->\r\n <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let overseer of policyForm?.CCFailEmail | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\r\n ></i\r\n >\r\n {{ overseer?.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let data of policyForm?.CCFailEmailGroup | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i\r\n class=\"icons\"\r\n (click)=\"remove('ccGroupFailEmail', data)\"\r\n ></i\r\n >\r\n {{ data?.group_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <!-- overseer fail end -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- When -->\r\n <div\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'frequency'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'frequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.frequency_details\">\r\n <img\r\n *ngIf=\"\r\n !policyForm?.frequency_details || activeSelector === 'frequency'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.frequency_details && activeSelector !== 'frequency'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">When?</label>\r\n\r\n <div\r\n *ngIf=\"policyForm?.frequency_details == ''\"\r\n class=\"select button-sec\"\r\n >\r\n <div\r\n class=\"custom-input frequency-custom-input\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n {{ frequencyPlaceholder }}\r\n </div>\r\n\r\n <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\r\n Set A frequency\r\n </button>\r\n </div>\r\n <div\r\n *ngIf=\"policyForm?.frequency_details != ''\"\r\n class=\"selected button-sec\"\r\n >\r\n <span class=\"chip\">{{ frequencyPlaceholder }}</span>\r\n <button\r\n *ngIf=\"activeSelector !== 'frequency'\"\r\n type=\"button\"\r\n class=\"edit\"\r\n (click)=\"activateSelector('frequency', true)\"\r\n >\r\n <i class=\"icons\"></i>Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n ((policyForm?.selectedAssignees?.length > 0 &&\r\n !policyForm?.frequency_details &&\r\n !groupEnabled) ||\r\n ((policyForm?.selectedAssignees?.length > 0 ||\r\n policyForm?.selectedGroupAssignee?.length > 0) &&\r\n !policyForm?.frequency_details &&\r\n groupEnabled))\r\n \"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select an attestation schedule for this policy.\r\n </p>\r\n\r\n <!-- <label class=\"vx-control-panel\">Effective Date</label>\r\n <div class=\"date-time-picker\">\r\n <div class=\"picker-group\">\r\n <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\r\n [value]=\"policyForm.policyDueDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\r\n <i class=\"icons\"></i>\r\n <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\r\n [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\r\n </dp-date-picker>\r\n <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Checkpoints / Assessment of Understanding -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"true\"\r\n [class.active]=\"activeSelector === 'checkpoints'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'checkpoints' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.checkpointDetails?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.checkpointDetails?.length == 0 ||\r\n activeSelector === 'checkpoints'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/checkpoints.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.checkpointDetails?.length > 0 &&\r\n activeSelector !== 'checkpoints'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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 Assessment of Understanding\r\n <!-- <button *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\r\n </label>\r\n <div\r\n class=\"select\"\r\n *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\r\n (click)=\"activateSelector('checkpoints', true)\"\r\n >\r\n <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\r\n <div class=\"custom-input\">\r\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\r\n of the policy.\r\n </div>\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\r\n >\r\n <!-- <div class=\"chip-container\">\r\n <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\r\n\r\n <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\r\n\r\n <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\r\n\r\n </div> -->\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">{{\r\n policyForm?.checkpointDetails?.length +\r\n (policyForm?.checkpointDetails?.length > 1\r\n ? \" Questions\"\r\n : \" Question\")\r\n }}</span>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('checkpoints', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\"></i>\r\n {{ checkpoint?.question }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Risk Classification -->\r\n <div\r\n class=\"form-group-row\"\r\n *ngIf=\"showRiskClassification && false\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/risks.svg\"\r\n alt=\"im\"\r\n *ngIf=\"!policyForm?.riskRating\"\r\n />\r\n\r\n <svg\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n *ngIf=\"policyForm?.riskRating\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Classification</label>\r\n <div class=\"classification\">\r\n <label\r\n class=\"low\"\r\n *ngFor=\"let class of riskClassification\"\r\n [ngClass]=\"[class.class]\"\r\n >\r\n <input\r\n type=\"radio\"\r\n name=\"classification\"\r\n [value]=\"class.value\"\r\n [checked]=\"policyForm?.riskRating === class.value\"\r\n [(ngModel)]=\"policyForm.riskRating\"\r\n />\r\n <span>{{ class.name }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Responsibility Center -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"policyForm.addResponsibilityCenters\"\r\n [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'rc' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Responsibility Center</label>\r\n <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('rc', true)\"\r\n placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <ng-container *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('rc', rc)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"rc.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ rc.item_name }}</span>\r\n </ng-container>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"rcPopover.popover()\" placement=\"right\" *ngIf=\"policyForm?.selectedRCs?.length > 1\">+{{ policyForm?.selectedRCs?.slice(1).length }}</button>\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('rc', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #rcPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let rc of policyForm?.selectedRCs | slice : 1;\r\n let j = index\r\n \"\r\n >\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\r\n <!-- Version -->\r\n <div\r\n *ngIf=\"policyForm.addVersion\"\r\n class=\"form-group-row\"\r\n [class.disabled]=\"\r\n activeSelector && sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/associated-risks.svg\"\r\n alt=\"name\"\r\n *ngIf=\"!policyForm.policy_version\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm.policy_version\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">VERSION</label>\r\n <input\r\n [(ngModel)]=\"policyForm.policy_version\"\r\n (change)=\"onVersion($event)\"\r\n type=\"text\"\r\n placeholder=\"Specify the policy version.\"\r\n />\r\n <p\r\n *ngIf=\"!isVersionValid\"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n {{ versionErrorMessage }}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Reviewer -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"policyForm.addReviewers && false\"\r\n [class.active]=\"activeSelector === 'reviewer'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'reviewer' &&\r\n activeSelector !== 'reviewerFrequency' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\r\n >\r\n <img\r\n *ngIf=\"\r\n policyForm?.selectedReviewers?.length == 0 ||\r\n activeSelector === 'reviewer'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/reviewer.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n policyForm?.selectedReviewers?.length > 0 &&\r\n activeSelector !== 'reviewer'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"select\"\r\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('reviewer', true)\"\r\n placeholder=\"Select the person responsible for reviewing this policy\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\r\n >\r\n\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\">\r\n <ng-container *ngFor=\"let reviewer of policyForm?.selectedReviewers\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('reviewer', reviewer)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"reviewer.member_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ reviewer.member_name }}</span>\r\n </ng-container>\r\n </div>\r\n \r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('reviewer', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n policyForm?.selectedReviewers?.length == 0 &&\r\n policyForm?.review_frequency_details\r\n \"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select a reviewer for this policy.\r\n </p>\r\n\r\n <label class=\"vx-control-panel\">When? </label>\r\n\r\n <div\r\n *ngIf=\"policyForm?.review_frequency_details == ''\"\r\n class=\"select button-sec\"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n [placeholder]=\"reviewerFrequencyPlaceholder\"\r\n readonly\r\n />\r\n <button\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n type=\"button\"\r\n >\r\n Set A frequency\r\n </button>\r\n </div>\r\n <div\r\n *ngIf=\"policyForm?.review_frequency_details != ''\"\r\n class=\"selected button-sec\"\r\n >\r\n <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\r\n <button\r\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\r\n type=\"button\"\r\n class=\"edit\"\r\n (click)=\"activateSelector('reviewerFrequency', true)\"\r\n >\r\n <i class=\"icons\"></i>Edit\r\n </button>\r\n </div>\r\n <p\r\n *ngIf=\"\r\n submitted &&\r\n policyForm?.selectedReviewers?.length > 0 &&\r\n !policyForm?.review_frequency_details\r\n \"\r\n class=\"error-message\"\r\n [appScrollInView]=\"true\"\r\n >\r\n Select the review schedule for this policy.\r\n </p>\r\n\r\n <app-format-and-evidence\r\n (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\r\n #formatEvidence\r\n [mode]=\"'policyReviewer'\"\r\n [organization_id]=\"organization_id\"\r\n [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\r\n >\r\n </app-format-and-evidence>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Overseer -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"policyForm.addOverseers\"\r\n [class.active]=\"\r\n activeSelector === 'ccEmail' || activeSelector === 'ccFail'\r\n \"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'ccEmail' &&\r\n activeSelector !== 'ccFail' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"\r\n policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\r\n \"\r\n >\r\n <img\r\n *ngIf=\"\r\n (policyForm?.CCFailEmail?.length == 0 &&\r\n policyForm?.CCEmail?.length == 0) ||\r\n activeSelector === 'ccEmail' ||\r\n activeSelector === 'ccFail'\r\n \"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"\r\n (policyForm?.CCFailEmail?.length > 0 ||\r\n policyForm?.CCEmail?.length > 0) &&\r\n activeSelector !== 'ccEmail' &&\r\n activeSelector !== 'ccFail'\r\n \"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\r\n class=\"select\"\r\n *ngIf=\"\r\n policyForm?.CCEmail?.length == 0 &&\r\n policyForm?.CCGroupEmail.length == 0\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('ccEmail', true)\"\r\n placeholder=\"Who should have oversight of this policy?\"\r\n readonly\r\n />\r\n </div>\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n policyForm?.CCEmail?.length > 0 ||\r\n policyForm?.CCGroupEmail.length > 0\r\n \"\r\n >\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\r\n <ng-container *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccEmail', ccEmail)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccEmail.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccEmail.employee_name }}</span>\r\n </ng-container>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"ccEmailPopover.popover()\" placement=\"right\" *ngIf=\"policyForm?.CCEmail?.length > 1\">+{{ policyForm?.CCEmail?.slice(1).length }}</button>\r\n </div>\r\n\r\n \r\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCEmail[0].employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.CCEmail[0].employee_name }}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"overseerPopover.popover()\" placement=\"right\" *ngIf=\"policyForm?.CCEmail?.length > 1\">+{{ policyForm?.CCEmail?.length - 1 }}</button>\r\n </div>\r\n\r\n <div\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n policyForm?.CCEmail.length > 0 &&\r\n policyForm?.CCGroupEmail?.length > 0\r\n \"\r\n >&</div\r\n >\r\n\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"policyForm?.CCGroupEmail.length > 0\">\r\n <ng-container *ngFor=\"let program of responsibilityForm?.program\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.CCGroupEmail[0]?.group_name }}</span>\r\n </ng-container>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"overseerGroup.popover()\" placement=\"right\" *ngIf=\"policyForm?.CCGroupEmail?.length > 1\">+{{ policyForm?.CCGroupEmail?.length - 1 }}}</button>\r\n </div>\r\n </div>\r\n\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('ccEmail', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n\r\n <div\r\n class=\"select\"\r\n *ngIf=\"\r\n policyForm?.CCFailEmail?.length == 0 &&\r\n policyForm?.CCFailEmailGroup?.length == 0\r\n \"\r\n >\r\n <input\r\n type=\"text\"\r\n (click)=\"activateSelector('ccFail', true)\"\r\n placeholder=\"Who should be notified if the policy is not attested on time?\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div\r\n class=\"selected\"\r\n *ngIf=\"\r\n policyForm?.CCFailEmail?.length > 0 ||\r\n policyForm?.CCFailEmailGroup?.length > 0\r\n \"\r\n >\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"!groupEnabled\">\r\n <ng-container *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccFail', ccFail)\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"ccFail.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ ccFail.employee_name }}</span>\r\n </ng-container>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"ccFailPopover.popover()\" placement=\"right\" *ngIf=\"policyForm?.CCFailEmail?.length > 1\">+{{ policyForm?.CCFailEmail?.slice(1).length }}</button>\r\n </div>\r\n\r\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.CCFailEmail[0]?.employee_name }}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\" appPopover (click)=\"overseerFailPopover.popover()\" placement=\"right\" *ngIf=\"policyForm?.CCFailEmail?.length > 1\">+{{ policyForm?.CCFailEmail?.length - 1 }}</button>\r\n </div>\r\n\r\n <div\r\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\r\n *ngIf=\"\r\n policyForm?.CCFailEmail?.length > 0 &&\r\n policyForm?.CCFailEmailGroup?.length > 0\r\n \"\r\n >&</div>\r\n\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"overseerFailGroup.popover()\" placement=\"right\" *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\">+{{ policyForm?.CCFailEmailGroup?.length - 1 }}</button>\r\n </div>\r\n\r\n </div>\r\n <button\r\n class=\"edit\"\r\n type=\"button\"\r\n (click)=\"activateSelector('ccFail', true)\"\r\n >\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </div>\r\n <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let ccEmail of policyForm?.CCEmail | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\r\n ></i\r\n >\r\n {{ ccEmail.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let ccFail of policyForm?.CCFailEmail | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\r\n ></i\r\n >\r\n {{ ccFail.employee_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Related Documents -->\r\n <div\r\n class=\"form-group-row\"\r\n [appScrollInView]=\"scrollToBottom\"\r\n *ngIf=\"policyForm.addAssociatedDocuments\"\r\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\r\n >\r\n <div class=\"left\">\r\n <img\r\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/format-evidence.svg\"\r\n alt=\"im\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">RELATED DOCUMENTS</label>\r\n <app-format-and-evidence\r\n (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\r\n [mode]=\"'policy'\"\r\n [organization_id]=\"organization_id\"\r\n [formatEvidanceData]=\"policyForm?.associatedDocuments\"\r\n ></app-format-and-evidence>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Link Programs & Responsibilities -->\r\n <div\r\n *ngIf=\"policyForm?.addLinkProgram\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'linkProgram'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'linkProgram' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div\r\n class=\"left\"\r\n [class.checked]=\"\r\n policyForm?.programSelectedValues?.program?.category_id\r\n \"\r\n >\r\n <img\r\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/link-items.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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 >LINK PROGRAMS & RESPONSIBILITIES</label\r\n >\r\n <div\r\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\r\n (click)=\"activateSelector('linkProgram', true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Select Programs & responsibilities that are<br />associated with\r\n this policy.\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i\r\n (click)=\"\r\n remove('linkProgram', policyForm?.programSelectedValues)\r\n \"\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ policyForm?.programSelectedValues?.program?.name }}</span\r\n >\r\n <!-- <button\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"programResponsibilityPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +4\r\n </button> -->\r\n </div>\r\n <app-popover\r\n #programResponsibilityPopover\r\n [dontCloseonClick]=\"true\"\r\n >\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"\r\n 'Reporting information security weaknesses'\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n Reporting information security weaknesses\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <button\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n (click)=\"activateSelector('linkProgram', true)\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Link Assessment -->\r\n <div\r\n *ngIf=\"policyForm.addLinkAssessment\"\r\n class=\"form-group-row\"\r\n [class.active]=\"activeSelector === 'isAssessment'\"\r\n [class.disabled]=\"\r\n activeSelector &&\r\n activeSelector !== 'isAssessment' &&\r\n sideSelectorElements.includes(activeSelector)\r\n \"\r\n >\r\n <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\r\n <img\r\n *ngIf=\"!policyForm?.assessment?.length\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/assessments.svg\"\r\n alt=\"\"\r\n />\r\n\r\n <svg\r\n *ngIf=\"policyForm?.assessment?.length\"\r\n class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 52 52\"\r\n >\r\n <circle\r\n class=\"checkIcon__circle\"\r\n cx=\"26\"\r\n cy=\"26\"\r\n r=\"25\"\r\n fill=\"none\"\r\n />\r\n <path\r\n class=\"checkIcon__check\"\r\n fill=\"none\"\r\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\r\n />\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\">LINK ASSESSMENTS</label>\r\n <div\r\n *ngIf=\"policyForm?.assessment?.length === 0\"\r\n (click)=\"activateSelector('isAssessment', true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\r\n Select assessments that are associated with this<br />policy.\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"policyForm?.assessment?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\r\n >\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"\r\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{\r\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\r\n }}</span\r\n >\r\n </div>\r\n <app-popover\r\n #programResponsibilityPopover\r\n [dontCloseonClick]=\"true\"\r\n >\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"\r\n assessment?.assessmentDetails?.assessment_name\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n {{ assessment?.assessmentDetails?.assessment_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n <button\r\n (click)=\"activateSelector('isAssessment', true)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <app-checkbox-list\r\n [config]=\"categoryConfig\"\r\n [twoColumn]=\"false\"\r\n [itemsList]=\"categoryList\"\r\n [selectedItems]=\"policyForm.selectedCategories\"\r\n [identifierKey]=\"'_id'\"\r\n [displayKey]=\"'item_name'\"\r\n [tooltipKey]=\"'item_name'\"\r\n *ngIf=\"activeSelector === 'category'\"\r\n (saveList)=\"saveSelectedList('category', $event)\"\r\n (closeList)=\"disableSelector()\"\r\n >\r\n </app-checkbox-list>\r\n <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\r\n [itemsList]=\"\"\r\n [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\r\n *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\r\n (closeList)=\"fieldDeselector('ISSUE_CC')\">\r\n</app-checkbox-list> -->\r\n\r\n <app-responsibility-centers-list\r\n *ngIf=\"activeSelector === 'rc'\"\r\n [responsibilityCentersList]=\"rcList\"\r\n [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\r\n [rcIdKey]=\"'item_id'\"\r\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\r\n (closeRcList)=\"disableSelector()\"\r\n >\r\n </app-responsibility-centers-list>\r\n\r\n <app-users-radio-list\r\n *ngIf=\"activeSelector === 'reviewer'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [usersList]=\"allReviewers\"\r\n [selectedUsers]=\"policyForm.selectedReviewers\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n >\r\n </app-users-radio-list>\r\n\r\n <app-owner-list\r\n *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\r\n [usersList]=\"overseersList\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [selectedUsers]=\"policyForm.CCEmail\"\r\n [userIdKey]=\"'employee_id'\"\r\n [itemNameKey]=\"'employee_name'\"\r\n (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n >\r\n </app-owner-list>\r\n\r\n <user-group-list\r\n *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\r\n [groupEnabled]=\"true\"\r\n [userlist]=\"overseersList\"\r\n [groupList]=\"overseerGroupsList\"\r\n [selectedUsers]=\"policyForm.CCEmail\"\r\n [selectedGroups]=\"policyForm.CCGroupEmail\"\r\n (save)=\"saveSelectedList('ccEmail', $event)\"\r\n (cancel)=\"disableSelector()\"\r\n [featureflag]=\"groupEnabled\"\r\n >\r\n </user-group-list>\r\n\r\n <app-owner-list\r\n *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\r\n [usersList]=\"overseersList\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [selectedUsers]=\"policyForm.CCFailEmail\"\r\n [userIdKey]=\"'employee_id'\"\r\n [itemNameKey]=\"'employee_name'\"\r\n (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n >\r\n </app-owner-list>\r\n\r\n <user-group-list\r\n *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\r\n [groupEnabled]=\"true\"\r\n [userlist]=\"overseersList\"\r\n [groupList]=\"overseerGroupsList\"\r\n [selectedUsers]=\"policyForm.CCFailEmail\"\r\n [selectedGroups]=\"policyForm.CCFailEmailGroup\"\r\n (save)=\"saveSelectedList('ccFail', $event)\"\r\n (cancel)=\"disableSelector()\"\r\n [featureflag]=\"groupEnabled\"\r\n >\r\n </user-group-list>\r\n\r\n <app-group-users-list\r\n *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\r\n [usersList]=\"assigneesList\"\r\n [groupsList]=\"groupsList\"\r\n [selectedUsers]=\"policyForm.selectedAssignees\"\r\n [userIdKey]=\"'my_member_id'\"\r\n (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n >\r\n </app-group-users-list>\r\n\r\n <user-group-list\r\n *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\r\n [groupEnabled]=\"true\"\r\n [userlist]=\"ownerlist\"\r\n [groupList]=\"groupsList\"\r\n (save)=\"saveSelectedList('assignees', $event)\"\r\n (cancel)=\"disableSelector()\"\r\n [selectedGroups]=\"policyForm.selectedGroupAssignee\"\r\n [selectedUsers]=\"policyForm.selectedAssignees\"\r\n [featureflag]=\"groupEnabled\"\r\n >\r\n </user-group-list>\r\n\r\n <app-owner-list\r\n *ngIf=\"activeSelector === 'approvers' && false\"\r\n [listHeading]=\"'Select Approvers'\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [usersList]=\"allApprovers\"\r\n [showWorkflow]=\"true\"\r\n [selectedUsers]=\"\r\n addMoreLevels\r\n ? []\r\n : policyForm.selectedApprovers[approversListIndex].approvers\r\n \"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n [mode]=\"mode\"\r\n [reviewerWorkflowType]=\"workflowType\"\r\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n [workflowList]=\"workflowList\"\r\n [workflowText]=\"'Approval Workflow'\"\r\n >\r\n </app-owner-list>\r\n\r\n <app-frequency-container\r\n *ngIf=\"activeSelector === 'frequency'\"\r\n [mode]=\"'policy'\"\r\n [frequencyDetails]=\"frequencyDetails\"\r\n (selectedFrequency)=\"frequencyData($event)\"\r\n [feature]=\"feature\"\r\n [pageType]=\"'policy'\"\r\n (closeFrequency)=\"disableSelector()\"\r\n ></app-frequency-container>\r\n\r\n <app-frequency-container\r\n *ngIf=\"activeSelector === 'reviewerFrequency'\"\r\n [mode]=\"'reviewerFrequency'\"\r\n [frequencyDetails]=\"reviewerFrequencyDetails\"\r\n (selectedFrequency)=\"reviewerFrequencyData($event)\"\r\n [feature]=\"feature\"\r\n [pageType]=\"'policy'\"\r\n (closeFrequency)=\"disableSelector()\"\r\n ></app-frequency-container>\r\n\r\n <vc-link-program\r\n *ngIf=\"activeSelector === 'linkProgram'\"\r\n (close)=\"disableSelector()\"\r\n [policy]=\"policyForm\"\r\n [selectedProgram]=\"policyForm?.programSelectedValues\"\r\n [mode]=\"mode\"\r\n [selectedLinkProgram]=\"selectedLinkProgram\"\r\n (changeTab)=\"changeTab('linkedPrograms')\"\r\n (updatedProgramDetails)=\"updatedProgramDetails($event)\"\r\n >\r\n </vc-link-program>\r\n\r\n <app-checkpoints-policy-container\r\n (closeCheckPoint)=\"disableSelector()\"\r\n [checkpointData]=\"policyForm?.checkpointDetails\"\r\n [requiredPoint]=\"policyForm?.passingMarks\"\r\n *ngIf=\"activeSelector === 'checkpoints'\"\r\n (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\r\n ></app-checkpoints-policy-container>\r\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n\r\n <app-approval-workflow\r\n *ngIf=\"enableApprovalWorkflow\"\r\n [selectedCategory]=\"policyForm?.selectedCategories\"\r\n [approverWorkFlowList]=\"approverWorkFlowList\"\r\n [allApprovers]=\"allApprovers\"\r\n (listCancelClicked)=\"listCancelClicked($event)\"\r\n (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\r\n (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\r\n [editApprovalWorkflow] =\"editApprovalWorkflow\"\r\n [createApprovalClick] = \"createApprovalClick\"\r\n (closeCreateClicked) = \"closeClickedCreateForm()\"\r\n [editWorkflowLevel]=\"editWorkflowLevel\"\r\n ></app-approval-workflow>\r\n <!-- <app-select-approvers></app-select-approvers> -->\r\n\r\n <!-- <app-policy-access></app-policy-access> -->\r\n</ng-container>\r\n<ng-container *ngIf=\"showCreateDocuments\">\r\n <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\r\n [organization_id]=\"organization_id\"\r\n [member_obj_id]=\"member_obj_id\"\r\n [userInfo]=\"userInfo\"\r\n [policyId]=\"policyId\"\r\n [policyName]=\"policyForm.policyName\"\r\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n (editPolicy)=\"editPolicyFromDocuments()\"\r\n ></app-create-documents> -->\r\n <lib-document-section\r\n *ngIf=\"showCreateDocuments\"\r\n [organization_id]=\"organization_id\"\r\n [member_obj_id]=\"member_obj_id\"\r\n [userInfo]=\"userInfo\"\r\n [policyId]=\"policyId\"\r\n [policyName]=\"policyForm.policyName\"\r\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\r\n (editPolicy)=\"editPolicyFromDocuments()\"\r\n ></lib-document-section>\r\n</ng-container>\r\n\r\n<app-assessment-list\r\n *ngIf=\"activeSelector === 'isAssessment'\"\r\n [program_ids]=\"''\"\r\n [isEdit]=\"policyForm?.assessment?.length\"\r\n (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\r\n [selectedAssessment]=\"policyForm?.assessment[0]\"\r\n (onAssessmentSelect)=\"\r\n onAssessmentSelect($event); saveSelectedList('isAssessment', false)\r\n \"\r\n></app-assessment-list>\r\n\r\n<app-owner-list\r\n *ngIf=\"activeSelector === 'approvers' && false\"\r\n [listHeading]=\"'Select Approvers'\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [usersList]=\"allApprovers\"\r\n [showWorkflow]=\"true\"\r\n [selectedUsers]=\"\r\n addMoreLevels\r\n ? []\r\n : policyForm.selectedApprovers[approversListIndex].approvers\r\n \"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n [mode]=\"mode\"\r\n [reviewerWorkflowType]=\"workflowType\"\r\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\r\n [workflowList]=\"workflowList\"\r\n [workflowText]=\"'Approval Workflow'\"\r\n>\r\n</app-owner-list>\r\n\r\n<app-owner-list\r\n *ngIf=\"activeSelector === 'owners'\"\r\n [listHeading]=\"'Select User(s)'\"\r\n [singularText]=\"'User selected'\"\r\n [pluralText]=\"'Users selected'\"\r\n [usersList]=\"allApprovers\"\r\n [showWorkflow]=\"false\"\r\n [userIdKey]=\"'member_id'\"\r\n [itemEmailKey]=\"'member_email'\"\r\n [itemNameKey]=\"'member_name'\"\r\n (saveSelectedList)=\"saveSelectedList('owners', $event)\"\r\n (closeUsersList)=\"disableSelector()\"\r\n [mode]=\"mode\"\r\n [selectedUsers]=\"policyForm?.policy_owners ?? []\"\r\n>\r\n</app-owner-list>\r\n",
|
|
8551
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container .frequency-dialog .frequency-dialog-body .frequency-dialog-body-inner .frequency-tab-bottom app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility .frequency-lifecycle-responsibility-inner .frequency-lifecycle-responsibility-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-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-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:\"Poppins\",sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34AA44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::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-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;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:#FFFFFF;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 #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::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;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;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::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:8px 0!important;text-align:center}::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%;text-align:center}::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:#FFFFFF}::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:13px!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;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:14px;font-weight:500;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[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #DBDBDB;background:#FFFFFF;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[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#F1F1F1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .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[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .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[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #DBDBDB;background:#FFFFFF;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::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:#FFFFFF;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;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:100px}::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;position:relative;top:1px;font-size:8px}::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:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;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:#FFFFFF;box-shadow:0 0 5px #1e5dd345;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;box-shadow:0 3px 6px #1e5dd31a}::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;box-shadow:0 3px 6px #1e5dd31a}::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 #1e5dd345}::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:#FFFFFF;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::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:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;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 app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::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;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:26px;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:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;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;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;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;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:#FFFFFF;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 input,.form-group-row.active .right .vx-form-group .custom-input{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::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}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}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{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;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@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:#FFFFFF;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;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-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right{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-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right: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:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .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-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-month-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-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)}@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;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::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 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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;background:#ffffff}::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 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .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 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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:#0000000d!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:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px 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:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px 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-editor{display:block}::ng-deep marx-editor .editor-container{border-radius:4px;border:1px solid #DBDBDB;transition:all .2s ease-in-out}::ng-deep marx-editor .editor-container:hover,::ng-deep marx-editor .editor-container:focus-within{border:1px solid #1E5DD3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep marx-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep marx-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep marx-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep marx-editor .editor-container .editor-tools{border-top:1px solid #DBDBDB;border-radius:0 0 3px 3px}::ng-deep marx-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep 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 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 marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#F1F1F1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"]
|
|
8556
8552
|
},] }
|
|
8557
8553
|
];
|
|
8558
8554
|
WorkflowPolicyComponent.ctorParameters = function () { return [
|
|
@@ -9554,7 +9550,7 @@
|
|
|
9554
9550
|
FloatingBarComponent.decorators = [
|
|
9555
9551
|
{ type: i0.Component, args: [{
|
|
9556
9552
|
selector: 'app-floating-bar',
|
|
9557
|
-
template: "<div class=\"userGroup-floating-bar\">\r\n <div class=\"userGroup-floating-bar-container\">\r\n <div class=\"left user-group-left\">\r\n <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\r\n <ng-container *ngFor=\"let element of selectedData?.slice(0,1);let i = index\">\r\n <ng-container *ngIf=\"element\">\r\n <i *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition != 'right'\" (click)=\"deleteSelected(element)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"></i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">{{((selectedData.length<=2) && (i==selectedData.length-1)) && selectedData.length > 1? 'Final' : (i+1) }}</span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\" class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"element[displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{element[displayElementKey]}}</span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) === 'object'\" class=\"chipName vx-fs-11 vx-label-txt\">{{element[displayElementKey] | slice:\r\n element[displayElementKey].length -1 }}</span>\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-ml-1\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition == 'right'\" (click)=\"deleteSelected(element)\"></i>\r\n </ng-container>\r\n </ng-container>\r\n <button *ngIf=\"selectedData?.length>1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">+{{selectedData?.slice(1)?.length}}</button>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"chip\" *ngFor=\"let element of selectedData?.slice(0,1);let i = index\">\r\n <ng-container *ngIf=\"element\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition != 'right'\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">\r\n {{((selectedData.length<=2) && (i==selectedData.length-1)) && selectedData.length > 1? 'Final' : (i+1) }} </span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\" [appTooltip]=\"element[displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{element[displayElementKey]}}</span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">{{element[displayElementKey] | slice:\r\n element[displayElementKey].length -1 }}</span>\r\n <i class=\"icons\"\r\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition == 'right'\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n </ng-container>\r\n </div> -->\r\n <!-- <div class=\"counter\" *ngIf=\"selectedData?.length>1\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">+{{selectedData?.slice(1)?.length}}</div> -->\r\n <div class=\"name\" *ngIf=\"selectedData?.length>1\">\r\n <span *ngIf=\"selectedData?.slice(1).length === 1\">{{singularText}}</span>\r\n <span *ngIf=\"selectedData?.slice(1).length > 1\">{{pluralText}}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groupsEnabled\">\r\n <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\r\n <i (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\"></i>\r\n <div class=\"user-group-name\" appTooltip=\"{{selectedData[0][displayElementKey]}}\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0][displayElementKey]}}</div>\r\n <div class=\"counter\" *ngIf=\"selectedData?.length>1\" appPopover (click)=\"UserWithFeatureFlagPopover.popover()\" placement=\"left\">+{{selectedData?.length - 1}}</div>\r\n </div>\r\n <div class=\"name userGroup-name\" *ngIf=\"selectedData?.length>0 && groupsEnabled\">\r\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\"> {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}}</span>\r\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\">Users {{selectedGroups && selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n </div>\r\n <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n <i class=\"icons cross\" (click)=\"deleteSelectedGroup(selectedGroups[0])\"></i>\r\n <div class=\"user-group-name\" appTooltip=\"{{selectedGroups[0]?.group_name}}\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedGroups[0]?.group_name}}</div>\r\n <div class=\"counter group\" *ngIf=\"selectedGroups.length > 1\" appPopover (click)=\"groupPopover.popover()\" placement=\"left\">+{{selectedGroups.length -1}}</div>\r\n </div>\r\n <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">{{selectedGroups?.length > 1 ?' User Groups selected ':''}}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"showFrequencyText\">\r\n <div class=\"name vx-ml-0\">\r\n <span>You have selected <span class=\"vx-fw-500 vx-label-txt\">{{currentFrequency}}</span> frequency.</span>\r\n </div>\r\n </ng-container>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"center\" *ngIf=\"(showWorkflow && mode === 'CREATE' )||(showWorkflow && workflowList.includes('ROUND-ROBIN'))\">\r\n <label>\r\n {{workflowText}}\r\n <span class=\"icon\" *ngIf=\"workflowText=='Approval Workflow'\" libPopoverHover (mouseover)=\"dataTooltip.popover()\" (mouseleave)=\"dataTooltip.closePopover()\"\r\n placement=\"right\"><i class=\"icons\"></i></span>\r\n\r\n </label>\r\n <popover-hover #dataTooltip>\r\n <div class=\"vx-info-card\">\r\n <div class=\"vx-info-card-body\">\r\n You can select from the following three options:<br>\r\n <strong>Sequential:</strong> The policy would be sent for approval one at a time in the sequence defined by you.<br>\r\n <strong>Round-robin:</strong> The policy will be sent for approval to all approvers at the same time. However, it is mandatory for all approvers to take action.<br>\r\n <strong>Any One:</strong> The policy will be sent for approval to all approvers at the same time. If anyone of the approver approves the policy, it will be considered as approved.\r\n </div>\r\n\r\n </div>\r\n </popover-hover>\r\n <cs-select [(ngModel)]=\"selectedWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\" [placeholder]=\"'Approval WorkFlow *'\" [setMaxWidth]=\"true\">\r\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\r\n {{data}}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n <div class=\"right\">\r\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n <button *ngIf=\"showNextButton\" [disabled]=\"isDisabled\" (click)=\"next()\" appRipple>Next <i class=\"icons\"></i></button>\r\n </div>\r\n </div>\r\n</div>\r\n<app-popover #userPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <!-- <li class=\"multiple-program\" *ngIf=\"defaultSelected?.category_id\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" [class.disabled]=\"true\"></i>\r\n {{defaultSelected?.name}}\r\n </span>\r\n <div class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li> -->\r\n <li *ngFor=\"let element of selectedData?.slice(1); let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">\r\n {{(i==selectedData.slice(1).length-1)? 'Final' : (i+2) }}\r\n </span>\r\n {{element[displayElementKey]}}\r\n </span>\r\n\r\n <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n {{element[displayElementKey]}}\r\n </span>\r\n <div *ngIf=\"defaultSelected?.category_id && defaultSelected?.category_id === element?.category_id\" class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>\r\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\"><i class=\"icons\" (click)=\"deleteSelected(data)\"></i>{{data[displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>\r\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedGroups | slice: 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\"><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\"></i>{{data['group_name']}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>\r\n",
|
|
9553
|
+
template: "<div class=\"userGroup-floating-bar\">\r\n <div class=\"userGroup-floating-bar-container\">\r\n <div class=\"left user-group-left\">\r\n <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\">\r\n <ng-container *ngFor=\"let element of selectedData?.slice(0,1);let i = index\">\r\n <ng-container *ngIf=\"element\">\r\n <i *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition != 'right'\" (click)=\"deleteSelected(element)\" class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"></i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">{{((selectedData.length<=2) && (i==selectedData.length-1)) && selectedData.length > 1? 'Final' : (i+1) }}</span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\" class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"element[displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{element[displayElementKey]}}</span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) === 'object'\" class=\"chipName vx-fs-11 vx-label-txt\">{{element[displayElementKey] | slice:element[displayElementKey].length -1 }}</span>\r\n <i class=\"icons cross vx-fs-12 vx-paragraph-txt vx-ml-1\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition == 'right'\" (click)=\"deleteSelected(element)\"></i>\r\n </ng-container>\r\n </ng-container>\r\n <button *ngIf=\"selectedData?.length>1\" class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" [class.greenBg]=\"false\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">+{{selectedData?.slice(1)?.length}}</button>\r\n </div>\r\n\r\n\r\n\r\n <!-- <div class=\"chip\" *ngFor=\"let element of selectedData?.slice(0,1);let i = index\">\r\n <ng-container *ngIf=\"element\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition != 'right'\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">\r\n {{((selectedData.length<=2) && (i==selectedData.length-1)) && selectedData.length > 1? 'Final' : (i+1) }} </span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\" [appTooltip]=\"element[displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{element[displayElementKey]}}</span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">{{element[displayElementKey] | slice:\r\n element[displayElementKey].length -1 }}</span>\r\n <i class=\"icons\"\r\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition == 'right'\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n </ng-container>\r\n </div> -->\r\n <!-- <div class=\"counter\" *ngIf=\"selectedData?.length>1\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">+{{selectedData?.slice(1)?.length}}</div> -->\r\n <div class=\"name\" *ngIf=\"selectedData?.length>1\">\r\n <span *ngIf=\"selectedData?.slice(1).length === 1\">{{singularText}}</span>\r\n <span *ngIf=\"selectedData?.slice(1).length > 1\">{{pluralText}}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groupsEnabled\">\r\n <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\r\n <i (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\"></i>\r\n <div class=\"user-group-name\" appTooltip=\"{{selectedData[0][displayElementKey]}}\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedData[0][displayElementKey]}}</div>\r\n <div class=\"counter\" *ngIf=\"selectedData?.length>1\" appPopover (click)=\"UserWithFeatureFlagPopover.popover()\" placement=\"left\">+{{selectedData?.length - 1}}</div>\r\n </div>\r\n <div class=\"name userGroup-name\" *ngIf=\"selectedData?.length>0 && groupsEnabled\">\r\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\"> {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}}</span>\r\n <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\">Users {{selectedGroups && selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n </div>\r\n <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n <i class=\"icons cross\" (click)=\"deleteSelectedGroup(selectedGroups[0])\"></i>\r\n <div class=\"user-group-name\" appTooltip=\"{{selectedGroups[0]?.group_name}}\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedGroups[0]?.group_name}}</div>\r\n <div class=\"counter group\" *ngIf=\"selectedGroups.length > 1\" appPopover (click)=\"groupPopover.popover()\" placement=\"left\">+{{selectedGroups.length -1}}</div>\r\n </div>\r\n <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">{{selectedGroups?.length > 1 ?' User Groups selected ':''}}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"showFrequencyText\">\r\n <div class=\"name vx-ml-0\">\r\n <span>You have selected <span class=\"vx-fw-500 vx-label-txt\">{{currentFrequency}}</span> frequency.</span>\r\n </div>\r\n </ng-container>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"center\" *ngIf=\"(showWorkflow && mode === 'CREATE' )||(showWorkflow && workflowList.includes('ROUND-ROBIN'))\">\r\n <label>\r\n {{workflowText}}\r\n <span class=\"icon\" *ngIf=\"workflowText=='Approval Workflow'\" libPopoverHover (mouseover)=\"dataTooltip.popover()\" (mouseleave)=\"dataTooltip.closePopover()\"\r\n placement=\"right\"><i class=\"icons\"></i></span>\r\n\r\n </label>\r\n <popover-hover #dataTooltip>\r\n <div class=\"vx-info-card\">\r\n <div class=\"vx-info-card-body\">\r\n You can select from the following three options:<br>\r\n <strong>Sequential:</strong> The policy would be sent for approval one at a time in the sequence defined by you.<br>\r\n <strong>Round-robin:</strong> The policy will be sent for approval to all approvers at the same time. However, it is mandatory for all approvers to take action.<br>\r\n <strong>Any One:</strong> The policy will be sent for approval to all approvers at the same time. If anyone of the approver approves the policy, it will be considered as approved.\r\n </div>\r\n\r\n </div>\r\n </popover-hover>\r\n <cs-select [(ngModel)]=\"selectedWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\" [placeholder]=\"'Approval WorkFlow *'\" [setMaxWidth]=\"true\">\r\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\r\n {{data}}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n <div class=\"right\">\r\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n <button *ngIf=\"showNextButton\" [disabled]=\"isDisabled\" (click)=\"next()\" appRipple>Next <i class=\"icons\"></i></button>\r\n </div>\r\n </div>\r\n</div>\r\n<app-popover #userPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <!-- <li class=\"multiple-program\" *ngIf=\"defaultSelected?.category_id\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" [class.disabled]=\"true\"></i>\r\n {{defaultSelected?.name}}\r\n </span>\r\n <div class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li> -->\r\n <li *ngFor=\"let element of selectedData?.slice(1); let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">\r\n {{(i==selectedData.slice(1).length-1)? 'Final' : (i+2) }}\r\n </span>\r\n {{element[displayElementKey]}}\r\n </span>\r\n\r\n <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n (click)=\"deleteSelected(element)\"></i>\r\n {{element[displayElementKey]}}\r\n </span>\r\n <div *ngIf=\"defaultSelected?.category_id && defaultSelected?.category_id === element?.category_id\" class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>\r\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedData | slice: 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\"><i class=\"icons\" (click)=\"deleteSelected(data)\"></i>{{data[displayElementKey]}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>\r\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedGroups | slice: 1\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\"><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\"></i>{{data['group_name']}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>\r\n",
|
|
9558
9554
|
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef26;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:60%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:20px;background:#34aa44;border:none;color:#fff;font-size:9px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:0 4px;justify-content:center;line-height:16px;min-width:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-right:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#FFFFFF;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem;display:inline-flex;align-items:center;padding:0 8px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross:hover{background:#f1f1f1}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#161b2f;font-size:11px;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#F1F1F1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep 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}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-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}.wf-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}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:4px}.wf-action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .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}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-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}.wf-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}.wf-action-list ul.action-item li.multiple-program{background:#F8F8F8;margin-top:8px}.wf-action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.wf-action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.wf-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}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\n"]
|
|
9559
9555
|
},] }
|
|
9560
9556
|
];
|
|
@@ -12108,8 +12104,8 @@
|
|
|
12108
12104
|
FrequencyContainerComponent.decorators = [
|
|
12109
12105
|
{ type: i0.Component, args: [{
|
|
12110
12106
|
selector: 'app-frequency-container',
|
|
12111
|
-
template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-dialog\" *ngIf=\"mode !== 'policy'\">\r\n <div\r\n class=\"frequency-dialog-head vx-p-3 vx-mb-4 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Set a Frequency</div>\r\n </div>\r\n <div class=\"frequency-dialog-body vx-pl-4 vx-pr-4\">\r\n <div class=\"frequency-dialog-body-inner\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab vx-d-flex vx-align-center\">\r\n <ng-container\r\n *ngFor=\"let frequencyType of frequencyList; let i = index\"\r\n >\r\n <button\r\n (click)=\"changeFrequencyTab(frequencyType)\"\r\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0\"\r\n [class.active]=\"frequencyType?.type == frequencyTab\"\r\n >\r\n {{ frequencyType?.name }}\r\n </button>\r\n </ng-container>\r\n </div>\r\n <div class=\"frequency-tab-bottom vx-pl-4 vx-pr-4\">\r\n <!-- Daily Frequency Start -->\r\n <app-frequency-daily\r\n *ngSwitchCase=\"'daily'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-daily>\r\n <!-- Daily Frequency End -->\r\n <!-- Weekly Frequency Start -->\r\n <app-frequency-weekly\r\n *ngSwitchCase=\"'weekly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-weekly>\r\n <!-- Weekly Frequency End -->\r\n <!-- Monthly Frequency Start -->\r\n <app-frequency-monthly\r\n *ngSwitchCase=\"'monthly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-monthly>\r\n <!-- Monthly Frequency End -->\r\n <!-- Quarterly Frequency Start -->\r\n <app-frequency-quarterly\r\n *ngSwitchCase=\"'quarterly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-quarterly>\r\n <!-- Quarterly Frequency End -->\r\n <!-- Biannual Frequency Start -->\r\n <app-frequency-biannual\r\n *ngSwitchCase=\"'biannual'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-biannual>\r\n <!-- Biannual Frequency End -->\r\n <!-- Annual Frequency Start -->\r\n <app-frequency-annual\r\n *ngSwitchCase=\"'annual'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-annual>\r\n <!-- Annual Frequency End -->\r\n <!-- One Time Frequency Start -->\r\n <app-frequency-one-time\r\n *ngSwitchCase=\"'oneTime'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-one-time>\r\n <!-- One Time Frequency End -->\r\n <!-- Random Frequency Start -->\r\n <app-frequency-random\r\n *ngSwitchCase=\"'random'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-random>\r\n <!-- Random Frequency End -->\r\n <!-- On Completion Frequency Start -->\r\n <app-frequency-on-completion-of\r\n *ngSwitchCase=\"'onCompletionOf'\"\r\n [mode]=\"mode\"\r\n [feature]=\"feature\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n (radioForm)=\"openedRadio($event)\"\r\n ></app-frequency-on-completion-of>\r\n <!-- On Completion Frequency End -->\r\n <!-- Ongoing Frequency Start -->\r\n <app-frequency-ongoing\r\n *ngSwitchCase=\"'ongoing'\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-ongoing>\r\n <!-- Ongoing Frequency End -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"frequency-dialog-footer\" *ngIf=\"!openedRadioForm\">\r\n <app-floating-bar\r\n [showFrequencyText]=\"true\"\r\n [currentFrequency]=\"currentTabName\"\r\n [isDisabled]=\"isNextDisabled\"\r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\"\r\n ></app-floating-bar>\r\n </div>\r\n </div>\r\n</ng-container>\r\n<!-- When responsibility list show then hide frequency-dialog html -->\r\n\r\n<!-- For Policy -->\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency\">\r\n <div class=\"frequency-head\">\r\n <h3 class=\"frequency-title\">Set a Frequency</h3>\r\n </div>\r\n <div class=\"frequency-body\">\r\n <div class=\"frequency-container\">\r\n <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li *ngFor=\"let frequencyType of frequencyList; let i = index\">\r\n <button\r\n [class.active]=\"frequencyType?.type == frequencyTab\"\r\n (click)=\"changeFrequencyTab(frequencyType)\"\r\n >\r\n {{ frequencyType?.name }}\r\n </button>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"frequency-tab-body\">\r\n <app-frequency-daily\r\n *ngSwitchCase=\"'daily'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-daily>\r\n <app-frequency-weekly\r\n *ngSwitchCase=\"'weekly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-weekly>\r\n <app-frequency-monthly\r\n *ngSwitchCase=\"'monthly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-monthly>\r\n <app-frequency-quarterly\r\n *ngSwitchCase=\"'quarterly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-quarterly>\r\n <app-frequency-biannual\r\n *ngSwitchCase=\"'biannual'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-biannual>\r\n <app-frequency-annual\r\n *ngSwitchCase=\"'annual'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-annual>\r\n <app-frequency-one-time\r\n *ngSwitchCase=\"'oneTime'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-one-time>\r\n <app-frequency-random\r\n *ngSwitchCase=\"'random'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-random>\r\n <app-frequency-on-completion-of\r\n *ngSwitchCase=\"'onCompletionOf'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-on-completion-of>\r\n <app-frequency-ongoing\r\n *ngSwitchCase=\"'ongoing'\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-ongoing>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"frequency-footer\">\r\n <app-floating-bar\r\n [showFrequencyText]=\"true\"\r\n [currentFrequency]=\"currentTabName\"\r\n [isDisabled]=\"isNextDisabled\"\r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\"\r\n ></app-floating-bar>\r\n </div>\r\n</div>\r\n",
|
|
12112
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-dialog{position:fixed;top:0;right:500px;bottom:0;left:0;z-index:11}::ng-deep .frequency-dialog:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .frequency-dialog-head{background:#FBFBFB;border-radius:.125rem .125rem 0 0;border-bottom:1px solid #f1f1f1}::ng-deep .frequency-dialog-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .frequency-dialog-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto}::ng-deep .frequency-dialog-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .frequency-dialog-body-inner{width:54.5rem;margin:0 auto}@media screen and (max-width: 1366px){::ng-deep .frequency-dialog-body-inner{width:auto}}::ng-deep .frequency-dialog-body .frequency-tab{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;height:1.5rem;margin-right:1.5rem!important}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn:last-of-type{margin-right:0!important}@media screen and (max-width: 1366px){::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{margin-right:1rem!important}}@media screen and (max-width: 1280px){::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{margin-right:.75rem!important}}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn.active{color:#1e5dd3!important;border-color:#1e5dd3}::ng-deep .frequency-dialog-footer{padding:0 2rem}
|
|
12107
|
+
template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-dialog\" *ngIf=\"mode !== 'policy'\">\r\n <div\r\n class=\"frequency-dialog-head vx-p-3 vx-mb-4 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Set a Frequency</div>\r\n </div>\r\n <div class=\"frequency-dialog-body vx-pl-4 vx-pr-4\">\r\n <div class=\"frequency-dialog-body-inner\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab vx-d-flex vx-align-center\">\r\n <ng-container *ngFor=\"let frequencyType of frequencyList; let i = index\">\r\n <button (click)=\"changeFrequencyTab(frequencyType)\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0\" [class.active]=\"frequencyType?.type == frequencyTab\">{{ frequencyType?.name }}</button>\r\n </ng-container>\r\n </div>\r\n <div class=\"frequency-tab-bottom vx-pl-4 vx-pr-4\">\r\n <!-- Daily Frequency Start -->\r\n <app-frequency-daily\r\n *ngSwitchCase=\"'daily'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-daily>\r\n <!-- Daily Frequency End -->\r\n <!-- Weekly Frequency Start -->\r\n <app-frequency-weekly\r\n *ngSwitchCase=\"'weekly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-weekly>\r\n <!-- Weekly Frequency End -->\r\n <!-- Monthly Frequency Start -->\r\n <app-frequency-monthly\r\n *ngSwitchCase=\"'monthly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-monthly>\r\n <!-- Monthly Frequency End -->\r\n <!-- Quarterly Frequency Start -->\r\n <app-frequency-quarterly\r\n *ngSwitchCase=\"'quarterly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-quarterly>\r\n <!-- Quarterly Frequency End -->\r\n <!-- Biannual Frequency Start -->\r\n <app-frequency-biannual\r\n *ngSwitchCase=\"'biannual'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-biannual>\r\n <!-- Biannual Frequency End -->\r\n <!-- Annual Frequency Start -->\r\n <app-frequency-annual\r\n *ngSwitchCase=\"'annual'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-annual>\r\n <!-- Annual Frequency End -->\r\n <!-- One Time Frequency Start -->\r\n <app-frequency-one-time\r\n *ngSwitchCase=\"'oneTime'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-one-time>\r\n <!-- One Time Frequency End -->\r\n <!-- Random Frequency Start -->\r\n <app-frequency-random\r\n *ngSwitchCase=\"'random'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-random>\r\n <!-- Random Frequency End -->\r\n <!-- On Completion Frequency Start -->\r\n <app-frequency-on-completion-of\r\n *ngSwitchCase=\"'onCompletionOf'\"\r\n [mode]=\"mode\"\r\n [feature]=\"feature\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n (radioForm)=\"openedRadio($event)\"\r\n ></app-frequency-on-completion-of>\r\n <!-- On Completion Frequency End -->\r\n <!-- Ongoing Frequency Start -->\r\n <app-frequency-ongoing\r\n *ngSwitchCase=\"'ongoing'\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-ongoing>\r\n <!-- Ongoing Frequency End -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"frequency-dialog-footer\" *ngIf=\"!openedRadioForm\">\r\n <app-floating-bar\r\n [showFrequencyText]=\"true\"\r\n [currentFrequency]=\"currentTabName\"\r\n [isDisabled]=\"isNextDisabled\"\r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\"\r\n ></app-floating-bar>\r\n </div>\r\n </div>\r\n</ng-container>\r\n<!-- When responsibility list show then hide frequency-dialog html -->\r\n\r\n<!-- For Policy -->\r\n<div class=\"frequency-dialog\" *ngIf=\"mode === 'policy'\">\r\n <div class=\"frequency-dialog-head vx-p-3 vx-mb-4 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Set a Frequency</div>\r\n </div>\r\n <div class=\"frequency-dialog-body vx-pl-4 vx-pr-4\">\r\n <div class=\"frequency-dialog-body-inner\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab vx-d-flex vx-align-center\">\r\n <ng-container *ngFor=\"let frequencyType of frequencyList; let i = index\">\r\n <button (click)=\"changeFrequencyTab(frequencyType)\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0\" [class.active]=\"frequencyType?.type == frequencyTab\">{{ frequencyType?.name }}</button>\r\n </ng-container>\r\n </div>\r\n <div class=\"frequency-tab-bottom vx-pl-4 vx-pr-4\">\r\n <!-- Daily Frequency Start -->\r\n <app-frequency-daily\r\n *ngSwitchCase=\"'daily'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-daily>\r\n <!-- Daily Frequency End -->\r\n <!-- Weekly Frequency Start -->\r\n <app-frequency-weekly\r\n *ngSwitchCase=\"'weekly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-weekly>\r\n <!-- Weekly Frequency End -->\r\n <!-- Monthly Frequency Start -->\r\n <app-frequency-monthly\r\n *ngSwitchCase=\"'monthly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-monthly>\r\n <!-- Monthly Frequency End -->\r\n <!-- Quarterly Frequency Start -->\r\n <app-frequency-quarterly\r\n *ngSwitchCase=\"'quarterly'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-quarterly>\r\n <!-- Quarterly Frequency End -->\r\n <!-- Biannual Frequency Start -->\r\n <app-frequency-biannual\r\n *ngSwitchCase=\"'biannual'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-biannual>\r\n <!-- Biannual Frequency End -->\r\n <!-- Annual Frequency Start -->\r\n <app-frequency-annual\r\n *ngSwitchCase=\"'annual'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-annual>\r\n <!-- Annual Frequency End -->\r\n <!-- One Time Frequency Start -->\r\n <app-frequency-one-time\r\n *ngSwitchCase=\"'oneTime'\"\r\n [mode]=\"mode\"\r\n [pageType]=\"pageType\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-one-time>\r\n <!-- One Time Frequency End -->\r\n <!-- Random Frequency Start -->\r\n <app-frequency-random\r\n *ngSwitchCase=\"'random'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-random>\r\n <!-- Random Frequency End -->\r\n <!-- On Completion Frequency Start -->\r\n <app-frequency-on-completion-of\r\n *ngSwitchCase=\"'onCompletionOf'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-on-completion-of>\r\n <!-- On Completion Frequency End -->\r\n <!-- Ongoing Frequency Start -->\r\n <app-frequency-ongoing\r\n *ngSwitchCase=\"'ongoing'\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-ongoing>\r\n <!-- Ongoing Frequency End -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"frequency-dialog-footer\">\r\n <app-floating-bar\r\n [showFrequencyText]=\"true\"\r\n [currentFrequency]=\"currentTabName\"\r\n [isDisabled]=\"isNextDisabled\"\r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\"\r\n ></app-floating-bar>\r\n </div>\r\n</div>\r\n",
|
|
12108
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-dialog{position:fixed;top:0;right:500px;bottom:0;left:0;z-index:11}::ng-deep .frequency-dialog:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .frequency-dialog-head{background:#FBFBFB;border-radius:.125rem .125rem 0 0;border-bottom:1px solid #f1f1f1}::ng-deep .frequency-dialog-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .frequency-dialog-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto}::ng-deep .frequency-dialog-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .frequency-dialog-body-inner{width:54.5rem;margin:0 auto}@media screen and (max-width: 1366px){::ng-deep .frequency-dialog-body-inner{width:auto}}::ng-deep .frequency-dialog-body .frequency-tab{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;height:1.5rem;margin-right:1.5rem!important}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn:last-of-type{margin-right:0!important}@media screen and (max-width: 1366px){::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{margin-right:1rem!important}}@media screen and (max-width: 1280px){::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{margin-right:.75rem!important}}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn.active{color:#1e5dd3!important;border-color:#1e5dd3}::ng-deep .frequency-dialog-footer{padding:0 2rem}\n"]
|
|
12113
12109
|
},] }
|
|
12114
12110
|
];
|
|
12115
12111
|
FrequencyContainerComponent.ctorParameters = function () { return [
|
|
@@ -13602,8 +13598,8 @@
|
|
|
13602
13598
|
FrequencyOneTimeComponent.decorators = [
|
|
13603
13599
|
{ type: i0.Component, args: [{
|
|
13604
13600
|
selector: 'app-frequency-one-time',
|
|
13605
|
-
template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input class=\"input\" placeholder=\"11:59 PM\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<
|
|
13606
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\"
|
|
13601
|
+
template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input class=\"input\" placeholder=\"11:59 PM\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\"><i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"></i>\r\n <input type=\"text\" [value]=\"todayDate | date : 'dd MMM yyyy'\" [placeholder]=\"todayDate | date : 'dd MMM yyyy'\" (click)=\"openDatePicker()\" readonly />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input type=\"text\" aria-label=\"12hr format\" [(ngModel)]=\"oneTimeStartTime\" placeholder=\"11:59 PM\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <app-frequency-due-date [id]=\"6\" [mode]=\"mode\" [pageName]=\"'one-time'\" [isDeactivated]=\"false\" [completedValue]=\"oneTimeWindow\" [notCompletedValue]=\"oneTimeFailed\" [pageType]=\"pageType\" (valueChange)=\"onValueChange($event)\"></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\r\n></div>\r\n",
|
|
13602
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top: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;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-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right{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-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right: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:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .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-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-month-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-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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}\n"]
|
|
13607
13603
|
},] }
|
|
13608
13604
|
];
|
|
13609
13605
|
FrequencyOneTimeComponent.ctorParameters = function () { return [
|
|
@@ -14073,7 +14069,7 @@
|
|
|
14073
14069
|
function FrequencyTopComponent() {
|
|
14074
14070
|
this.occurrenceFirst = 0;
|
|
14075
14071
|
this.id = 0; // 0 = Daily, 1: weekly, 5: Annually
|
|
14076
|
-
this.inputTime = '11:59
|
|
14072
|
+
this.inputTime = '11:59 PM';
|
|
14077
14073
|
this.frequencyType = 0; // 0 = days, 1 = weeks & 2 = years
|
|
14078
14074
|
this.yearlyDay = new Date().getDate();
|
|
14079
14075
|
this.valueChangedFirst = new i0.EventEmitter();
|
|
@@ -14083,7 +14079,7 @@
|
|
|
14083
14079
|
this.mode = '';
|
|
14084
14080
|
this.todayDate = new Date();
|
|
14085
14081
|
this.dateObjectData = new Date();
|
|
14086
|
-
this.timeData = '11:59
|
|
14082
|
+
this.timeData = '11:59 PM';
|
|
14087
14083
|
}
|
|
14088
14084
|
FrequencyTopComponent.prototype.ngOnInit = function () {
|
|
14089
14085
|
};
|
|
@@ -14154,8 +14150,8 @@
|
|
|
14154
14150
|
FrequencyTopComponent.decorators = [
|
|
14155
14151
|
{ type: i0.Component, args: [{
|
|
14156
14152
|
selector: 'app-frequency-top',
|
|
14157
|
-
template: "<div *ngIf=\"mode !== 'policy'\" class=\"frequency-top\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n <div class=\"frequency-top-box vx-p-3 vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">{{id === 0 || id === 1 || id === 5 ? 'Every' : 'Day'}}</div>\r\n <input type=\"number\" [id]=\"'occurrence' + id\" [(ngModel)]=\"occurrenceFirst\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" (focusout) = \"enterValueFirst($event, 'occurrenceFirst')\" >\r\n <div *ngIf=\"frequencyType === 0\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">{{ occurrenceFirst > 1 ? 'days' : 'day' }} by</div>\r\n <div *ngIf=\"frequencyType === 1\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">{{ occurrenceFirst > 1 ? 'weeks' : 'week' }} by</div>\r\n <div *ngIf=\"id !== 0 && id !== 1 && id !== 5\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">by</div>\r\n\r\n <ng-container *ngIf=\"frequencyType === 2\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">{{ occurrenceFirst > 1 ? 'years' : 'year' }} on day</div>\r\n <input class=\"countNum\" type=\"number\" [id]=\"'occurrence-day' + id\" [(ngModel)]=\"yearlyDay\" (focusout)=\"enterYearDay($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"/>\r\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">by</div>\r\n </ng-container>\r\n \r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input class=\"input\" placeholder=\"11:59 PM\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-fs-12 vx-paragraph-txt\"></i></div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n\r\n<div *ngIf=\"mode === 'policy'\" class=\"top-
|
|
14158
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\"
|
|
14153
|
+
template: "<div *ngIf=\"mode !== 'policy'\" class=\"frequency-top\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n <div class=\"frequency-top-box vx-p-3 vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">{{id === 0 || id === 1 || id === 5 ? 'Every' : 'Day'}}</div>\r\n <input type=\"number\" [id]=\"'occurrence' + id\" [(ngModel)]=\"occurrenceFirst\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" (focusout) = \"enterValueFirst($event, 'occurrenceFirst')\" >\r\n <div *ngIf=\"frequencyType === 0\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">{{ occurrenceFirst > 1 ? 'days' : 'day' }} by</div>\r\n <div *ngIf=\"frequencyType === 1\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">{{ occurrenceFirst > 1 ? 'weeks' : 'week' }} by</div>\r\n <div *ngIf=\"id !== 0 && id !== 1 && id !== 5\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">by</div>\r\n\r\n <ng-container *ngIf=\"frequencyType === 2\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">{{ occurrenceFirst > 1 ? 'years' : 'year' }} on day</div>\r\n <input class=\"countNum\" type=\"number\" [id]=\"'occurrence-day' + id\" [(ngModel)]=\"yearlyDay\" (focusout)=\"enterYearDay($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"/>\r\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">by</div>\r\n </ng-container>\r\n \r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input class=\"input\" placeholder=\"11:59 PM\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-fs-12 vx-paragraph-txt\"></i></div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-top\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n <div class=\"frequency-top-box vx-p-3 vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">{{id === 0 || id === 1 || id === 5 ? 'Every' : 'Day'}}</div>\r\n <input type=\"number\" [id]=\"'occurrence' + id\" [(ngModel)]=\"occurrenceFirst\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" (focusout) = \"enterValueFirst($event, 'occurrenceFirst')\">\r\n <div *ngIf=\"frequencyType === 0\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">{{ occurrenceFirst > 1 ? 'days' : 'day' }} by</div>\r\n <div *ngIf=\"frequencyType === 1\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">{{ occurrenceFirst > 1 ? 'weeks' : 'week' }} by</div>\r\n <div *ngIf=\"id !== 0 && id !== 1 && id !== 5\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">by</div>\r\n\r\n <ng-container *ngIf=\"frequencyType === 2\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">{{ occurrenceFirst > 1 ? 'years' : 'year' }} on day</div>\r\n <input class=\"countNum\" type=\"number\" [id]=\"'occurrence-day' + id\" [(ngModel)]=\"yearlyDay\" (focusout)=\"enterYearDay($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"/>\r\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">by</div>\r\n </ng-container>\r\n \r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input class=\"input\" type=\"text\" [id]=\"'time-picker-input-top'+id\" [(ngModel)]=\"inputTime\" readonly placeholder=\"Select Time\">\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-fs-12 vx-paragraph-txt\"></i></div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n",
|
|
14154
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-top-box{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-top-box input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .frequency-top-box input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-top-box input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-top-box .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-top-box .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;text-transform:uppercase}::ng-deep .frequency-top-box .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-top-box .time-picker-group .time-field{position:relative}::ng-deep .frequency-top-box .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}\n"]
|
|
14159
14155
|
},] }
|
|
14160
14156
|
];
|
|
14161
14157
|
FrequencyTopComponent.ctorParameters = function () { return []; };
|
|
@@ -14337,8 +14333,8 @@
|
|
|
14337
14333
|
FrequencyLifecycleComponent.decorators = [
|
|
14338
14334
|
{ type: i0.Component, args: [{
|
|
14339
14335
|
selector: 'app-frequency-lifecycle',
|
|
14340
|
-
template: "<div class=\"frequency-lifecycle-responsibility vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n {{ textDetails?.header }}\r\n </div>\r\n <div\r\n class=\"frequency-lifecycle-responsibility-inner vx-p-3 vx-pt-2 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div class=\"frequency-lifecycle-responsibility-item\">\r\n <div class=\"vx-d-block\">\r\n <div\r\n *ngIf=\"mode === 'responsibility'\"\r\n class=\"heading vx-fs-12 vx-label-txt vx-mb-1\"\r\n >\r\n Starts From\r\n </div>\r\n <div\r\n class=\"lifecycle-box vx-d-flex vx-align-center vx-p-2\"\r\n (click)=\"openDatePicker(); datePickerOverlay = true\"\r\n [id]=\"'form-field' + id\"\r\n >\r\n <i class=\"icons vx-fs-16 vx-paragraph-txt vx-mr-3\"></i>\r\n <input\r\n class=\"start-date-input\"\r\n type=\"text\"\r\n [value]=\"startDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"startDate | date : 'dd MMM yyyy'\"\r\n readonly\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"mode === 'responsibility'\"\r\n class=\"frequency-lifecycle-responsibility-item\"\r\n >\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ends By</div>\r\n <app-cs-radio\r\n [checked]=\"selectedLifecycleType == 0\"\r\n (checkedEvent)=\"typeSelected(0)\"\r\n >\r\n <div\r\n class=\"date-field\"\r\n (click)=\"openDatePicker1(); datePickerOverlay = true\"\r\n >\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"endDateObject | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"endDateObject | date : 'dd MMM yyyy'\"\r\n readonly\r\n />\r\n </div>\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"mode === 'responsibility'\"\r\n class=\"frequency-lifecycle-responsibility-item\"\r\n >\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ends After</div>\r\n <app-cs-radio\r\n [checked]=\"selectedLifecycleType == 1\"\r\n (checkedEvent)=\"typeSelected(1)\"\r\n >\r\n <input\r\n class=\"input-field\"\r\n type=\"number\"\r\n [(ngModel)]=\"occurrance\"\r\n (focusout)=\"endsAfter($event)\"\r\n onkeydown=\"return event.keyCode !== 190\"\r\n min=\"0\"\r\n oninput=\"this.value = Math.abs(this.value)\"\r\n />\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-ml-2\">Occurrences</span>\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"mode === 'responsibility'\"\r\n class=\"frequency-lifecycle-responsibility-item\"\r\n >\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ongoing</div>\r\n <app-cs-radio\r\n [checked]=\"selectedLifecycleType == 2\"\r\n (checkedEvent)=\"typeSelected(2)\"\r\n >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-ml-2\"\r\n >The responsibility will perpetually exist.</span\r\n >\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- start date date picker -->\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + id\"\r\n [placeholder]=\"startDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"startDate\"\r\n [config]=\"startDateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n startFromChange($event);\r\n showDateError = false;\r\n datePickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n></div>\r\n\r\n<!-- end date date picker -->\r\n<dp-date-picker\r\n #datePicker1\r\n [(ngModel)]=\"endDate\"\r\n [placeholder]=\"endDateObject | date : 'dd MMM yyyy'\"\r\n [id]=\"'end-by-input-' + id\"\r\n [config]=\"endDateConfig\"\r\n [minDate]=\"endDateConfig['min']\"\r\n (onSelect)=\"\r\n endByChange($event); showDateError = false; datePickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n></div>\r\n",
|
|
14341
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .frequency-lifecycle-responsibility-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-lifecycle-responsibility-inner mat-radio-group{display:flex;justify-content:space-between}::ng-deep .frequency-lifecycle-responsibility-item{position:relative;height:3.375rem}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type{width:8.5rem}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label:after,::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label:before{display:none}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label .heading{padding-left:0}::ng-deep .frequency-lifecycle-responsibility-item:nth-child(2){width:8.5rem}::ng-deep .frequency-lifecycle-responsibility-item:nth-child(3){width:11.25rem}::ng-deep .frequency-lifecycle-responsibility-item:last-of-type{width:14.25rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner{position:relative}::ng-deep .frequency-lifecycle-responsibility-item .item-inner .heading{padding-left:1.75rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio{position:absolute;top:0;left:0;width:100%;height:3.375rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item{width:100%;position:relative}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .radio{position:absolute;top:-17px;left:0;width:1rem;height:1rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .radiomark{position:absolute;top:2px;left:0;width:1rem;height:1rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;width:calc(100% + 1rem);max-width:100%!important;height:2rem;cursor:pointer;text-transform:none;margin:22px 0 0 -1rem!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field{display:flex;align-items:center;position:relative;width:100%;height:100%;pointer-events:none}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;width:100%;height:1.875rem;padding:0 .5rem 0 2.25rem;position:absolute;top:0;left:0;cursor:pointer}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value{pointer-events:auto;margin:22px 0 0!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value .date-field,::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value .input-field{pointer-events:auto!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field{-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#747576;display:inline-block;font-size:13px;text-align:center;width:2.75rem;height:1.25rem;padding:0 .125rem;margin:0 .5rem;outline:none;pointer-events:none}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field::-webkit-inner-spin-button,::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-lifecycle-responsibility-item .lifecycle-box{border-radius:.25rem;border:1px solid #dbdbdb;height:2rem;position:relative;cursor:pointer}::ng-deep .frequency-lifecycle-responsibility-item .lifecycle-box .start-date-input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;width:100%;outline:none;cursor:pointer}::ng-deep .frequency-lifecycle{border-top:1px solid #f1f1f1}::ng-deep .frequency-lifecycle-head{background:#fbfbfb;padding:8px 20px}::ng-deep .frequency-lifecycle-title{margin:0;padding:0;font-size:12px;line-height:16px;color:#747576;text-transform:uppercase}::ng-deep .frequency-lifecycle-body{padding:10px 20px;display:flex}::ng-deep .frequency-lifecycle-body .column{width:25%;padding:0;position:relative}::ng-deep .frequency-lifecycle-body .column label.text{color:#747576;font-size:11px;text-transform:uppercase;margin:0 0 4px;font-weight:500;line-height:16px;display:block}::ng-deep .frequency-lifecycle-body .column+.column{padding-left:28px}::ng-deep .frequency-lifecycle-body .column:first-child{width:20%}::ng-deep .frequency-lifecycle-body .column:last-child{width:30%}::ng-deep .frequency-lifecycle-body .column .block,::ng-deep .frequency-lifecycle-body .column span.value{display:flex;font-size:13px;color:#747576;border:1px solid #f1f1f1;border-radius:2px;padding:0 4px 0 16px;box-sizing:border-box;min-height:48px;justify-content:center;align-items:center;background:#fff;cursor:pointer;text-transform:none;margin:0!important}::ng-deep .frequency-lifecycle-body .column .block .date-picker,::ng-deep .frequency-lifecycle-body .column span.value .date-picker{display:flex;align-items:center;position:relative}::ng-deep .frequency-lifecycle-body .column .block .date-picker i,::ng-deep .frequency-lifecycle-body .column span.value .date-picker i{font-size:16px;margin-right:8px}::ng-deep .frequency-lifecycle-body .column .block .date-picker input,::ng-deep .frequency-lifecycle-body .column span.value .date-picker input{border:none;outline:none;width:100%;background:transparent;font-size:12px;cursor:pointer;line-height:40px}::ng-deep .frequency-lifecycle-body .column .block.active,::ng-deep .frequency-lifecycle-body .column span.value.active{border:1px solid #97d2a0;background:#d6f2da}::ng-deep .frequency-lifecycle-body .column app-cs-radio{display:flex}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span.radio,::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item svg{position:absolute;top:14px;left:-10px;height:20px;width:20px}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span.value{max-width:100%;pointer-events:none;font-size:13px;color:#747576;width:100%}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input:checked~span.value{pointer-events:auto;border:1px solid #97d2a0;background:#d6f2da}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day{-moz-appearance:textfield;border:none;width:40px;padding:4px;text-align:center;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;background:transparent;margin:0 4px 0 0;font-size:13px}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day::-webkit-outer-spin-button,::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span{font-size:13px;color:#747576}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-26px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0!important;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep 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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}\n"]
|
|
14336
|
+
template: "<div class=\"frequency-lifecycle-responsibility vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n {{ textDetails?.header }}\r\n </div>\r\n <div\r\n class=\"frequency-lifecycle-responsibility-inner vx-p-3 vx-pt-2 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div class=\"frequency-lifecycle-responsibility-item\" [class.with-policy]=\"mode === 'policy'\">\r\n <div class=\"vx-d-block\">\r\n <div\r\n *ngIf=\"mode === 'responsibility'\"\r\n class=\"heading vx-fs-12 vx-label-txt vx-mb-1\"\r\n >\r\n Starts From\r\n </div>\r\n <div\r\n class=\"lifecycle-box vx-d-flex vx-align-center vx-p-2\"\r\n (click)=\"openDatePicker(); datePickerOverlay = true\"\r\n [id]=\"'form-field' + id\"\r\n >\r\n <i class=\"icons vx-fs-16 vx-paragraph-txt vx-mr-3\"></i>\r\n <input\r\n class=\"start-date-input\"\r\n type=\"text\"\r\n [value]=\"startDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"startDate | date : 'dd MMM yyyy'\"\r\n readonly\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"mode === 'responsibility'\"\r\n class=\"frequency-lifecycle-responsibility-item\"\r\n >\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ends By</div>\r\n <app-cs-radio\r\n [checked]=\"selectedLifecycleType == 0\"\r\n (checkedEvent)=\"typeSelected(0)\"\r\n >\r\n <div\r\n class=\"date-field\"\r\n (click)=\"openDatePicker1(); datePickerOverlay = true\"\r\n >\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"endDateObject | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"endDateObject | date : 'dd MMM yyyy'\"\r\n readonly\r\n />\r\n </div>\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"mode === 'responsibility'\"\r\n class=\"frequency-lifecycle-responsibility-item\"\r\n >\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ends After</div>\r\n <app-cs-radio\r\n [checked]=\"selectedLifecycleType == 1\"\r\n (checkedEvent)=\"typeSelected(1)\"\r\n >\r\n <input\r\n class=\"input-field\"\r\n type=\"number\"\r\n [(ngModel)]=\"occurrance\"\r\n (focusout)=\"endsAfter($event)\"\r\n onkeydown=\"return event.keyCode !== 190\"\r\n min=\"0\"\r\n oninput=\"this.value = Math.abs(this.value)\"\r\n />\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-ml-2\">Occurrences</span>\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"mode === 'responsibility'\"\r\n class=\"frequency-lifecycle-responsibility-item\"\r\n >\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ongoing</div>\r\n <app-cs-radio\r\n [checked]=\"selectedLifecycleType == 2\"\r\n (checkedEvent)=\"typeSelected(2)\"\r\n >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-ml-2\"\r\n >The responsibility will perpetually exist.</span\r\n >\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- start date date picker -->\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + id\"\r\n [placeholder]=\"startDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"startDate\"\r\n [config]=\"startDateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n startFromChange($event);\r\n showDateError = false;\r\n datePickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n></div>\r\n\r\n<!-- end date date picker -->\r\n<dp-date-picker\r\n #datePicker1\r\n [(ngModel)]=\"endDate\"\r\n [placeholder]=\"endDateObject | date : 'dd MMM yyyy'\"\r\n [id]=\"'end-by-input-' + id\"\r\n [config]=\"endDateConfig\"\r\n [minDate]=\"endDateConfig['min']\"\r\n (onSelect)=\"\r\n endByChange($event); showDateError = false; datePickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datePickerOverlay\"\r\n></div>\r\n",
|
|
14337
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .frequency-lifecycle-responsibility-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-lifecycle-responsibility-inner mat-radio-group{display:flex;justify-content:space-between}::ng-deep .frequency-lifecycle-responsibility-item{position:relative;height:3.375rem}::ng-deep .frequency-lifecycle-responsibility-item.with-policy{height:unset;margin-top:.25rem}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type{width:8.5rem}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label:after,::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label:before{display:none}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label .heading{padding-left:0}::ng-deep .frequency-lifecycle-responsibility-item:nth-child(2){width:8.5rem}::ng-deep .frequency-lifecycle-responsibility-item:nth-child(3){width:11.25rem}::ng-deep .frequency-lifecycle-responsibility-item:last-of-type{width:14.25rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner{position:relative}::ng-deep .frequency-lifecycle-responsibility-item .item-inner .heading{padding-left:1.75rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio{position:absolute;top:0;left:0;width:100%;height:3.375rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item{width:100%;position:relative}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .radio{position:absolute;top:-17px;left:0;width:1rem;height:1rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .radiomark{position:absolute;top:2px;left:0;width:1rem;height:1rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;width:calc(100% + 1rem);max-width:100%!important;height:2rem;cursor:pointer;text-transform:none;margin:22px 0 0 -1rem!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field{display:flex;align-items:center;position:relative;width:100%;height:100%;pointer-events:none}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;width:100%;height:1.875rem;padding:0 .5rem 0 2.25rem;position:absolute;top:0;left:0;cursor:pointer}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value{pointer-events:auto;margin:22px 0 0!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value .date-field,::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value .input-field{pointer-events:auto!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field{-moz-appearance:textfield;border:none;border-bottom:1px solid #DBDBDB;color:#747576;display:inline-block;font-size:13px;text-align:center;width:2.75rem;height:1.25rem;padding:0 .125rem;margin:0 .5rem;outline:none;pointer-events:none}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field::-webkit-inner-spin-button,::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-lifecycle-responsibility-item .lifecycle-box{border-radius:.25rem;border:1px solid #dbdbdb;height:2rem;position:relative;cursor:pointer}::ng-deep .frequency-lifecycle-responsibility-item .lifecycle-box .start-date-input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;width:100%;outline:none;cursor:pointer}::ng-deep .frequency-lifecycle{border-top:1px solid #f1f1f1}::ng-deep .frequency-lifecycle-head{background:#fbfbfb;padding:8px 20px}::ng-deep .frequency-lifecycle-title{margin:0;padding:0;font-size:12px;line-height:16px;color:#747576;text-transform:uppercase}::ng-deep .frequency-lifecycle-body{padding:10px 20px;display:flex}::ng-deep .frequency-lifecycle-body .column{width:25%;padding:0;position:relative}::ng-deep .frequency-lifecycle-body .column label.text{color:#747576;font-size:11px;text-transform:uppercase;margin:0 0 4px;font-weight:500;line-height:16px;display:block}::ng-deep .frequency-lifecycle-body .column+.column{padding-left:28px}::ng-deep .frequency-lifecycle-body .column:first-child{width:20%}::ng-deep .frequency-lifecycle-body .column:last-child{width:30%}::ng-deep .frequency-lifecycle-body .column .block,::ng-deep .frequency-lifecycle-body .column span.value{display:flex;font-size:13px;color:#747576;border:1px solid #f1f1f1;border-radius:2px;padding:0 4px 0 16px;box-sizing:border-box;min-height:48px;justify-content:center;align-items:center;background:#fff;cursor:pointer;text-transform:none;margin:0!important}::ng-deep .frequency-lifecycle-body .column .block .date-picker,::ng-deep .frequency-lifecycle-body .column span.value .date-picker{display:flex;align-items:center;position:relative}::ng-deep .frequency-lifecycle-body .column .block .date-picker i,::ng-deep .frequency-lifecycle-body .column span.value .date-picker i{font-size:16px;margin-right:8px}::ng-deep .frequency-lifecycle-body .column .block .date-picker input,::ng-deep .frequency-lifecycle-body .column span.value .date-picker input{border:none;outline:none;width:100%;background:transparent;font-size:12px;cursor:pointer;line-height:40px}::ng-deep .frequency-lifecycle-body .column .block.active,::ng-deep .frequency-lifecycle-body .column span.value.active{border:1px solid #97d2a0;background:#d6f2da}::ng-deep .frequency-lifecycle-body .column app-cs-radio{display:flex}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span.radio,::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item svg{position:absolute;top:14px;left:-10px;height:20px;width:20px}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span.value{max-width:100%;pointer-events:none;font-size:13px;color:#747576;width:100%}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input:checked~span.value{pointer-events:auto;border:1px solid #97d2a0;background:#d6f2da}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day{-moz-appearance:textfield;border:none;width:40px;padding:4px;text-align:center;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;background:transparent;margin:0 4px 0 0;font-size:13px}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day::-webkit-outer-spin-button,::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span{font-size:13px;color:#747576}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-26px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0!important;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep 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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}\n"]
|
|
14342
14338
|
},] }
|
|
14343
14339
|
];
|
|
14344
14340
|
FrequencyLifecycleComponent.ctorParameters = function () { return [
|
|
@@ -14476,8 +14472,8 @@
|
|
|
14476
14472
|
FrequencyCheckboxListComponent.decorators = [
|
|
14477
14473
|
{ type: i0.Component, args: [{
|
|
14478
14474
|
selector: 'app-frequency-checkbox-list',
|
|
14479
|
-
template: "<div class=\"frequency-checkbox vx-d-flex vx-align-center\" [class.year-row]=\"listArray.length === 12\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let eachList of listArray; let i = index;\">\r\n <app-cs-checkbox [id]=\"i\" [value]=\"i\" [ngValue]=\"selectedIndex.includes(i)\" (ngValueChange)=\"selectedCheckbox.emit({checked:$event, index:i})\" [disabled]=\"id === 4 && selectedIndex.length == 2 && !selectedIndex.includes(i)\">\r\n <span class=\"vx-fs-12 vx-label-txt\">{{eachList}}</span>\r\n </app-cs-checkbox>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div
|
|
14480
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-checkbox{background:#fff;border-radius:0 0 .25rem .25rem;border:1px solid #f1f1f1;position:relative;top:-3px}::ng-deep .frequency-checkbox.year-row{flex-wrap:wrap}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:first-of-type,::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(2),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(3),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(4),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(5),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .frequency-checkbox-item app-cs-checkbox{display:flex}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item{position:relative;padding-left:1.75rem!important}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .checkbox,::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .value{margin:0!important;max-width:100%!important}
|
|
14475
|
+
template: "<div class=\"frequency-checkbox vx-d-flex vx-align-center\" [class.year-row]=\"listArray.length === 12\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let eachList of listArray; let i = index;\">\r\n <app-cs-checkbox [id]=\"i\" [value]=\"i\" [ngValue]=\"selectedIndex.includes(i)\" (ngValueChange)=\"selectedCheckbox.emit({checked:$event, index:i})\" [disabled]=\"id === 4 && selectedIndex.length == 2 && !selectedIndex.includes(i)\">\r\n <span class=\"vx-fs-12 vx-label-txt\">{{eachList}}</span>\r\n </app-cs-checkbox>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div class=\"frequency-checkbox vx-d-flex vx-align-center\" [class.year-row]=\"listArray.length === 12\" *ngIf=\"mode === 'policy'\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let eachList of listArray; let i = index;\">\r\n <app-cs-checkbox [id]=\"i\" [value]=\"i\" [ngValue]=\"selectedIndex.includes(i)\" (ngValueChange)=\"selectedCheckbox.emit({checked:$event, index:i})\" [disabled]=\"id === 4 && selectedIndex.length == 2 && !selectedIndex.includes(i)\">\r\n <span class=\"vx-fs-12 vx-label-txt\">{{eachList}}</span>\r\n </app-cs-checkbox>\r\n </div>\r\n</div>",
|
|
14476
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-checkbox{background:#fff;border-radius:0 0 .25rem .25rem;border:1px solid #f1f1f1;position:relative;top:-3px}::ng-deep .frequency-checkbox.year-row{flex-wrap:wrap}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:first-of-type,::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(2),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(3),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(4),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(5),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .frequency-checkbox-item app-cs-checkbox{display:flex}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item{position:relative;padding-left:1.75rem!important}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .checkbox,::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .value{margin:0!important;max-width:100%!important}\n"]
|
|
14481
14477
|
},] }
|
|
14482
14478
|
];
|
|
14483
14479
|
FrequencyCheckboxListComponent.ctorParameters = function () { return []; };
|
|
@@ -14510,8 +14506,8 @@
|
|
|
14510
14506
|
FrequencyRadioListComponent.decorators = [
|
|
14511
14507
|
{ type: i0.Component, args: [{
|
|
14512
14508
|
selector: 'app-frequency-radio-list',
|
|
14513
|
-
template: "<div class=\"frequency-radio vx-d-flex vx-align-center\" [class.year-row]=\"radioList.length === 12\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-radio-item vx-p-3 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let eachList of radioList; let i = index;\">\r\n <app-cs-radio\r\n [id]=\"i\" \r\n [value]=\"i\" \r\n [name]=\"name\"\r\n [checked]=\"(selectedIndex === i)\" \r\n (checkedEvent)=\"selectedRadio.emit($event)\">\r\n <span class=\"vx-fs-12 vx-label-txt\">{{eachList}}</span>\r\n </app-cs-radio>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div
|
|
14514
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-radio{background:#fff;border-radius:0 0 .25rem .25rem;border:1px solid #f1f1f1;position:relative;top:-3px}::ng-deep .frequency-radio.year-row{flex-wrap:wrap}::ng-deep .frequency-radio.year-row .frequency-radio-item{width:calc(100% / 6)!important}::ng-deep .frequency-radio.year-row .frequency-radio-item:first-of-type,::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(2),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(3),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(4),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(5),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(6){border-right:none}::ng-deep .frequency-radio-item{border-right:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-radio-item:last-of-type{border-right:none}::ng-deep .frequency-radio-item app-cs-radio{display:flex}
|
|
14509
|
+
template: "<div class=\"frequency-radio vx-d-flex vx-align-center\" [class.year-row]=\"radioList.length === 12\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-radio-item vx-p-3 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let eachList of radioList; let i = index;\">\r\n <app-cs-radio\r\n [id]=\"i\" \r\n [value]=\"i\" \r\n [name]=\"name\"\r\n [checked]=\"(selectedIndex === i)\" \r\n (checkedEvent)=\"selectedRadio.emit($event)\">\r\n <span class=\"vx-fs-12 vx-label-txt\">{{eachList}}</span>\r\n </app-cs-radio>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div class=\"frequency-radio vx-d-flex vx-align-center\" [class.year-row]=\"radioList.length === 12\" *ngIf=\"mode === 'policy'\">\r\n <div class=\"frequency-radio-item vx-p-3 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let eachList of radioList; let i = index;\">\r\n <app-cs-radio\r\n [id]=\"i\" \r\n [value]=\"i\" \r\n [name]=\"name\"\r\n [checked]=\"(selectedIndex === i)\" \r\n (checkedEvent)=\"selectedRadio.emit($event)\">\r\n <span class=\"vx-fs-12 vx-label-txt\">{{eachList}}</span>\r\n </app-cs-radio>\r\n </div>\r\n</div>",
|
|
14510
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-radio{background:#fff;border-radius:0 0 .25rem .25rem;border:1px solid #f1f1f1;position:relative;top:-3px}::ng-deep .frequency-radio.year-row{flex-wrap:wrap}::ng-deep .frequency-radio.year-row .frequency-radio-item{width:calc(100% / 6)!important}::ng-deep .frequency-radio.year-row .frequency-radio-item:first-of-type,::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(2),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(3),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(4),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(5),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(6){border-right:none}::ng-deep .frequency-radio-item{border-right:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-radio-item:last-of-type{border-right:none}::ng-deep .frequency-radio-item app-cs-radio{display:flex}\n"]
|
|
14515
14511
|
},] }
|
|
14516
14512
|
];
|
|
14517
14513
|
FrequencyRadioListComponent.ctorParameters = function () { return []; };
|
|
@@ -17980,8 +17976,8 @@
|
|
|
17980
17976
|
GroupUsersListComponent.decorators = [
|
|
17981
17977
|
{ type: i0.Component, args: [{
|
|
17982
17978
|
selector: 'app-group-users-list',
|
|
17983
|
-
template: "<div class=\"add-risk-group-user-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-group-user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select User(s)</div>\r\n <!-- <button class=\"add-risk-group-user-list-close\" (click)=\"close()\">\r\n <i class=\"icons\"></i>\r\n </button> -->\r\n </div>\r\n <div class=\"add-risk-group-user-list-body\">\r\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n <div class=\"add-risk-group-user-list-tab vx-d-flex vx-align-center vx-mt-1 vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS \r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{search?.length && currentTab === 'USER' ? (usersList | filter : search)?.length :usersList?.length}}</span></button>\r\n <button (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\">USER GROUPS \r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{search?.length && currentTab === 'GROUP' ? (assigneeGroupsList | filter : search)?.length :assigneeGroupsList?.length}}</span></button>\r\n </div>\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} \" />\r\n </div>\r\n <ng-container *ngIf=\"!groupsEnabled\">\r\n <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n <ng-container *ngIf=\"(groupsList | filter:search) as grouplist\">\r\n <div class=\"body-top\" *ngIf=\"( userlist?.length > 0 || userlist?.length > 0 && grouplist?.length > 0) && search?.trim()?.length === 0\">\r\n <app-cs-checkbox\r\n *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>\r\n {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-block\" [class.with-no-data]=\"(userlist?.length === 0 && grouplist?.length === 0 && !loader)\">\r\n \r\n <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n <ng-container *ngFor=\"let group of grouplist\">\r\n <li *ngIf=\"!hideGroup(group.userIds)\">\r\n <app-cs-checkbox [ngValue]=\"checkGroupList(group.userIds) && group.userIds?.length !== 0\"\r\n (ngValueChange)=\"selectGroup(group.userIds,$event)\"\r\n [disabled]=\"openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds) || group.userIds?.length === 0\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds)))\">\r\n <span class=\"name\">{{group.groupName}}<span\r\n class=\"counter\">{{(group.userIds?.length>1)?\r\n group.userIds?.length+' USERS':group.userIds?.length+' USER' }}</span></span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <ul class=\"group-user-list\" *ngIf=\"userlist?.length > 0\">\r\n <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n [disabled]=\"(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n <span class=\"name\">{{user.employee_name}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"(userlist?.length === 0 && grouplist?.length === 0 && !loader)\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab === 'USER' && groupsEnabled && !loader\">\r\n <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n <div class=\"body-top\" *ngIf=\"( userlist?.length > 0) && search?.trim()?.length === 0\">\r\n <app-cs-checkbox\r\n *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>\r\n {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n \r\n <div class=\"list-block\" [class.with-no-data]=\"userlist?.length === 0 && !loader\">\r\n <ul class=\"group-user-list\" *ngIf=\"userlist?.length > 0\">\r\n <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n [disabled]=\"((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey])))||(disabledId?.includes(user[userIdKey])))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n <span class=\"name\">{{user.employee_name}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"userlist?.length === 0 && !loader\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled && !loader\">\r\n <ng-container *ngIf=\"(assigneeGroupsList | filter:search) as grouplist\">\r\n <div class=\"body-top\" *ngIf=\"grouplist?.length > 0 && search?.trim()?.length === 0\">\r\n <app-cs-checkbox [ngValue]=\"checkselectAllgroups()\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <strong>\r\n {{checkselectAllgroups() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-block\" [class.with-no-data]=\"grouplist?.length === 0 && !loader\">\r\n <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n <ng-container>\r\n <li *ngFor=\"let group of grouplist; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedGroupIds?.includes(group[groupIdKey])\"\r\n (ngValueChange)=\"selectGroupElement(group,$event)\"\r\n [disabled]=\"(openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group)))\">\r\n <span class=\"name vx-d-flex vx-align-center vx-w-100\" >\r\n <span class=\"group-name\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">{{group?.group_name}}</span>\r\n <span class=\"counter\">{{group[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span>\r\n </span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <app-no-data *ngIf=\"grouplist?.length === 0 && !loader\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Groups Found'\"></app-no-data>\r\n </div> \r\n </ng-container>\r\n </ng-container>\r\n\r\n <app-floating-bar [selectedData]=\"selectedUsers\" [selectedGroups]=\"selectedGroups\" [displayElementKey]=\"'employee_name'\" [elementId]=\"userIdKey\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save(selectedIds)\"\r\n (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\" (deleteGroupEvent)=\"deleteGroupEvent($event)\" [groupsEnabled]=\"groupsEnabled\"\r\n [isDisabled]=\"(groupsList?.length + usersList?.length) === 0 || selectedUsers?.length === 0 && selectedGroups?.length === 0\">\r\n </app-floating-bar>\r\n </div>\r\n</div>",
|
|
17984
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .add-risk-group-user-list{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-group-user-list:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-group-user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-group-user-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-group-user-list-tab{border-bottom:1px solid #DBDBDB}::ng-deep .add-risk-group-user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:1.75rem!important}::ng-deep .add-risk-group-user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .add-risk-group-user-list-tab button.active{pointer-events:none}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .add-risk-group-user-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-group-user-list-body .search-block{position:relative}::ng-deep .add-risk-group-user-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-group-user-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-group-user-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .add-risk-group-user-list-body .body-top{display:flex;justify-content:space-between;padding:0 0 1rem}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value span.name span.counter{background:#F1F1F1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body .list-block{height:calc(100vh - 18.5rem);overflow:hidden;overflow-y:auto;margin-bottom:1rem}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block.with-no-data{height:calc(100vh - 16.5rem)}::ng-deep .add-risk-group-user-list-body .list-block app-no-data{height:100%}::ng-deep .add-risk-group-user-list-body ul{padding:0;margin:0}::ng-deep .add-risk-group-user-list-body ul.group-user-list{display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li{width:50%;padding:0 0 .75rem;list-style:none}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label{width:100%}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:12px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name .group-name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name span.counter{background:#F1F1F1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-group-user-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
|
|
17979
|
+
template: "<div class=\"add-risk-group-user-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-group-user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select User(s)</div>\r\n <!-- <button class=\"add-risk-group-user-list-close\" (click)=\"close()\">\r\n <i class=\"icons\"></i>\r\n </button> -->\r\n </div>\r\n <div class=\"add-risk-group-user-list-body\">\r\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n <div class=\"add-risk-group-user-list-tab vx-d-flex vx-align-center vx-mt-1 vx-mb-2\" *ngIf=\"groupsEnabled\">\r\n <button (click)=\"switchTab('USER')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'USER'\">USERS \r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{search?.length && currentTab === 'USER' ? (usersList | filter : search)?.length :usersList?.length}}</span></button>\r\n <button (click)=\"switchTab('GROUP')\" class=\"tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\" [class.active]=\"currentTab === 'GROUP'\">USER GROUPS \r\n <span class=\"vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4\">{{search?.length && currentTab === 'GROUP' ? (assigneeGroupsList | filter : search)?.length :assigneeGroupsList?.length}}</span></button>\r\n </div>\r\n <div class=\"search-block vx-mb-2\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"{{currentTab === 'USER' ? 'Search User(s)' :'Search User Group(s)'}} \" />\r\n </div>\r\n <ng-container *ngIf=\"!groupsEnabled\">\r\n <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n <ng-container *ngIf=\"(groupsList | filter:search) as grouplist\">\r\n <div class=\"body-top\" *ngIf=\"( userlist?.length > 0 || userlist?.length > 0 && grouplist?.length > 0) && search?.trim()?.length === 0\">\r\n <app-cs-checkbox\r\n *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>\r\n {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-block\" [class.without-group]=\"!groupsEnabled\" [class.with-no-data]=\"(userlist?.length === 0 && grouplist?.length === 0 && !loader)\">\r\n \r\n <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n <ng-container *ngFor=\"let group of grouplist\">\r\n <li *ngIf=\"!hideGroup(group.userIds)\">\r\n <app-cs-checkbox [ngValue]=\"checkGroupList(group.userIds) && group.userIds?.length !== 0\"\r\n (ngValueChange)=\"selectGroup(group.userIds,$event)\"\r\n [disabled]=\"openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds) || group.userIds?.length === 0\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (selectedUsers?.length + group.userIds?.length) > 19 && !checkGroupList(group.userIds)))\">\r\n <span class=\"name\">{{group.groupName}}<span\r\n class=\"counter\">{{(group.userIds?.length>1)?\r\n group.userIds?.length+' USERS':group.userIds?.length+' USER' }}</span></span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <ul class=\"group-user-list\" *ngIf=\"userlist?.length > 0\">\r\n <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">\r\n <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n [disabled]=\"(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n <span class=\"name\">{{user.employee_name}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"(userlist?.length === 0 && grouplist?.length === 0 && !loader)\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab === 'USER' && groupsEnabled && !loader\">\r\n <ng-container *ngIf=\"(usersList | filter:search) as userlist\">\r\n <div class=\"body-top\" *ngIf=\"( userlist?.length > 0) && search?.trim()?.length === 0\">\r\n <app-cs-checkbox\r\n *ngIf=\"(openedFrom === 'RISK_TREATMENT' && usersList?.length < 19) || openedFrom !== 'RISK_TREATMENT'\"\r\n [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>\r\n {{checkSelectAll() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n \r\n <div class=\"list-block\" [class.with-no-data]=\"userlist?.length === 0 && !loader\">\r\n <ul class=\"group-user-list\" *ngIf=\"userlist?.length > 0\">\r\n <li *ngFor=\"let user of userlist\" [appTooltip]=\"user | tooltipMessage:fromResponsibility:reviewerIds:overseerIds:assignorId:[]:'my_member_id':(openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))||(disabledId?.includes(user[userIdKey])))\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\" >\r\n <app-cs-checkbox [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\"\r\n [disabled]=\"((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey])))||(disabledId?.includes(user[userIdKey])))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && selectedUsers?.length === 19 && !(selectedIds?.includes(user[userIdKey]))))\">\r\n <span class=\"name\">{{user.employee_name}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ul>\r\n <app-no-data *ngIf=\"userlist?.length === 0 && !loader\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Users Found'\"></app-no-data>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentTab === 'GROUP' && groupsEnabled && !loader\">\r\n <ng-container *ngIf=\"(assigneeGroupsList | filter:search) as grouplist\">\r\n <div class=\"body-top\" *ngIf=\"grouplist?.length > 0 && search?.trim()?.length === 0\">\r\n <app-cs-checkbox [ngValue]=\"checkselectAllgroups()\" (ngValueChange)=\"selectAllGroups($event)\">\r\n <strong>\r\n {{checkselectAllgroups() ? 'Deselect All' : 'Select All'}}\r\n </strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <div class=\"list-block\" [class.with-no-data]=\"grouplist?.length === 0 && !loader\">\r\n <ul class=\"group-user-list\" *ngIf=\"grouplist?.length > 0\">\r\n <ng-container>\r\n <li *ngFor=\"let group of grouplist; let i = index\">\r\n <app-cs-checkbox [ngValue]=\"selectedGroupIds?.includes(group[groupIdKey])\"\r\n (ngValueChange)=\"selectGroupElement(group,$event)\"\r\n [disabled]=\"(openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group))\"\r\n (click)=\"validationCheck((openedFrom === 'RISK_TREATMENT' && (group.member_ids?.length) > 19 && !checkGroupList(group)))\">\r\n <span class=\"name vx-d-flex vx-align-center vx-w-100\" >\r\n <span class=\"group-name\" [appTooltip]=\"group?.group_name\" placement=\"bottom-left\" delay=\"0\"\r\n [tooltipMandatory]=\"true\">{{group?.group_name}}</span>\r\n <span class=\"counter\">{{group[\"member_count\"]}} {{group?.member_count > 1 ? 'USERS' :'USER'}}</span>\r\n </span>\r\n </app-cs-checkbox>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n <app-no-data *ngIf=\"grouplist?.length === 0 && !loader\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\"\r\n [noDataText]=\"'No Groups Found'\"></app-no-data>\r\n </div> \r\n </ng-container>\r\n </ng-container>\r\n\r\n <app-floating-bar [selectedData]=\"selectedUsers\" [selectedGroups]=\"selectedGroups\" [displayElementKey]=\"'employee_name'\" [elementId]=\"userIdKey\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" (closeEvent)=\"save(selectedIds)\"\r\n (closeList)=\"close()\" (deleteEvent)=\"deleteEvent($event)\" (deleteGroupEvent)=\"deleteGroupEvent($event)\" [groupsEnabled]=\"groupsEnabled\"\r\n [isDisabled]=\"(groupsList?.length + usersList?.length) === 0 || selectedUsers?.length === 0 && selectedGroups?.length === 0\">\r\n </app-floating-bar>\r\n </div>\r\n</div>",
|
|
17980
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .add-risk-group-user-list{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .add-risk-group-user-list:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .add-risk-group-user-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .add-risk-group-user-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-group-user-list-tab{border-bottom:1px solid #DBDBDB}::ng-deep .add-risk-group-user-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;margin-right:1.75rem!important}::ng-deep .add-risk-group-user-list-tab button.tab-btn span{border-radius:1.25rem;color:#74757680;min-width:1.5rem}::ng-deep .add-risk-group-user-list-tab button.active{pointer-events:none}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .add-risk-group-user-list-tab button.active.tab-btn span{background:#1E5DD3;color:#fff;font-weight:500}::ng-deep .add-risk-group-user-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .add-risk-group-user-list-body .search-block{position:relative}::ng-deep .add-risk-group-user-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-group-user-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-group-user-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .add-risk-group-user-list-body .body-top{display:flex;justify-content:space-between;padding:0 0 1rem}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:12px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-group-user-list-body .body-top app-cs-checkbox label span.value span.name span.counter{background:#F1F1F1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body .list-block{height:calc(100vh - 18.5rem);overflow:hidden;overflow-y:auto;margin-bottom:1rem}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-track{background-color:transparent}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .add-risk-group-user-list-body .list-block.without-group{height:calc(100vh - 16rem)}::ng-deep .add-risk-group-user-list-body .list-block.with-no-data{height:calc(100vh - 16.5rem)}::ng-deep .add-risk-group-user-list-body .list-block app-no-data{height:100%}::ng-deep .add-risk-group-user-list-body ul{padding:0;margin:0}::ng-deep .add-risk-group-user-list-body ul.group-user-list{display:flex;align-items:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li{width:50%;padding:0 0 .75rem;list-style:none}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label{width:100%}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:12px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name .group-name,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.name .group-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 2.5rem)}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox{display:flex}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-group-user-list-body ul.group-user-list li app-cs-checkbox label span.value span.name span.counter{background:#F1F1F1;border-radius:.125rem;color:#042e7d;font-size:9px;font-weight:600;line-height:12px;text-transform:uppercase;padding:0 4px;margin-left:8px}::ng-deep .add-risk-group-user-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-group-user-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
|
|
17985
17981
|
},] }
|
|
17986
17982
|
];
|
|
17987
17983
|
GroupUsersListComponent.ctorParameters = function () { return [
|
|
@@ -18996,7 +18992,7 @@
|
|
|
18996
18992
|
// 'Procedures Linked to this Policy',
|
|
18997
18993
|
// 'Implementation Guidelines for this Policy',
|
|
18998
18994
|
// 'Training Materials for this Policy'
|
|
18999
|
-
'Charter', 'Related Documents', 'Reference Materials', 'Related procedures', 'Implementation guidelines', 'Training Materials', 'Regulatory Documents', 'Other
|
|
18995
|
+
'Charter', 'Related Documents', 'Reference Materials', 'Related procedures', 'Implementation guidelines', 'Training Materials', 'Regulatory Documents', 'Other'
|
|
19000
18996
|
];
|
|
19001
18997
|
}
|
|
19002
18998
|
Object.defineProperty(FormatAndEvidenceComponent.prototype, "formatEvidanceData", {
|
|
@@ -19221,7 +19217,7 @@
|
|
|
19221
19217
|
FormatAndEvidenceComponent.prototype.selectedLinkSetChange = function (event, index) {
|
|
19222
19218
|
var _a, _b;
|
|
19223
19219
|
this.formate.files[index].linkSet = event;
|
|
19224
|
-
if (event === 'Other
|
|
19220
|
+
if (event === 'Other' && !((_b = (_a = this.formate) === null || _a === void 0 ? void 0 : _a.files[index]) === null || _b === void 0 ? void 0 : _b.others)) {
|
|
19225
19221
|
this.formate.files[index].others = [''];
|
|
19226
19222
|
}
|
|
19227
19223
|
this.emitValue();
|
|
@@ -19273,7 +19269,7 @@
|
|
|
19273
19269
|
FormatAndEvidenceComponent.decorators = [
|
|
19274
19270
|
{ type: i0.Component, args: [{
|
|
19275
19271
|
selector: 'app-format-and-evidence',
|
|
19276
|
-
template: "<div class=\"vx-form-group\" [class.policy-upload-file]=\"mode=='policy'\">\r\n <label class=\"vx-control-panel\" *ngIf=\"mode=='responsibility'\">\r\n Format & Evidence\r\n </label>\r\n <div class=\"upload-format\" *ngIf=\"mode!='policy' && mode!='policyReviewer'\">\r\n <span class=\"text\">Do you want to upload a format for this responsibility?</span>\r\n <div class=\"radio-group\">\r\n <app-cs-radio [name]=\"'format_required'\" [checked]=\"formate.hasUploadFormate === true\"\r\n (checkedEvent)=\"toggleIsFormateUpload(true)\">Yes</app-cs-radio>\r\n <app-cs-radio [name]=\"'format_required'\" [checked]=\"formate.hasUploadFormate === false\"\r\n (checkedEvent)=\"toggleIsFormateUpload(false)\">No\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n <div class=\"form-tab\" *ngIf=\"formate?.hasUploadFormate || mode=='policyReviewer'\">\r\n <button type=\"button\" [class.active]=\"formate?.formateType === 'FILE'\" (click)=\"toggleAttachmentType('FILE')\"\r\n [disabled]=\"formate.links?.length > 0\">Insert File</button>\r\n <button type=\"button\" [class.active]=\"formate?.formateType === 'LINK'\" (click)=\"toggleAttachmentType('LINK')\"\r\n [disabled]=\"formate.files?.length > 0\">Insert Link</button>\r\n </div>\r\n\r\n <ng-container *ngIf=\"(formate?.hasUploadFormate && formate.formateType === 'FILE') || (mode=='policy'&& formate.formateType === 'FILE')||( mode=='policyReviewer'&& formate.formateType === 'FILE')\">\r\n <!-- -----------------------------file upload in progress ---------------------------------- -->\r\n <ng-container *ngIf=\"(formate?.uploadInProgress|keyvalue).length > 0\">\r\n <div class=\"file-list\" *ngFor=\"let eachFile of formate?.uploadInProgress|keyvalue; let i = index\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{ eachFile.value}} </span>\r\n </div>\r\n <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\r\n </div>\r\n </ng-container>\r\n <!-- --------------------------------file upload ends here ----------------------------------------- -->\r\n <ng-container *ngIf=\"formate.files?.length > 0\">\r\n <ng-container *ngIf=\"mode!='policy'\">\r\n <div class=\"file-list\" *ngFor=\"let eachFile of formate.files; let i = index\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{ eachFile?.file_name }} </span>\r\n <button (click)=\"deleteAttachment(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"mode=='policy'\" class=\"policy-related-document-field vx-p-3 vx-pt-2\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-mb-2\">LINK THE DOCUMENT AND SPECIFY THE RELATIONSHIP WITH THIS POLICY</div>\r\n <div class=\"file-list policy\" *ngFor=\"let eachFile of formate.files; let i = index\">\r\n <div class=\"file-container\">\r\n <span class=\"file table pdf\">\r\n <i class=\"icons\"></i>\r\n <span class=\"format pdf\">pdf</span>\r\n </span>\r\n <span class=\"file-name\">{{eachFile?.file_name}}</span>\r\n <div class=\"button-group\">\r\n <button (click)=\"deleteAttachment(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <cs-select [(ngModel)]=\"eachFile.linkSet\" (ngModelChange)=\"selectedLinkSetChange($event,i)\" [placeholder]=\"'Define the document\\'s relationship to this policy'\" name=\"selected\" >\r\n <cs-option *ngFor=\"let data of policyLinkSetList\" [value]=\"data\">\r\n {{data}}\r\n </cs-option>\r\n </cs-select>\r\n <ng-container *ngFor=\"let other of eachFile?.others; let j = index\">\r\n <input *ngIf=\"eachFile?.linkSet === 'Other (specify own)'\" [ngModel]=\"eachFile.others[j]\" (ngModelChange)=\"selectedLinkSetChange('Other (specify own)',i, $event, j)\" class=\"linkage-input\" type=\"text\" placeholder=\"Type the linkage details\" />\r\n </ng-container>\r\n <button *ngIf=\"eachFile?.linkSet === 'Other (specify own)'\" class=\"linkage-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-mt-2\" (click)=\"addMoreDocumentsDetails(i)\">+ ADD MORE</button>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <label class=\"vx-control-panel\" *ngIf=\"mode=='policy'\">\r\n LINK THE DOCUMENT AND SPECIFY THE RELATIONSHIP WITH THIS POLICY\r\n </label>\r\n <ng-container *ngFor=\"let eachFile of formate.files; let i = index\">\r\n <div class=\"file-list\" *ngIf=\"mode!='policy'\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{ eachFile?.file_name }} </span>\r\n <button (click)=\"deleteAttachment(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div> \r\n <div class=\"file-list policy\" *ngIf=\"mode=='policy'\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{eachFile?.file_name}}</span>\r\n <div class=\"button-group\">\r\n <!- - <button class=\"edit\">\r\n <i class=\"icons\"></i>\r\n </button> - ->\r\n <button (click)=\"deleteAttachment(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <cs-select [(ngModel)]=\"eachFile.linkSet\" (ngModelChange)=\"selectedLinkSetChange($event,i)\" [placeholder]=\"'Define the document\\'s relationship to this policy'\" name=\"selected\" >\r\n <cs-option *ngFor=\"let data of policyLinkSetList\" [value]=\"data\">\r\n {{data}}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </ng-container> -->\r\n </ng-container>\r\n <!-- -----------------------------------drag and drop ---------------------------------------------- -->\r\n <div class=\"tab-group\" [class.uploaded]=\"formate.files?.length > 0\" appDragDrop (fileDropped)=\"onFileDropped($event)\">\r\n <label class=\"upload-file\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/upload.svg\" alt=\"\" class=\"image\">\r\n <div class=\"browse\">\r\n <span>\r\n <ng-container *ngIf=\"mode!='policy'\">Drop your files here / </ng-container>\r\n <ng-container *ngIf=\"mode=='policy'\">Drop your files here / </ng-container>\r\n <span class=\"label\">Browse\r\n <input type=\"file\" multiple (change)=\"onFileDropped($event.target.files)\">\r\n </span>\r\n </span>\r\n <!-- <span *ngIf=\"mode!='policy'\">Drop your files here /</span>\r\n <span *ngIf=\"mode=='policy'\">Drag & drop to upload files associated with this policy /</span>\r\n <span class=\"label\">Browse\r\n <input type=\"file\" multiple (change)=\"onFileDropped($event.target.files)\">\r\n </span> -->\r\n </div>\r\n </label>\r\n </div>\r\n <!-- ------------------------------------------drag drop ends here -------------------------------------------- -->\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"(formate?.hasUploadFormate && formate.formateType === 'LINK')||(mode=='policyReviewer' && formate.formateType === 'LINK') \">\r\n <ng-container *ngIf=\"formate.links.length > 0\">\r\n <ng-container *ngFor=\"let link of formate.links; let i = index\">\r\n <div class=\"file-list\" *ngIf=\"!link.isEditing\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{ link.link }} </span>\r\n <span class=\"button-group\">\r\n <button [class.disabled]=\"isEditDisabled\" class=\"edit\" (click)=\"editLink(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <button (click)=\"deleteLink(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"link.isEditing\">\r\n <input type=\"text\" class=\"edit-link\" appAutofocus placeholder=\"Enter the link here\" [(ngModel)]=\"link.link\"\r\n (focusout)=\"insertLink('EDIT',i)\" (keydown.enter)=\"insertLink('EDIT',i)\" />\r\n <p class=\"error-message\" *ngIf=\"link.containsError\">Please insert a valid link</p>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <input [disabled]=\"isNewLinkDisabled\" class=\"edit-link\" type=\"text\" [(ngModel)]=\"newLink.link\" placeholder=\"Enter the link here\"\r\n (focusout)=\"insertLink('CREATE')\" (keydown.enter)=\"insertLink('CREATE')\" />\r\n <p class=\"error-message\" *ngIf=\"newLink.containsError\">Please insert a valid link</p>\r\n </ng-container>\r\n <div class=\"upload-format\" *ngIf=\"mode=='responsibility'\">\r\n <span class=\"text\">Do you want evidence of completion of the responsibility to be uploaded?</span>\r\n <div class=\"radio-group\">\r\n <app-cs-radio [name]=\"'evidence_required'\" [checked]=\"formate.isEvidenceRequired === true\"\r\n (checkedEvent)=\"toggleIsFormatRequired(true)\">Yes</app-cs-radio>\r\n <app-cs-radio [name]=\"'evidence_required'\" [checked]=\"formate.isEvidenceRequired === false\"\r\n (checkedEvent)=\"toggleIsFormatRequired(false)\">No\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n \r\n</div>\r\n",
|
|
19272
|
+
template: "<div class=\"vx-form-group\" [class.policy-upload-file]=\"mode=='policy'\">\r\n <label class=\"vx-control-panel\" *ngIf=\"mode=='responsibility'\">\r\n Format & Evidence\r\n </label>\r\n <div class=\"upload-format\" *ngIf=\"mode!='policy' && mode!='policyReviewer'\">\r\n <span class=\"text\">Do you want to upload a format for this responsibility?</span>\r\n <div class=\"radio-group\">\r\n <app-cs-radio [name]=\"'format_required'\" [checked]=\"formate.hasUploadFormate === true\"\r\n (checkedEvent)=\"toggleIsFormateUpload(true)\">Yes</app-cs-radio>\r\n <app-cs-radio [name]=\"'format_required'\" [checked]=\"formate.hasUploadFormate === false\"\r\n (checkedEvent)=\"toggleIsFormateUpload(false)\">No\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n <div class=\"form-tab\" *ngIf=\"formate?.hasUploadFormate || mode=='policyReviewer'\">\r\n <button type=\"button\" [class.active]=\"formate?.formateType === 'FILE'\" (click)=\"toggleAttachmentType('FILE')\"\r\n [disabled]=\"formate.links?.length > 0\">Insert File</button>\r\n <button type=\"button\" [class.active]=\"formate?.formateType === 'LINK'\" (click)=\"toggleAttachmentType('LINK')\"\r\n [disabled]=\"formate.files?.length > 0\">Insert Link</button>\r\n </div>\r\n\r\n <ng-container *ngIf=\"(formate?.hasUploadFormate && formate.formateType === 'FILE') || (mode=='policy'&& formate.formateType === 'FILE')||( mode=='policyReviewer'&& formate.formateType === 'FILE')\">\r\n <!-- -----------------------------file upload in progress ---------------------------------- -->\r\n <ng-container *ngIf=\"(formate?.uploadInProgress|keyvalue).length > 0\">\r\n <div class=\"file-list\" *ngFor=\"let eachFile of formate?.uploadInProgress|keyvalue; let i = index\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{ eachFile.value}} </span>\r\n </div>\r\n <app-line-loader [loaderHeight]=\"2\"></app-line-loader>\r\n </div>\r\n </ng-container>\r\n <!-- --------------------------------file upload ends here ----------------------------------------- -->\r\n <ng-container *ngIf=\"formate.files?.length > 0\">\r\n <ng-container *ngIf=\"mode!='policy'\">\r\n <div class=\"file-list\" *ngFor=\"let eachFile of formate.files; let i = index\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{ eachFile?.file_name }} </span>\r\n <button (click)=\"deleteAttachment(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"mode=='policy'\" class=\"policy-related-document-field vx-p-3 vx-pt-2\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-mb-2\">LINK THE DOCUMENT AND SPECIFY THE RELATIONSHIP WITH THIS POLICY</div>\r\n <div class=\"file-list policy\" *ngFor=\"let eachFile of formate.files; let i = index\">\r\n <div class=\"file-container\">\r\n <span class=\"file table pdf\">\r\n <i class=\"icons\"></i>\r\n <span class=\"format pdf\">pdf</span>\r\n </span>\r\n <span class=\"file-name\">{{eachFile?.file_name}}</span>\r\n <div class=\"button-group\">\r\n <button (click)=\"deleteAttachment(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <cs-select [(ngModel)]=\"eachFile.linkSet\" (ngModelChange)=\"selectedLinkSetChange($event,i)\" [placeholder]=\"'Define the document\\'s relationship to this policy'\" name=\"selected\" >\r\n <cs-option *ngFor=\"let data of policyLinkSetList\" [value]=\"data\">\r\n {{data}}\r\n </cs-option>\r\n </cs-select>\r\n <!-- <ng-container *ngFor=\"let other of eachFile?.others; let j = index\">\r\n <input *ngIf=\"eachFile?.linkSet === 'Other (specify own)'\" [ngModel]=\"eachFile.others[j]\" (ngModelChange)=\"selectedLinkSetChange('Other (specify own)',i, $event, j)\" class=\"linkage-input\" type=\"text\" placeholder=\"Type the linkage details\" />\r\n </ng-container>\r\n <button *ngIf=\"eachFile?.linkSet === 'Other (specify own)'\" class=\"linkage-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-mt-2\" (click)=\"addMoreDocumentsDetails(i)\">+ ADD MORE</button> -->\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <label class=\"vx-control-panel\" *ngIf=\"mode=='policy'\">\r\n LINK THE DOCUMENT AND SPECIFY THE RELATIONSHIP WITH THIS POLICY\r\n </label>\r\n <ng-container *ngFor=\"let eachFile of formate.files; let i = index\">\r\n <div class=\"file-list\" *ngIf=\"mode!='policy'\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{ eachFile?.file_name }} </span>\r\n <button (click)=\"deleteAttachment(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div> \r\n <div class=\"file-list policy\" *ngIf=\"mode=='policy'\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{eachFile?.file_name}}</span>\r\n <div class=\"button-group\">\r\n <!- - <button class=\"edit\">\r\n <i class=\"icons\"></i>\r\n </button> - ->\r\n <button (click)=\"deleteAttachment(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <cs-select [(ngModel)]=\"eachFile.linkSet\" (ngModelChange)=\"selectedLinkSetChange($event,i)\" [placeholder]=\"'Define the document\\'s relationship to this policy'\" name=\"selected\" >\r\n <cs-option *ngFor=\"let data of policyLinkSetList\" [value]=\"data\">\r\n {{data}}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </ng-container> -->\r\n </ng-container>\r\n <!-- -----------------------------------drag and drop ---------------------------------------------- -->\r\n <div class=\"tab-group\" [class.uploaded]=\"formate.files?.length > 0\" appDragDrop (fileDropped)=\"onFileDropped($event)\">\r\n <label class=\"upload-file\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/upload.svg\" alt=\"\" class=\"image\">\r\n <div class=\"browse\">\r\n <span>\r\n <ng-container *ngIf=\"mode!='policy'\">Drop your files here / </ng-container>\r\n <ng-container *ngIf=\"mode=='policy'\">Drop your files here / </ng-container>\r\n <span class=\"label\">Browse\r\n <input type=\"file\" multiple (change)=\"onFileDropped($event.target.files)\">\r\n </span>\r\n </span>\r\n <!-- <span *ngIf=\"mode!='policy'\">Drop your files here /</span>\r\n <span *ngIf=\"mode=='policy'\">Drag & drop to upload files associated with this policy /</span>\r\n <span class=\"label\">Browse\r\n <input type=\"file\" multiple (change)=\"onFileDropped($event.target.files)\">\r\n </span> -->\r\n </div>\r\n </label>\r\n </div>\r\n <!-- ------------------------------------------drag drop ends here -------------------------------------------- -->\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"(formate?.hasUploadFormate && formate.formateType === 'LINK')||(mode=='policyReviewer' && formate.formateType === 'LINK') \">\r\n <ng-container *ngIf=\"formate.links.length > 0\">\r\n <ng-container *ngFor=\"let link of formate.links; let i = index\">\r\n <div class=\"file-list\" *ngIf=\"!link.isEditing\">\r\n <div class=\"file-container\">\r\n <span class=\"file-name\">{{ link.link }} </span>\r\n <span class=\"button-group\">\r\n <button [class.disabled]=\"isEditDisabled\" class=\"edit\" (click)=\"editLink(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n <button (click)=\"deleteLink(i)\">\r\n <i class=\"icons\"></i>\r\n </button>\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"link.isEditing\">\r\n <input type=\"text\" class=\"edit-link\" appAutofocus placeholder=\"Enter the link here\" [(ngModel)]=\"link.link\"\r\n (focusout)=\"insertLink('EDIT',i)\" (keydown.enter)=\"insertLink('EDIT',i)\" />\r\n <p class=\"error-message\" *ngIf=\"link.containsError\">Please insert a valid link</p>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <input [disabled]=\"isNewLinkDisabled\" class=\"edit-link\" type=\"text\" [(ngModel)]=\"newLink.link\" placeholder=\"Enter the link here\"\r\n (focusout)=\"insertLink('CREATE')\" (keydown.enter)=\"insertLink('CREATE')\" />\r\n <p class=\"error-message\" *ngIf=\"newLink.containsError\">Please insert a valid link</p>\r\n </ng-container>\r\n <div class=\"upload-format\" *ngIf=\"mode=='responsibility'\">\r\n <span class=\"text\">Do you want evidence of completion of the responsibility to be uploaded?</span>\r\n <div class=\"radio-group\">\r\n <app-cs-radio [name]=\"'evidence_required'\" [checked]=\"formate.isEvidenceRequired === true\"\r\n (checkedEvent)=\"toggleIsFormatRequired(true)\">Yes</app-cs-radio>\r\n <app-cs-radio [name]=\"'evidence_required'\" [checked]=\"formate.isEvidenceRequired === false\"\r\n (checkedEvent)=\"toggleIsFormatRequired(false)\">No\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n \r\n</div>\r\n",
|
|
19277
19273
|
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.edit-link{margin-top:4px}.disabled{opacity:.4;pointer-events:none}::ng-deep .policy-upload-file .policy-related-document-field{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .policy-upload-file .policy-related-document-field .file-list{background:transparent!important;border-radius:0;border:none;border-bottom:1px solid #dbdbdb;padding:.75rem 0;margin:0!important}::ng-deep .policy-upload-file .policy-related-document-field .file-list:only-child,::ng-deep .policy-upload-file .policy-related-document-field .file-list:last-of-type{border-bottom:none;padding-bottom:0}::ng-deep .policy-upload-file .policy-related-document-field .file-list .file-container{align-items:center;justify-content:unset}::ng-deep .policy-upload-file .policy-related-document-field .file-list .file-container span.file.table{margin-right:.25rem}::ng-deep .policy-upload-file .policy-related-document-field .file-list .file-container span.file-name{width:calc(100% - 2.125rem);padding-right:1.25rem}::ng-deep .policy-upload-file .policy-related-document-field .file-list cs-select{margin-top:.25rem}::ng-deep .policy-upload-file .policy-related-document-field .file-list input.linkage-input{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;color:#747576;font-size:13px;padding:0 .5rem;margin:.5rem 0 0;height:2rem;width:100%;transition:all .2s ease-in-out}::ng-deep .policy-upload-file .policy-related-document-field .file-list input.linkage-input::placeholder{color:#747576;font-size:13px}::ng-deep .policy-upload-file .policy-related-document-field .file-list input.linkage-input:hover,::ng-deep .policy-upload-file .policy-related-document-field .file-list input.linkage-input:focus-within{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .policy-upload-file .policy-related-document-field .file-list button.linkage-btn{background:transparent;border-radius:0;border:none;color:#1e5dd3}::ng-deep .policy-upload-file .tab-group.uploaded{margin-top:.5rem}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-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-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:\"Poppins\",sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34AA44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::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-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;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:#FFFFFF;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 #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::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;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;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::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:8px 0!important;text-align:center}::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%;text-align:center}::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:#FFFFFF}::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:13px!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;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:14px;font-weight:500;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[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #DBDBDB;background:#FFFFFF;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[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#F1F1F1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .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[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .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[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #DBDBDB;background:#FFFFFF;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::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:#FFFFFF;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;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:100px}::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;position:relative;top:1px;font-size:8px}::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:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;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:#FFFFFF;box-shadow:0 0 5px #1e5dd345;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;box-shadow:0 3px 6px #1e5dd31a}::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;box-shadow:0 3px 6px #1e5dd31a}::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 #1e5dd345}::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:#FFFFFF;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::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:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;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 app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::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;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:26px;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:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;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;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;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;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:#FFFFFF;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 input,.form-group-row.active .right .vx-form-group .custom-input{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::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}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}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{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;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@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:#FFFFFF;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;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-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right{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-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-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-month-calendar button.dp-calendar-nav-right: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:#000000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .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-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week 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-month-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-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)}@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;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#ffffff}::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 0%,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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;background:#ffffff}::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 0%,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0%,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .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 0%,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0%,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0%,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0) 100%);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:#0000000d!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:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px 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:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px 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-editor{display:block}::ng-deep marx-editor .editor-container{border-radius:4px;border:1px solid #DBDBDB;transition:all .2s ease-in-out}::ng-deep marx-editor .editor-container:hover,::ng-deep marx-editor .editor-container:focus-within{border:1px solid #1E5DD3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep marx-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep marx-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep marx-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep marx-editor .editor-container .editor-tools{border-top:1px solid #DBDBDB;border-radius:0 0 3px 3px}::ng-deep marx-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep 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 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 marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#F1F1F1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}\n"]
|
|
19278
19274
|
},] }
|
|
19279
19275
|
];
|
|
@@ -21317,8 +21313,8 @@
|
|
|
21317
21313
|
AssessmentListComponent.decorators = [
|
|
21318
21314
|
{ type: i0.Component, args: [{
|
|
21319
21315
|
selector: 'app-assessment-list',
|
|
21320
|
-
template: "\r\n<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"></app-preview>\r\n<div class=\"assessment-list\" [class.animate]=\"animation\">\r\n <div class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\r\n </div>\r\n <div class=\"assessment-list-body\">\r\n <div class=\"search-block\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\" placeholder=\"Search Assessment Category\" />\r\n </div>\r\n <app-workflow-pagination \r\n [pageCount]=\"assessmentCategory?.totalPage\" \r\n [total]=\"assessmentCategory?.totalRecords\" \r\n [start]=\"assessmentCategory?.start_value\" \r\n [end]=\"assessmentCategory?.end_value\" \r\n [activeAlphabet]=\"''\" \r\n (selectedAlphabet)=\"onAlphabetSelected($event)\" \r\n (selectedPage)=\"onPageSelection($event)\"\r\n ></app-workflow-pagination>\r\n <div *ngIf=\"assessmentCategory.data.length === 0 && !isLoader\" class=\"assessment-list-part vx-mb-4\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\r\n </div>\r\n <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part vx-mb-4\">\r\n <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\r\n <div class=\"assessment-list-heading\">Assessment already selected for this responsibility</div>\r\n <div class=\"assessment-list-item\">\r\n <div class=\"table-row\">\r\n <div class=\"table-column serial disabled\">\r\n <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\r\n </div>\r\n <div class=\"table-column sub-name\">\r\n <div class=\"name-inner\">\r\n <div class=\"value\" [appTooltip]=\"selectedAssessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.assessmentDetails?.assessment_name}}</div>\r\n <div class=\"within-part\">\r\n <span class=\"within-box\">Within</span>\r\n <span class=\"value\" [appTooltip]=\"selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-column question\">\r\n <div class=\"label\">{{selectedAssessment?.assessmentDetails?.questions}} {{selectedAssessment?.assessmentDetails?.questions > 1 ? 'Questions': 'Question'}}</div>\r\n <div class=\"buttons\">\r\n <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\"><i class=\"icons\"></i> Preview</button>\r\n <!-- <button class=\"action-btn\"><i class=\"icons\"></i> Edit</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"assessment-list-heading\">Select an Assessment for this responsibility</div>\r\n\r\n <!--\r\n Assessment category list \r\n active class is used for highlighting opened element\r\n -->\r\n <ng-container *ngIf=\"!isLoader\">\r\n <div *ngFor=\"let data of assessmentCategory.data; let i = index;\" class=\"assessment-list-item\" [class.active]=\"openedCategory.includes(i) || data.id === selectedAssessment?.category_id\">\r\n <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\" [class.disabled]=\"data?.assessmentcount < 1\">\r\n <div class=\"table-column serial\">\r\n <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}</div>\r\n </div>\r\n <div class=\"table-column name\">\r\n <div class=\"name-inner\">\r\n <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.category_name}}</div>\r\n <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\r\n <span class=\"within-box\">Within</span>\r\n <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.parent_tree}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-column action\">\r\n <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled] = \"data?.assessmentcount < 1\" [disabled]=\"data?.assessmentcount < 1\">\r\n <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\"></i>\r\n <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Assessment list start from here -->\r\n <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\r\n <ng-container *ngIf=\"data.assessmentData?.length > 0\">\r\n <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"assessment.id === selectedAssessment?.assessment_id && data.id === selectedAssessment?.category_id\">\r\n <div class=\"table-column serial\">\r\n <div [id]=\"'sub-sr-no'+ i+j\" class=\"sr-no\" appTooltip=\"{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n {{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\r\n <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"assessment?.id === selectedAssessment?.assessment_id && data?.id === selectedAssessment?.category_id\"\r\n (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio>\r\n </div>\r\n </div>\r\n <div class=\"table-column sub-name\">\r\n <div class=\"value\" [appTooltip]=\"'Mission and message, communications to external audiences'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assessment?.assessment_name}}</div>\r\n </div>\r\n <div class=\"table-column question\">\r\n <div class=\"label\">{{assessment?.questions}} {{assessment?.questions > 1 ? 'Questions' : 'Question'}}</div>\r\n <div class=\"buttons\">\r\n <button class=\"action-btn\" (click)=\"preview(assessment)\"><i class=\"icons\"></i> Preview</button>\r\n <!-- <button class=\"action-btn\"><i class=\"icons\"></i> Edit</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Loader loading isLoader -->\r\n <app-assessment-list-sub-loader *ngIf=\"!data.assessmentData?.length\"></app-assessment-list-sub-loader>\r\n <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Loader loading isLoader -->\r\n <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\r\n </div>\r\n <!-- No data image -->\r\n <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data to Display'\"></app-no-data>\r\n \r\n <app-floating-bar \r\n [selectedData]=\"[]\" \r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\" \r\n [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\"\r\n [selectedData]=\"selectedAssessment?.assessment_id ? [selectedAssessment?.assessmentDetails]:[]\"\r\n [displayElementKey]=\"'assessment_name'\" \r\n [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\" (deleteEvent)=\"deleteEvent($event)\"\r\n >\r\n </app-floating-bar>\r\n </div>\r\n</div>\r\n",
|
|
21321
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .assessment-list:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 242px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-right:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{width:86px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
|
|
21316
|
+
template: "\r\n<app-preview *ngIf=\"isPreview\" [questionData]=\"previewQuestionData\" (previewBack)=\"previewBack()\"></app-preview>\r\n<div class=\"assessment-list\" [class.animate]=\"animation\">\r\n <div class=\"assessment-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select an Assessment</div>\r\n </div>\r\n <div class=\"assessment-list-body\">\r\n <div class=\"search-block\">\r\n <i class=\"icons\"></i>\r\n <input type=\"text\" [(ngModel)]=\"searchAssessments\" (change)=\"onAssessmentSearch($event.target.value)\" placeholder=\"Search Assessment Category\" />\r\n </div>\r\n <app-workflow-pagination \r\n [pageCount]=\"assessmentCategory?.totalPage\" \r\n [total]=\"assessmentCategory?.totalRecords\" \r\n [start]=\"assessmentCategory?.start_value\" \r\n [end]=\"assessmentCategory?.end_value\" \r\n [activeAlphabet]=\"''\" \r\n (selectedAlphabet)=\"onAlphabetSelected($event)\" \r\n (selectedPage)=\"onPageSelection($event)\"\r\n ></app-workflow-pagination>\r\n <div *ngIf=\"assessmentCategory.data.length === 0 && !isLoader\" class=\"assessment-list-part vx-mb-4\">\r\n <app-no-data [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Assessments Found.'\"></app-no-data>\r\n </div>\r\n <div *ngIf=\"assessmentCategory.data.length || isLoader\" class=\"assessment-list-part vx-mb-4\">\r\n <div *ngIf=\"isEdit && selectedAssessment?.assessmentDetails?.assessment_name\" class=\"assessment-list-selected\">\r\n <div class=\"assessment-list-heading\">Assessment already selected for this responsibility</div>\r\n <div class=\"assessment-list-item\">\r\n <div class=\"table-row\">\r\n <div class=\"table-column serial disabled\">\r\n <app-cs-radio [disabled]=\"true\" class=\"disabled\" [checked]=\"true\" [readonly]=\"true\"></app-cs-radio>\r\n </div>\r\n <div class=\"table-column sub-name\">\r\n <div class=\"name-inner\">\r\n <div class=\"value\" [appTooltip]=\"selectedAssessment?.assessmentDetails?.assessment_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.assessmentDetails?.assessment_name}}</div>\r\n <div class=\"within-part\">\r\n <span class=\"within-box\">Within</span>\r\n <span class=\"value\" [appTooltip]=\"selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedAssessment?.category_details?.category_name + (selectedAssessment?.category_details?.parent_tree ? ' > ' + selectedAssessment?.category_details?.parent_tree : '')}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-column question\">\r\n <div class=\"buttons\">\r\n <button class=\"action-btn\" (click)=\"preview(selectedAssessment?.assessmentDetails)\"><i class=\"icons\"></i> Preview</button>\r\n <!-- <button class=\"action-btn\"><i class=\"icons\"></i> Edit</button> -->\r\n </div>\r\n <div class=\"label\">{{selectedAssessment?.assessmentDetails?.questions}} {{selectedAssessment?.assessmentDetails?.questions > 1 ? 'Questions': 'Question'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"assessment-list-heading\">Select an Assessment for this responsibility</div>\r\n\r\n <!--\r\n Assessment category list \r\n active class is used for highlighting opened element\r\n -->\r\n <ng-container *ngIf=\"!isLoader\">\r\n <div *ngFor=\"let data of assessmentCategory.data; let i = index;\" class=\"assessment-list-item\" [class.active]=\"openedCategory.includes(i) || data.id === selectedAssessment?.category_id\">\r\n <div class=\"table-row main-list\" (click)=\"showSubList(i, data?.id)\" [class.disabled]=\"data?.assessmentcount < 1\">\r\n <div class=\"table-column serial\">\r\n <div [id]=\"'sr-no' + i\" class=\"sr-no\" [appTooltip]=\"i + 1\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}</div>\r\n </div>\r\n <div class=\"table-column name\">\r\n <div class=\"name-inner\">\r\n <div class=\"value\" [appTooltip]=\"data.category_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.category_name}}</div>\r\n <div class=\"within-part\" *ngIf=\"data?.parent_tree\">\r\n <span class=\"within-box\">Within</span>\r\n <span class=\"value\" [appTooltip]=\"data.parent_tree\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{data?.parent_tree}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-column action\">\r\n <button [id]=\"'arrow' + i\" class=\"arrow\" [class.disabled] = \"data?.assessmentcount < 1\" [disabled]=\"data?.assessmentcount < 1\">\r\n <i *ngIf=\"!openedCategory.includes(i)\" class=\"icons\"></i>\r\n <i *ngIf=\"openedCategory.includes(i)\" class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Assessment list start from here -->\r\n <div *ngIf=\"openedCategory.includes(i)\" class=\"sub-list\">\r\n <ng-container *ngIf=\"data.assessmentData?.length > 0\">\r\n <div class=\"table-row\" *ngFor=\"let assessment of data.assessmentData; let j = index\" [class.active]=\"assessment.id === selectedAssessment?.assessment_id && data.id === selectedAssessment?.category_id\">\r\n <div class=\"table-column serial\">\r\n <div [id]=\"'sub-sr-no'+ i+j\" class=\"sr-no\" appTooltip=\"{{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\" placement=\"bottom\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"true\">\r\n {{dataPerPage * (assessmentPayload.page_no - 1) + (i + 1)}}.{{j + 1}}\r\n <app-cs-radio name=\"assessment\" [value]=\"assessment.id\" [checked]=\"assessment?.id === selectedAssessment?.assessment_id && data?.id === selectedAssessment?.category_id\"\r\n (checkedEvent)=\"setAssessment(data, assessment)\"></app-cs-radio>\r\n </div>\r\n </div>\r\n <div class=\"table-column sub-name\">\r\n <div class=\"value\" [appTooltip]=\"'Mission and message, communications to external audiences'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{assessment?.assessment_name}}</div>\r\n </div>\r\n <div class=\"table-column question\">\r\n <div class=\"buttons\">\r\n <button class=\"action-btn\" (click)=\"preview(assessment)\"><i class=\"icons\"></i> Preview</button>\r\n <!-- <button class=\"action-btn\"><i class=\"icons\"></i> Edit</button> -->\r\n </div>\r\n <div class=\"label\">{{assessment?.questions}} {{assessment?.questions > 1 ? 'Questions' : 'Question'}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Loader loading isLoader -->\r\n <app-assessment-list-sub-loader *ngIf=\"!data.assessmentData?.length\"></app-assessment-list-sub-loader>\r\n <!-- <app-line-loader *ngIf=\"!data.assessmentData?.length\" [loaderHeight]=\"'5'\"></app-line-loader> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Loader loading isLoader -->\r\n <app-assessment-list-loader *ngIf=\"isLoader\"></app-assessment-list-loader>\r\n </div>\r\n <!-- No data image -->\r\n <app-no-data *ngIf=\"!assessmentCategory.data.length && !isLoader\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No Data to Display'\"></app-no-data>\r\n \r\n <app-floating-bar \r\n [selectedData]=\"[]\" \r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\" \r\n [isDisabled]=\"!selectedAssessment?.assessment_id && !isDeleted\"\r\n [selectedData]=\"selectedAssessment?.assessment_id ? [selectedAssessment?.assessmentDetails]:[]\"\r\n [displayElementKey]=\"'assessment_name'\" \r\n [pluralText]=\"'Risk Categories selected'\" (closeEvent)=\"save()\" (deleteEvent)=\"deleteEvent($event)\"\r\n >\r\n </app-floating-bar>\r\n </div>\r\n</div>\r\n",
|
|
21317
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .assessment-list{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .assessment-list:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .assessment-list.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}::ng-deep .assessment-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .assessment-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .assessment-list-body .search-block{position:relative}::ng-deep .assessment-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .assessment-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .assessment-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .assessment-list-body app-workflow-pagination .pagination-sec{padding-bottom:0!important}::ng-deep .assessment-list-body .assessment-list-part{height:calc(100vh - 242px);overflow:auto;padding:8px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body .assessment-list-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-selected{margin-bottom:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-heading{color:#161b2f;font-size:12px;font-weight:600;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .main-list{cursor:pointer}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row.disabled{pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio{position:absolute;top:8px;left:0;opacity:0;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.serial .sr-no app-cs-radio .radio-item{position:absolute;left:8px;top:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name{width:calc(100% - 232px);min-width:calc(100% - 232px)}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .name-inner{width:100%}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.sub-name .value{color:#747576;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:20px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question{width:200px;max-width:200px;justify-content:flex-end}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons{display:flex;opacity:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:22px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;margin:0}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row .table-column.question .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .table-row:hover .table-column.question .buttons{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row:hover .table-column.serial .sr-no app-cs-radio,::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row.active .table-column.serial .sr-no app-cs-radio{opacity:1}::ng-deep .assessment-list-body .assessment-list-part .assessment-list-item .sub-list .table-row .table-column{height:32px}::ng-deep .assessment-list-body ul{padding:0;margin:0}::ng-deep .assessment-list-body ul.assessment{max-height:calc(100vh - 240px);overflow:auto;padding:16px 12px 0 0;width:calc(100% + 12px)}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .assessment-list-body ul.assessment::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .assessment-list-body ul.assessment li{padding:0 0 12px;list-style:none;display:flex;align-items:center;justify-content:space-between}::ng-deep .assessment-list-body ul.assessment li app-cs-radio{width:calc(100% - 260px)}::ng-deep .assessment-list-body ul.assessment li app-cs-radio .radio-item .value .name{font-size:12px;color:#161b2f;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .assessment-list-body ul.assessment li .right{display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px}::ng-deep .assessment-list-body ul.assessment li .right .buttons{display:flex;width:0;overflow:hidden;transition:all .2s ease-in-out}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn{background:#fff;border:1px solid #f1f1f1;border-radius:2px;color:#1e5dd3;font-size:11px;font-weight:500;line-height:24px;text-transform:uppercase;padding:0 8px;margin-left:12px;display:flex;align-items:center}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn i{margin-right:4px}::ng-deep .assessment-list-body ul.assessment li .right .buttons button.action-btn+button{margin-left:4px}::ng-deep .assessment-list-body ul.assessment li:hover .right .buttons{width:156px}.within-part{display:flex;align-items:center;padding-right:12px}.within-part .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;color:#747576}.within-box{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding:0 4px;margin-right:8px;line-height:12px}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
|
|
21322
21318
|
},] }
|
|
21323
21319
|
];
|
|
21324
21320
|
AssessmentListComponent.ctorParameters = function () { return [
|
|
@@ -30604,7 +30600,7 @@
|
|
|
30604
30600
|
VuiFloatingBarComponent.decorators = [
|
|
30605
30601
|
{ type: i0.Component, args: [{
|
|
30606
30602
|
selector: 'vui-floating-bar',
|
|
30607
|
-
template: "<div class=\"reviewer-floating-bar\">\r\n <div class=\"reviewer-floating-bar-container\">\r\n <div class=\"left\">\r\n <!-- <ng-container *ngIf=\"selectedData.length > 0\">\r\n <div class=\"counter\" *ngIf=\"selectedData?.length\"
|
|
30603
|
+
template: "<div class=\"reviewer-floating-bar\">\r\n <div class=\"reviewer-floating-bar-container\">\r\n <div class=\"left\">\r\n <!-- <ng-container *ngIf=\"selectedData.length > 0\">\r\n <div class=\"counter\" *ngIf=\"selectedData?.length\"\r\n placement=\"left\">{{selectedData?.length}}</div>\r\n <div class=\"name\" *ngIf=\"selectedData?.length>1\">\r\n <span *ngIf=\"selectedData?.slice(1).length === 1\">{{singularText}}</span>\r\n <span *ngIf=\"selectedData?.slice(1).length > 1\">{{pluralText}}</span>\r\n </div>\r\n </ng-container> -->\r\n <ng-content> </ng-content>\r\n </div>\r\n <div\r\n class=\"center\"\r\n *ngIf=\"showWorkflow && (mode === 'CREATE' || mode === 'EDIT')\"\r\n >\r\n <label>REVIEWER<br />WORKFLOW</label>\r\n <cs-select\r\n [(ngModel)]=\"selectedWorkflow\"\r\n (ngModelChange)=\"selectedWorkflowChange($event)\"\r\n [placeholder]=\"selectedWorkflow\"\r\n [class.disabled]=\"\r\n groupSelected.length &&\r\n selectedWorkflow === 'ANY REVIEWER CAN MARK THIS AS REVIEWED'\r\n \"\r\n >\r\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\r\n {{ data }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n <button\r\n *ngIf=\"showNextButton\"\r\n [disabled]=\"nextDisabled\"\r\n (click)=\"next()\"\r\n appRipple\r\n >\r\n Next <i class=\"icons\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
30608
30604
|
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .reviewer-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .reviewer-floating-bar-container .left{display:flex;align-items:center;width:60%}::ng-deep .reviewer-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .reviewer-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .reviewer-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:112px;overflow:hidden}::ng-deep .reviewer-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .reviewer-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .reviewer-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .reviewer-floating-bar-container .left .counter{border-radius:20px;background:#34aa44;border:none;color:#fff;font-size:9px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;margin:0 0 0 8px;padding:0 4px;justify-content:center;line-height:16px;min-width:24px}::ng-deep .reviewer-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .reviewer-floating-bar-container .left .name{margin-right:4px;color:#707070;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .reviewer-floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .reviewer-floating-bar-container .left .user-group-chip{background:#FFFFFF;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem;display:inline-flex;align-items:center;padding:0 8px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}::ng-deep .reviewer-floating-bar-container .left .user-group-chip .cross{color:#747576;font-size:10px;margin-right:4px;cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .reviewer-floating-bar-container .left .user-group-chip .cross:hover{background:#f1f1f1}::ng-deep .reviewer-floating-bar-container .left .user-group-chip .user-group-name{color:#161b2f;font-size:11px;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .reviewer-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .reviewer-floating-bar-container .center{width:30%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .reviewer-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .reviewer-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .reviewer-floating-bar-container .center cs-select.disabled{pointer-events:none;opacity:.6}::ng-deep .reviewer-floating-bar-container .center cs-select .selection-wrap .input-group input.value{height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .reviewer-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .reviewer-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .reviewer-floating-bar-container .center cs-select .selection-wrap .select-options cs-option.disabled{pointer-events:none}::ng-deep .reviewer-floating-bar-container .center cs-select .selection-wrap .select-options cs-option.disabled .list label span.value{opacity:.5}::ng-deep .reviewer-floating-bar-container .right{display:flex;align-items:center}::ng-deep .reviewer-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .reviewer-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .reviewer-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .reviewer-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .reviewer-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .reviewer-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .reviewer-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .reviewer-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .reviewer-floating-bar-container .right button:disabled{background:#F1F1F1!important;color:#747576!important;opacity:1}::ng-deep .reviewer-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep 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}.wf-action-list{width:220px}.wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.wf-action-list ul.action-item{display:block}.wf-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}.wf-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}.wf-action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}.wf-action-list ul.action-item li button:hover{background:#f3f3f3}.wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.wf-action-list ul.action-item li .avatar-card.within-con{display:block}.wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#1E5DD3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.wf-action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}.wf-action-list ul.action-item li .avatar-card.no-image{display:block}.wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.wf-action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.wf-action-list ul.action-item li .chip-item i{color:#747576;margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.wf-action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.wf-action-list ul.action-item li .chip-item span.id{font-size:9px}.wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.wf-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}.wf-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}.wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\n"]
|
|
30609
30605
|
},] }
|
|
30610
30606
|
];
|
|
@@ -32712,8 +32708,8 @@
|
|
|
32712
32708
|
FrequencyDialogContainerComponent.decorators = [
|
|
32713
32709
|
{ type: i0.Component, args: [{
|
|
32714
32710
|
selector: 'app-frequency-dialog-container',
|
|
32715
|
-
template: "<div class=\"frequency-dialog\">\r\n <div class=\"frequency-dialog-head vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\">\r\n <div class=\"frequency-dialog-title vx-fs-14 vx-fw-500 vx-label-txt\">Set a Reassessment Frequency</div>\r\n </div>\r\n <div class=\"frequency-dialog-body\">\r\n <div class=\"frequency-dialog-tab vx-mb-3 vx-d-flex\">\r\n <button (click)=\"switchTab('weekly')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'weekly'\">WEEKLY</button>\r\n <button (click)=\"switchTab('monthly')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'monthly'\">MONTHLY</button>\r\n <button (click)=\"switchTab('quarterly')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'quarterly'\">QUARTERLY</button>\r\n <button (click)=\"switchTab('biannual')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'biannual'\">BIANNUAL</button>\r\n <button (click)=\"switchTab('annual')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'annual'\">ANNUAL</button>\r\n <button (click)=\"switchTab('oneTime')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'oneTime'\">ONE TIME</button>\r\n </div>\r\n\r\n <div class=\"frequency-dialog-container
|
|
32716
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-dialog{border-top:3px solid #1E5DD3;position:fixed;top:0;right:31.25rem;bottom:0;left:0;z-index:11}::ng-deep .frequency-dialog-head{background:#FBFBFB;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-dialog-body{padding:1rem 2rem!important;height:calc(100vh - 7.75rem);overflow:auto}::ng-deep .frequency-dialog-tab{border-bottom:1px solid #f1f1f1}::ng-deep .frequency-dialog-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;margin-right:1.75rem!important}::ng-deep .frequency-dialog-tab button.active.tab-btn{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .frequency-dialog-footer{background:#fff;border-radius:.25rem;box-shadow:0 6px 12px #4681ef40;height:3rem;margin:0 2rem}::ng-deep .frequency-dialog-footer button{border-radius:.125rem;border:none}::ng-deep .frequency-dialog-footer button.cancel-btn{background:transparent}::ng-deep .frequency-dialog-footer button.next-btn{background:#1E5DD3}::ng-deep .frequency-dialog-footer button.disabled{background:#f1f1f1!important;color:#747576!important;pointer-events:none}\n"]
|
|
32711
|
+
template: "<div class=\"frequency-dialog\">\r\n <div class=\"frequency-dialog-head vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\">\r\n <div class=\"frequency-dialog-title vx-fs-14 vx-fw-500 vx-label-txt\">Set a Reassessment Frequency</div>\r\n </div>\r\n <div class=\"frequency-dialog-body\">\r\n <div class=\"frequency-dialog-tab vx-mb-3 vx-d-flex\">\r\n <button (click)=\"switchTab('weekly')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'weekly'\">WEEKLY</button>\r\n <button (click)=\"switchTab('monthly')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'monthly'\">MONTHLY</button>\r\n <button (click)=\"switchTab('quarterly')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'quarterly'\">QUARTERLY</button>\r\n <button (click)=\"switchTab('biannual')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'biannual'\">BIANNUAL</button>\r\n <button (click)=\"switchTab('annual')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'annual'\">ANNUAL</button>\r\n <button (click)=\"switchTab('oneTime')\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-6\" [class.active]=\"frequencyTab === 'oneTime'\">ONE TIME</button>\r\n </div>\r\n\r\n <div class=\"frequency-dialog-container\">\r\n <!-- <app-frequency-dialog-weekly *ngIf=\"frequencyTab === 'WEEKLY'\"></app-frequency-dialog-weekly> -->\r\n <app-frequency-dialog-weekly *ngIf=\"frequencyTab === 'weekly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-dialog-weekly>\r\n <!-- <app-frequency-dialog-monthly *ngIf=\"frequencyTab === 'MONTHLY'\"></app-frequency-dialog-monthly> -->\r\n <app-frequency-dialog-monthly *ngIf=\"frequencyTab === 'monthly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\">\r\n </app-frequency-dialog-monthly>\r\n <!-- <app-frequency-dialog-quarterly *ngIf=\"frequencyTab === 'QUARTERLY'\"></app-frequency-dialog-quarterly>\r\n <app-frequency-dialog-biannual *ngIf=\"frequencyTab === 'BIANNUAL'\"></app-frequency-dialog-biannual>\r\n <app-frequency-dialog-annual *ngIf=\"frequencyTab === 'ANNUAL'\"></app-frequency-dialog-annual>\r\n <app-frequency-dialog-one-time *ngIf=\"frequencyTab === 'ONETIME'\"></app-frequency-dialog-one-time> -->\r\n <app-frequency-dialog-quarterly \r\n *ngIf=\"frequencyTab === 'quarterly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\">\r\n </app-frequency-dialog-quarterly>\r\n <app-frequency-dialog-biannual \r\n *ngIf=\"frequencyTab === 'biannual'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\">\r\n </app-frequency-dialog-biannual>\r\n <app-frequency-dialog-annual \r\n *ngIf=\"frequencyTab === 'annual'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\">\r\n </app-frequency-dialog-annual>\r\n <app-frequency-dialog-one-time \r\n *ngIf=\"frequencyTab === 'oneTime'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\">\r\n </app-frequency-dialog-one-time>\r\n </div>\r\n </div>\r\n <div class=\"frequency-dialog-footer vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-3\">\r\n <div class=\"vx-fs-12 vx-paragraph-txt\">You have selected <span class=\"vx-fw-500 vx-label-txt\">{{currentTabName}}</span> frequency.</div>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <button class=\"cancel-btn vx-fs-11 vx-fw-500 vx-txt-red vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-lh-7\" (click)=\"close()\">CANCEL</button>\r\n <button class=\"next-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-ml-3 vx-d-flex vx-align-center vx-lh-7\" [class.disabled]=\"isNextDisabled\" (click)=\"save()\">NEXT <i class=\"icons vx-fs-14 vx-ml-2\"></i></button>\r\n </div>\r\n </div>\r\n</div>",
|
|
32712
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-dialog{border-top:3px solid #1E5DD3;position:fixed;top:0;right:31.25rem;bottom:0;left:0;z-index:11}::ng-deep .frequency-dialog-head{background:#FBFBFB;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-dialog-body{padding:1rem 2rem!important;height:calc(100vh - 7.75rem);overflow:auto}::ng-deep .frequency-dialog-container{padding:1rem}@media screen and (max-width: 1366px){::ng-deep .frequency-dialog-container{padding:0!important}}::ng-deep .frequency-dialog-tab{border-bottom:1px solid #f1f1f1}::ng-deep .frequency-dialog-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;margin-right:1.75rem!important}::ng-deep .frequency-dialog-tab button.active.tab-btn{color:#1e5dd3;border-color:#1e5dd3}::ng-deep .frequency-dialog-footer{background:#fff;border-radius:.25rem;box-shadow:0 6px 12px #4681ef40;height:3rem;margin:0 2rem}::ng-deep .frequency-dialog-footer button{border-radius:.125rem;border:none}::ng-deep .frequency-dialog-footer button.cancel-btn{background:transparent}::ng-deep .frequency-dialog-footer button.next-btn{background:#1E5DD3}::ng-deep .frequency-dialog-footer button.disabled{background:#f1f1f1!important;color:#747576!important;pointer-events:none}\n"]
|
|
32717
32713
|
},] }
|
|
32718
32714
|
];
|
|
32719
32715
|
FrequencyDialogContainerComponent.ctorParameters = function () { return [
|
|
@@ -33069,7 +33065,7 @@
|
|
|
33069
33065
|
{ type: i0.Component, args: [{
|
|
33070
33066
|
selector: 'app-frequency-dialog-checkbox-list',
|
|
33071
33067
|
template: "<div class=\"frequency-dialog-checkbox-list vx-d-flex\" [class.week]=\"id === 1\" [class.vx-align-center]=\"id === 1\" [class.month]=\"id === 2 || id === 4\" [class.vx-flex-wrap]=\"id === 2 || id === 4\">\r\n <!-- <div class=\"frequency-dialog-checkbox-list vx-d-flex vx-align-center week\"> -->\r\n <!-- <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">Monday</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">Tuesday</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">Wednesday</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">Thursday</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">Friday</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">Saturday</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">Sunday</div></app-cs-checkbox> -->\r\n\r\n <app-cs-checkbox \r\n *ngFor=\"let eachList of listArray; let i = index;\"\r\n [id]=\"i\" [value]=\"i\" [ngValue]=\"selectedIndex.includes(i)\" \r\n (ngValueChange)=\"selectedCheckbox.emit({checked:$event, index:i})\"\r\n [disabled]=\"id === 4 && selectedIndex.length == 2 && !selectedIndex.includes(i)\"\r\n >\r\n <div class=\"vx-fs-12 vx-label-txt\">{{eachList}}</div>\r\n </app-cs-checkbox>\r\n</div>\r\n\r\n<div *ngIf=\"false\" class=\"frequency-dialog-checkbox-list vx-d-flex vx-flex-wrap month\">\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">January</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">February</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">March</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">April</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">May</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">June</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">June</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">August</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">September</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">October</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">November</div></app-cs-checkbox>\r\n <app-cs-checkbox><div class=\"vx-fs-12 vx-label-txt\">December</div></app-cs-checkbox>\r\n</div>",
|
|
33072
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-dialog-checkbox-list{border-top:1px solid #f1f1f1}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox{border-right:1px solid #f1f1f1;padding:.75rem 1rem .75rem .75rem;height:2.5rem}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox:last-of-type{border-right:none}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox .checkbox-item{padding-left:1.5rem!important;position:relative;top:-6px}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox .checkbox-item .checkbox,::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox .checkbox-item .value{max-width:100%!important;margin:0!important}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox{border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;padding:.75rem 1rem .75rem .75rem;height:2.5rem;width:16.66%}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(6){border-right:none}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(7),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(8),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(9),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(10),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(11),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(12){border-bottom:none}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(12){border-right:none}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox .checkbox-item{padding-left:1.5rem!important;position:relative;top:-6px}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox .checkbox-item .checkbox,::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox .checkbox-item .value{max-width:100%!important;margin:0!important}\n"]
|
|
33068
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .frequency-dialog-checkbox-list{border-top:1px solid #f1f1f1}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox{border-right:1px solid #f1f1f1;padding:.75rem 1rem .75rem .75rem;height:2.5rem}@media screen and (max-width: 1366px){::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox{padding:.75rem .625rem!important}}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox:last-of-type{border-right:none}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox .checkbox-item{padding-left:1.5rem!important;position:relative;top:-6px}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox .checkbox-item .checkbox,::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .frequency-dialog-checkbox-list.week app-cs-checkbox .checkbox-item .value{max-width:100%!important;margin:0!important}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox{border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;padding:.75rem 1rem .75rem .75rem;height:2.5rem;width:16.66%}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(6){border-right:none}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(7),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(8),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(9),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(10),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(11),::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(12){border-bottom:none}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox:nth-child(12){border-right:none}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox .checkbox-item{padding-left:1.5rem!important;position:relative;top:-6px}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox .checkbox-item .checkbox,::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .frequency-dialog-checkbox-list.month app-cs-checkbox .checkbox-item .value{max-width:100%!important;margin:0!important}\n"]
|
|
33073
33069
|
},] }
|
|
33074
33070
|
];
|
|
33075
33071
|
FrequencyDialogCheckboxListComponent.ctorParameters = function () { return []; };
|
|
@@ -35830,9 +35826,11 @@
|
|
|
35830
35826
|
function ApprovalWorkflowComponent() {
|
|
35831
35827
|
this.hideDetails = false;
|
|
35832
35828
|
this.enableCreateForm = false;
|
|
35829
|
+
this.createApprovalClick = false;
|
|
35833
35830
|
this.selectedWorkflowNext = new i0.EventEmitter();
|
|
35834
35831
|
this.listCancelClicked = new i0.EventEmitter();
|
|
35835
35832
|
this.saveApprovalWorkflow = new i0.EventEmitter();
|
|
35833
|
+
this.closeCreateClicked = new i0.EventEmitter();
|
|
35836
35834
|
this.description = {
|
|
35837
35835
|
mode: 'prime',
|
|
35838
35836
|
colorPalette: true,
|
|
@@ -35843,6 +35841,13 @@
|
|
|
35843
35841
|
}
|
|
35844
35842
|
ApprovalWorkflowComponent.prototype.ngOnInit = function () {
|
|
35845
35843
|
console.log('approverWorkFlowList ngOnInit', this.approverWorkFlowList, this.enableCreateForm, this.editApprovalWorkflow);
|
|
35844
|
+
if (this.createApprovalClick) {
|
|
35845
|
+
this.enableCreateForm = true;
|
|
35846
|
+
}
|
|
35847
|
+
console.log('editWorkflowLevel', this.editWorkflowLevel);
|
|
35848
|
+
if (this.editWorkflowLevel.editLevel) {
|
|
35849
|
+
this.enableCreateForm = true;
|
|
35850
|
+
}
|
|
35846
35851
|
};
|
|
35847
35852
|
ApprovalWorkflowComponent.prototype.showDetails = function () {
|
|
35848
35853
|
this.hideDetails = !this.hideDetails;
|
|
@@ -35870,12 +35875,16 @@
|
|
|
35870
35875
|
this.mode = 'EDIT';
|
|
35871
35876
|
this.approverDetails = event;
|
|
35872
35877
|
};
|
|
35878
|
+
ApprovalWorkflowComponent.prototype.closeCreateFormClicked = function () {
|
|
35879
|
+
console.log('close in approval workflow');
|
|
35880
|
+
this.closeCreateClicked.emit();
|
|
35881
|
+
};
|
|
35873
35882
|
return ApprovalWorkflowComponent;
|
|
35874
35883
|
}());
|
|
35875
35884
|
ApprovalWorkflowComponent.decorators = [
|
|
35876
35885
|
{ type: i0.Component, args: [{
|
|
35877
35886
|
selector: 'app-approval-workflow',
|
|
35878
|
-
template: "<app-approval-workflow-list\r\n *ngIf=\"approverWorkFlowList.length && !enableCreateForm\"\r\n [approverWorkFlowList]=\"approverWorkFlowList\"\r\n (createApprovalClicked)=\"createApprovalClicked($event)\"\r\n (selectedWorkflowNext)=\"nextClicked($event)\"\r\n (listCancelClicked)=\"cancelClicked($event)\"\r\n (onApprovalEdit)=\"onApprovalEdit($event)\"\r\n [editApprovalWorkflow]=\"editApprovalWorkflow\"\r\n></app-approval-workflow-list>\r\n<app-approval-create-form\r\n *ngIf=\"!approverWorkFlowList.length || enableCreateForm\"\r\n [selectedCategory]=\"selectedCategory\"\r\n [approverWorkFlowList]=\"approverWorkFlowList\"\r\n [enableCreateForm]=\"enableCreateForm\"\r\n [allApprovers]=\"allApprovers\"\r\n [mode]=\"mode\"\r\n [approverDetails]=\"approverDetails\"\r\n (saveApprovalWorkflow)=\"approvalWorkflowAPICalled($event)\"\r\n></app-approval-create-form>\r\n",
|
|
35887
|
+
template: "<app-approval-workflow-list\r\n *ngIf=\"approverWorkFlowList.length && !enableCreateForm\"\r\n [approverWorkFlowList]=\"approverWorkFlowList\"\r\n (createApprovalClicked)=\"createApprovalClicked($event)\"\r\n (selectedWorkflowNext)=\"nextClicked($event)\"\r\n (listCancelClicked)=\"cancelClicked($event)\"\r\n (onApprovalEdit)=\"onApprovalEdit($event)\"\r\n [editApprovalWorkflow]=\"editApprovalWorkflow\"\r\n></app-approval-workflow-list>\r\n<app-approval-create-form\r\n *ngIf=\"!approverWorkFlowList.length || enableCreateForm\"\r\n [selectedCategory]=\"selectedCategory\"\r\n [approverWorkFlowList]=\"approverWorkFlowList\"\r\n [enableCreateForm]=\"enableCreateForm\"\r\n [allApprovers]=\"allApprovers\"\r\n [mode]=\"mode\"\r\n [approverDetails]=\"approverDetails\"\r\n (saveApprovalWorkflow)=\"approvalWorkflowAPICalled($event)\"\r\n (closeCreateClicked) = closeCreateFormClicked()\r\n [editWorkflowLevel]=\"editWorkflowLevel\"\r\n></app-approval-create-form>\r\n",
|
|
35879
35888
|
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .approval-workflow-dialog{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .approval-workflow-dialog:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .approval-workflow-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .approval-workflow-dialog-body-inner{height:calc(100vh - 10.75rem);overflow:hidden;overflow-y:auto;margin-bottom:1rem;padding-right:.5rem;width:calc(100% + .5rem)}::ng-deep .approval-workflow-dialog-body-inner::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .approval-workflow-dialog-body-inner::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .approval-workflow-dialog-body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form{width:30.75rem;max-height:calc(100vh - 10.75rem)}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row{position:relative}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-left{position:absolute;top:30px;left:0}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-left img{width:2.5rem;height:2.5rem}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-right{padding-left:3.75rem}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-right .label-heading .required{color:#eb2424;position:relative;top:-.125rem}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-right button.addMoreBtn{background:transparent;border-radius:0;border:none}::ng-deep .approval-workflow-dialog-body-inner .approval-table-head{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .approval-workflow-dialog-body-inner .approval-table-head .approval-table-row{border-radius:0;border:none;margin-bottom:0}::ng-deep .approval-workflow-dialog-body-inner .approval-table-head .approval-table-row .approval-table-column{color:#161b2f;height:1.5rem}::ng-deep .approval-workflow-dialog-body-inner .approval-table-body .approval-table-details{border:1px solid #f1f1f1;border-radius:0 0 .25rem .25rem;padding:1rem 2rem 0;margin-bottom:.25rem}::ng-deep .approval-workflow-dialog-body-inner .approval-table-body .approval-table-details .details-item button.details-chip-count{background:#fff;border-radius:.125rem;border:1px solid #f1f1f1;min-width:1.5rem;height:1.5rem}::ng-deep .approval-workflow-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item{border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-area{width:4.5rem}::ng-deep .approval-workflow-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-area .lavel-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4rem}::ng-deep .approval-workflow-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-chips{width:calc(100% - 4.5rem)}::ng-deep .approval-workflow-dialog-body-inner .approval-table-row{border-radius:.25rem;border:1px solid #f1f1f1;display:flex;align-items:center;position:relative;margin-bottom:.25rem}::ng-deep .approval-workflow-dialog-body-inner .approval-table-row.clickable{cursor:pointer}::ng-deep .approval-workflow-dialog-body-inner .approval-table-row button.create-approval-btn{background:transparent;border-radius:0;border:none;position:absolute;top:.25rem;right:0}::ng-deep .approval-workflow-dialog-body-inner .approval-table-row:hover .approval-table-column.serial app-cs-radio,::ng-deep .approval-workflow-dialog-body-inner .approval-table-row.active .approval-table-column.serial app-cs-radio{opacity:1}::ng-deep .approval-workflow-dialog-body-inner .approval-table-row.open{border-radius:.25rem .25rem 0 0;border-bottom:none;margin-bottom:0}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column{color:#747576;height:40px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.serial.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.serial.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.serial.serial app-cs-radio{position:absolute;top:12px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.workflow{width:calc(100% - 96px);min-width:calc(100% - 96px)}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.workflow .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 3rem)}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.action button.more-action,::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.action button.arrow{background:transparent;border:none;border-radius:0;height:100%;width:100%}::ng-deep .approval-workflow-dialog-body-inner .approval-table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .approval-workflow-dialog-body vui-floating-bar .reviewer-floating-bar{padding:0!important}\n"]
|
|
35880
35889
|
},] }
|
|
35881
35890
|
];
|
|
@@ -35885,9 +35894,12 @@
|
|
|
35885
35894
|
allApprovers: [{ type: i0.Input }],
|
|
35886
35895
|
selectedCategory: [{ type: i0.Input }],
|
|
35887
35896
|
editApprovalWorkflow: [{ type: i0.Input }],
|
|
35897
|
+
createApprovalClick: [{ type: i0.Input }],
|
|
35898
|
+
editWorkflowLevel: [{ type: i0.Input }],
|
|
35888
35899
|
selectedWorkflowNext: [{ type: i0.Output }],
|
|
35889
35900
|
listCancelClicked: [{ type: i0.Output }],
|
|
35890
|
-
saveApprovalWorkflow: [{ type: i0.Output }]
|
|
35901
|
+
saveApprovalWorkflow: [{ type: i0.Output }],
|
|
35902
|
+
closeCreateClicked: [{ type: i0.Output }]
|
|
35891
35903
|
};
|
|
35892
35904
|
|
|
35893
35905
|
var SelectApproversComponent = /** @class */ (function () {
|
|
@@ -35901,8 +35913,6 @@
|
|
|
35901
35913
|
}
|
|
35902
35914
|
SelectApproversComponent.prototype.ngOnInit = function () {
|
|
35903
35915
|
var _a, _b, _c;
|
|
35904
|
-
console.log('approverWorkFlowList', this.allApprovers);
|
|
35905
|
-
console.log('editApprovalData', this.editApprovalData);
|
|
35906
35916
|
if ((_a = this.editApprovalData) === null || _a === void 0 ? void 0 : _a.length) {
|
|
35907
35917
|
this.approvalLevelName = (_b = this.editApprovalData[0]) === null || _b === void 0 ? void 0 : _b.alias_name;
|
|
35908
35918
|
this.selectedType = (_c = this.editApprovalData[0]) === null || _c === void 0 ? void 0 : _c.type;
|
|
@@ -35914,7 +35924,6 @@
|
|
|
35914
35924
|
SelectApproversComponent.prototype.selectedUsers = function (event) {
|
|
35915
35925
|
// this.generatePayload(event);
|
|
35916
35926
|
this.generateApprovers(event.users);
|
|
35917
|
-
console.log('Selected users', event.users);
|
|
35918
35927
|
};
|
|
35919
35928
|
SelectApproversComponent.prototype.generateApprovers = function (approvers) {
|
|
35920
35929
|
var approversList = [];
|
|
@@ -35928,11 +35937,9 @@
|
|
|
35928
35937
|
};
|
|
35929
35938
|
});
|
|
35930
35939
|
this.generatePayload(approversList);
|
|
35931
|
-
console.log('approversList', approversList);
|
|
35932
35940
|
};
|
|
35933
35941
|
SelectApproversComponent.prototype.approvalType = function (type) {
|
|
35934
35942
|
this.selectedType = type;
|
|
35935
|
-
console.log('approvalType', type);
|
|
35936
35943
|
};
|
|
35937
35944
|
SelectApproversComponent.prototype.generatePayload = function (event) {
|
|
35938
35945
|
this.approversPayload = [];
|
|
@@ -35948,14 +35955,13 @@
|
|
|
35948
35955
|
},
|
|
35949
35956
|
];
|
|
35950
35957
|
this.selectedApprover.emit(this.approversPayload);
|
|
35951
|
-
console.log('this.approversPayload', this.approversPayload);
|
|
35952
35958
|
};
|
|
35953
35959
|
return SelectApproversComponent;
|
|
35954
35960
|
}());
|
|
35955
35961
|
SelectApproversComponent.decorators = [
|
|
35956
35962
|
{ type: i0.Component, args: [{
|
|
35957
35963
|
selector: 'app-select-approvers',
|
|
35958
|
-
template: "<div class=\"select-approvers-dialog\">\r\n <div class=\"select-approvers-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Approvers & Approval Workflow</div>\r\n </div>\r\n <div class=\"select-approvers-dialog-body\">\r\n <div class=\"select-approvers-dialog-body-inner\">\r\n <!-- Step 1 -->\r\n <div class=\"approvers-form-group vx-mb-2\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">STEP 1: APPROVAL LEVEL NAME <span class=\"vx-fs-14 vx-txt-red\">*</span></div>\r\n <input [(ngModel)]=\"approvalLevelName\" class=\"textField\" type=\"text\" placeholder=\"Level 1\" />\r\n </div>\r\n\r\n <!-- Step 2 -->\r\n <div class=\"approvers-form-group vx-mb-2\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">STEP 2: APPROVAL WORKFLOW TYPE <span class=\"vx-fs-14 vx-txt-red\">*</span></div>\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <app-cs-radio [checked]=\"selectedType === 'SEQUENTIAL'\">\r\n <div (click)=\"approvalType('SEQUENTIAL')\" class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\">\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/sequential.svg\" />\r\n <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\">SEQUENTIAL</div>\r\n <i class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\" [appTooltip]=\"'
|
|
35964
|
+
template: "<div class=\"select-approvers-dialog\">\r\n <div class=\"select-approvers-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Approvers & Approval Workflow</div>\r\n </div>\r\n <div class=\"select-approvers-dialog-body\">\r\n <div class=\"select-approvers-dialog-body-inner\">\r\n <!-- Step 1 -->\r\n <div class=\"approvers-form-group vx-mb-2\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">STEP 1: APPROVAL LEVEL NAME <span class=\"vx-fs-14 vx-txt-red\">*</span></div>\r\n <input [(ngModel)]=\"approvalLevelName\" class=\"textField\" type=\"text\" placeholder=\"Level 1\" />\r\n </div>\r\n\r\n <!-- Step 2 -->\r\n <div class=\"approvers-form-group vx-mb-2\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">STEP 2: APPROVAL WORKFLOW TYPE <span class=\"vx-fs-14 vx-txt-red\">*</span></div>\r\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\r\n <app-cs-radio [checked]=\"selectedType === 'SEQUENTIAL'\">\r\n <div (click)=\"approvalType('SEQUENTIAL')\" class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\">\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/sequential.svg\" />\r\n <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\">SEQUENTIAL</div>\r\n <i class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\" [appTooltip]=\"'The policy would be sent for approval one at a time in the sequence defined by you.'\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\"></i>\r\n </div>\r\n <div class=\"vx-d-block\">\r\n <span class=\"circle-selection\"></span>\r\n <i class=\"icons ckeck-selection vx-fs-16\"></i>\r\n </div>\r\n </div>\r\n </app-cs-radio>\r\n <app-cs-radio [checked]=\"selectedType === 'ROUNDROBIN'\">\r\n <div (click)=\"approvalType('ROUNDROBIN')\" class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\">\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/round-robin.svg\" />\r\n <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\">ROUND-ROBIN</div>\r\n <i class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\" [appTooltip]=\"'The policy will be sent for approval to all approvers at the same time. However, it is mandatory for all approvers to take action.'\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\"></i>\r\n </div>\r\n <div class=\"vx-d-block\">\r\n <span class=\"circle-selection\"></span>\r\n <i class=\"icons ckeck-selection vx-fs-16\"></i>\r\n </div>\r\n </div>\r\n </app-cs-radio>\r\n <app-cs-radio [checked]=\"selectedType === 'ANYONE'\">\r\n <div (click)=\"approvalType('ANYONE')\" class=\"approval-type vx-d-flex vx-align-center vx-justify-between vx-p-2 vx-pl-3 vx-pr-3\">\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/anyone.svg\" />\r\n <div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase\">ANY ONE</div>\r\n <i class=\"icons vx-fs-12 vx-txt-blue vx-ml-2\" [appTooltip]=\"'The policy will be sent for approval to all approvers at the same time. If anyone of the approver approves the policy, it will be considered as approved.'\" placement=\"bottom\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\"></i>\r\n </div>\r\n <div class=\"vx-d-block\">\r\n <span class=\"circle-selection\"></span>\r\n <i class=\"icons ckeck-selection vx-fs-16\"></i>\r\n </div>\r\n </div>\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 3 -->\r\n <div class=\"approvers-form-group\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">STEP 3: APPROVERS <span class=\"vx-fs-14 vx-txt-red\">*</span></div>\r\n <div class=\"approvers-user-group\">\r\n <!-- <app-owner-list [listHeading]=\"'Select Approvers'\" [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" [usersList]=\"allApprovers\" [showWorkflow]=\"true\" [usersList]=\"allApprovers\" [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" [mode]=\"'CREATE'\"></app-owner-list> -->\r\n <user-group-list [userlist]=\"allApprovers\" [groupEnabled]=\"false\" (cancel)=\"closeUserList()\" (save)=\"selectedUsers($event)\" [selectedUsers] = \"editApprovalData[0]?.approvers\r\n \"></user-group-list>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n",
|
|
35959
35965
|
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .select-approvers-dialog{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .select-approvers-dialog:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .select-approvers-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .select-approvers-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .select-approvers-dialog-body-inner{height:calc(100vh - 10.5rem);overflow:hidden;overflow-y:auto;padding-right:.75rem;width:calc(100% + .75rem)}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio{width:calc(33.33% - .25rem)}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item{width:100%}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radio,::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .radiomark{display:none!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value{margin-left:0!important;max-width:100%!important;width:100%}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type{border-radius:.25rem;border:1px solid #dbdbdb;width:100%}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type img{height:2rem;margin-right:.75rem}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .circle-selection{border-radius:50%;border:1px solid #dbdbdb;display:block;width:1rem;min-width:1rem;height:1rem}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item .value .approval-type .ckeck-selection{color:#34aa44;display:none}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type{background:#EEFCF0;border:1px solid #34AA44}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .circle-selection{display:none}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group app-cs-radio .radio-item input[type=radio]:checked~.value .approval-type .ckeck-selection{display:block}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list{position:static!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list:before{display:none!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list{animation:none!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-head{display:none!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body{padding:0!important;height:auto!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body-inner{border-radius:.25rem;border:1px solid #dbdbdb;padding-top:.75rem}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-tab{border-bottom:1px solid #dbdbdb;padding:.75rem .75rem 0}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block{padding:0 .75rem}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .search-block i{left:1.75rem}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-body .user-group-list-mid{padding:0 .75rem;width:100%;height:auto}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-mid{height:calc(100vh - 25.95rem)}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-footer{position:fixed;bottom:2rem;left:2rem;width:calc(100% - 35.25rem)}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group user-group-list .user-group-list .user-group-list-footer vui-floating-bar .reviewer-floating-bar{padding:0!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group app-owner-list .add-risk-owner-list{position:static!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group app-owner-list .add-risk-owner-list:before{display:none!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group app-owner-list .add-risk-owner-list .add-risk-owner-list-head{display:none!important}::ng-deep .select-approvers-dialog-body-inner .approvers-form-group .approvers-user-group app-owner-list .add-risk-owner-list .add-risk-owner-list-body{border-radius:.25rem;border:1px solid #dbdbdb;padding:0!important;height:auto!important;margin-bottom:1rem}\n"]
|
|
35960
35966
|
},] }
|
|
35961
35967
|
];
|
|
@@ -36339,15 +36345,16 @@
|
|
|
36339
36345
|
function ApprovalWorkflowListComponent() {
|
|
36340
36346
|
this.hideDetails = false;
|
|
36341
36347
|
this.openIndexId = -1;
|
|
36348
|
+
this.isNextDisabled = true;
|
|
36342
36349
|
this.createApprovalClicked = new i0.EventEmitter();
|
|
36343
36350
|
this.listCancelClicked = new i0.EventEmitter();
|
|
36344
36351
|
this.selectedWorkflowNext = new i0.EventEmitter();
|
|
36345
36352
|
this.onApprovalEdit = new i0.EventEmitter();
|
|
36346
36353
|
}
|
|
36347
36354
|
ApprovalWorkflowListComponent.prototype.ngOnInit = function () {
|
|
36348
|
-
console.log('approverWorkFlowList', this.approverWorkFlowList);
|
|
36349
36355
|
if (this.editApprovalWorkflow) {
|
|
36350
36356
|
this.selectedWorkflow = this.editApprovalWorkflow;
|
|
36357
|
+
this.isNextDisabled = false;
|
|
36351
36358
|
}
|
|
36352
36359
|
};
|
|
36353
36360
|
ApprovalWorkflowListComponent.prototype.showDetails = function (id) {
|
|
@@ -36355,32 +36362,33 @@
|
|
|
36355
36362
|
this.hideDetails = !this.hideDetails;
|
|
36356
36363
|
};
|
|
36357
36364
|
ApprovalWorkflowListComponent.prototype.createApprovalClick = function (event) {
|
|
36358
|
-
console.log('createApprovalClick', event);
|
|
36359
36365
|
this.createApprovalClicked.emit(event);
|
|
36360
36366
|
};
|
|
36361
36367
|
ApprovalWorkflowListComponent.prototype.selectApproval = function (approval) {
|
|
36362
36368
|
this.selectedWorkflow = approval;
|
|
36369
|
+
this.isNextDisabled = false;
|
|
36363
36370
|
console.log('selectedWorkflow', approval);
|
|
36364
36371
|
};
|
|
36365
36372
|
ApprovalWorkflowListComponent.prototype.cancelClicked = function () {
|
|
36366
|
-
console.log('cancel clicked');
|
|
36367
36373
|
this.listCancelClicked.emit(true);
|
|
36368
36374
|
};
|
|
36369
36375
|
ApprovalWorkflowListComponent.prototype.nextClicked = function () {
|
|
36370
|
-
console.log('next clicked', this.selectedWorkflow);
|
|
36371
36376
|
this.selectedWorkflowNext.emit(this.selectedWorkflow);
|
|
36372
36377
|
};
|
|
36373
36378
|
ApprovalWorkflowListComponent.prototype.onEdit = function (approverWorkflow) {
|
|
36374
36379
|
this.onApprovalEdit.emit(approverWorkflow);
|
|
36375
|
-
|
|
36380
|
+
};
|
|
36381
|
+
ApprovalWorkflowListComponent.prototype.removeWorkflow = function () {
|
|
36382
|
+
this.selectedWorkflow = null;
|
|
36383
|
+
this.isNextDisabled = true;
|
|
36376
36384
|
};
|
|
36377
36385
|
return ApprovalWorkflowListComponent;
|
|
36378
36386
|
}());
|
|
36379
36387
|
ApprovalWorkflowListComponent.decorators = [
|
|
36380
36388
|
{ type: i0.Component, args: [{
|
|
36381
36389
|
selector: 'app-approval-workflow-list',
|
|
36382
|
-
template: "<div class=\"approval-workflow-list-dialog\">\r\n <div\r\n class=\"approval-workflow-list-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\r\n >\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Approval Workflow</div>\r\n </div>\r\n <div class=\"approval-workflow-list-dialog-body\">\r\n <div *ngIf=\"true\" class=\"approval-workflow-list-dialog-body-inner\">\r\n <div class=\"approval-table\">\r\n <div class=\"approval-table-head\">\r\n <div class=\"approval-table-row\">\r\n <div\r\n class=\"approval-table-column vx-fs-11 vx-fw-500 vx-tt-uppercase serial\"\r\n >\r\n #\r\n </div>\r\n <div\r\n class=\"approval-table-column vx-fs-11 vx-fw-500 vx-tt-uppercase workflow\"\r\n >\r\n APPROVAL WORKFLOWS\r\n </div>\r\n <button\r\n (click)=\"createApprovalClick(true)\"\r\n class=\"create-approval-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\r\n >\r\n + CREATE AN APPROVAL WORKFLOW\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"approval-table-body\">\r\n <ng-container\r\n *ngFor=\"let approvalWorkflow of approverWorkFlowList; let i = index\"\r\n >\r\n <div\r\n (click)=\"showDetails(approvalWorkflow?._id)\"\r\n class=\"approval-table-row clickable\"\r\n [class.active]=\"selectedWorkflow?._id === approvalWorkflow?._id\"\r\n [class.open]=\"approvalWorkflow?._id === openIndexId\"\r\n >\r\n <div class=\"approval-table-column serial\">\r\n <div\r\n class=\"sr-no\"\r\n [appTooltip]=\"i + 1\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n {{ i + 1 }}\r\n </div>\r\n <app-cs-radio\r\n [checked]=\"selectedWorkflow?._id === approvalWorkflow?._id\"\r\n (checkedEvent)=\"selectApproval(approvalWorkflow)\"\r\n ></app-cs-radio>\r\n </div>\r\n <div class=\"approval-table-column workflow\">\r\n <div\r\n class=\"name vx-fs-12 vx-label-txt\"\r\n [appTooltip]=\"approvalWorkflow?.workflow_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ approvalWorkflow?.workflow_name }}\r\n </div>\r\n </div>\r\n <div class=\"approval-table-column action\" appStopPropagation>\r\n <button\r\n appPopover\r\n (click)=\"moreAction.popover()\"\r\n placement=\"right\"\r\n class=\"more-action vx-fs-16 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n </button>\r\n <app-popover #moreAction>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li>\r\n <button (click)=\"onEdit(approvalWorkflow)\">\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </li>\r\n <!-- <li>\r\n <button><i class=\"icons\"></i> Delete</button>\r\n </li> -->\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"approval-table-column action\">\r\n <button\r\n class=\"arrow vx-fs-12 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <i *ngIf=\"approvalWorkflow?._id !== openIndexId\" class=\"icons\"\r\n ></i\r\n >\r\n <i *ngIf=\"approvalWorkflow?._id === openIndexId\" class=\"icons\"\r\n ></i\r\n >\r\n </button>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"approvalWorkflow?._id === openIndexId\"\r\n class=\"approval-table-details\"\r\n >\r\n <div class=\"details-item vx-mb-2\">\r\n <div\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\"\r\n >\r\n WORKFLOW CRITERIA:\r\n </div>\r\n <div class=\"vx-d-flex\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-1\"\r\n *ngFor=\"\r\n let category of approvalWorkflow?.category_arr\r\n | slice : 0 : 3\r\n \"\r\n >\r\n <div\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Human Resource Policy'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ category?.category_name }}\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"approvalWorkflow?.category_arr?.length > 3\"\r\n appPopover\r\n (click)=\"criteriaAction.popover()\"\r\n placement=\"right\"\r\n class=\"details-chip-count vx-fs-11 vx-fw-500 vx-txt-blue vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n >\r\n + {{ approvalWorkflow?.category_arr?.length - 3 }}\r\n </button>\r\n <app-popover #criteriaAction>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let category of approvalWorkflow?.category_arr\r\n | slice : 3\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"category?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ category?.category_name }}</span\r\n >\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 class=\"details-item vx-mb-1\">\r\n <div\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\"\r\n >\r\n APPROVERS:\r\n </div>\r\n <div\r\n *ngFor=\"\r\n let approverLevel of approvalWorkflow?.approval_workflow;\r\n let k = index\r\n \"\r\n class=\"approver-item vx-mb-2 vx-pb-2 vx-d-flex vx-align-center\"\r\n >\r\n <div class=\"lavel-area vx-pl-1 vx-pr-1\">\r\n <div\r\n class=\"lavel-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n [appTooltip]=\"approverLevel?.level1\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ approverLevel?.level1 }}\r\n </div>\r\n <div\r\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n >\r\n {{ approverLevel?.type }}\r\n </div>\r\n </div>\r\n <div class=\"lavel-chips vx-d-flex vx-flex-wrap\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-1\"\r\n *ngFor=\"\r\n let approver of approverLevel?.approvers\r\n | slice : 0 : 3;\r\n let approverIndex = index\r\n \"\r\n >\r\n <div\r\n *ngIf=\"\r\n approverLevel?.type?.toLowerCase() === 'sequential' &&\r\n approverLevel?.approvers?.length < 3\r\n \"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{\r\n approverIndex == approverLevel?.approvers?.length - 1\r\n ? \"Final\"\r\n : approverIndex + 1\r\n }}\r\n </div>\r\n <div\r\n *ngIf=\"approverLevel?.approvers?.length > 3\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ approverIndex + 1 }}\r\n </div>\r\n <div\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"approver?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ approver?.member_name }}\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"approverLevel?.approvers?.length > 3\"\r\n appPopover\r\n (click)=\"approversAction.popover()\"\r\n placement=\"right\"\r\n class=\"details-chip-count vx-fs-11 vx-fw-500 vx-txt-blue vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n >\r\n + {{ approverLevel?.approvers?.length - 3 }}\r\n </button>\r\n <app-popover #approversAction>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let approver of approverLevel?.approvers\r\n | slice : 3;\r\n let approverIndex = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <div\r\n *ngIf=\"\r\n approverLevel?.type?.toLowerCase() !==\r\n 'sequential'\r\n \"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ approverIndex + 4 }}\r\n </div>\r\n <div\r\n *ngIf=\"\r\n approverLevel?.type?.toLowerCase() ===\r\n 'sequential'\r\n \"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{\r\n approverIndex + 3 ===\r\n approverLevel?.approvers?.length - 1\r\n ? \"Final\"\r\n : approverIndex + 4\r\n }}\r\n </div>\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"approver?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ approver?.member_name }}</span\r\n >\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 </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <vui-floating-bar\r\n (closeList)=\"cancelClicked()\"\r\n (closeEvent)=\"nextClicked()\"\r\n ></vui-floating-bar>\r\n </div>\r\n</div>\r\n",
|
|
36383
|
-
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .approval-workflow-list-dialog{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .approval-workflow-list-dialog:before{background:#
|
|
36390
|
+
template: "<div class=\"approval-workflow-list-dialog\">\r\n <div\r\n class=\"approval-workflow-list-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\r\n >\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select Approval Workflow</div>\r\n </div>\r\n <div class=\"approval-workflow-list-dialog-body\">\r\n <div *ngIf=\"true\" class=\"approval-workflow-list-dialog-body-inner\">\r\n <div class=\"approval-table\">\r\n <div class=\"approval-table-head\">\r\n <div class=\"approval-table-row\">\r\n <div\r\n class=\"approval-table-column vx-fs-11 vx-fw-500 vx-tt-uppercase serial\"\r\n >\r\n #\r\n </div>\r\n <div\r\n class=\"approval-table-column vx-fs-11 vx-fw-500 vx-tt-uppercase workflow\"\r\n >\r\n APPROVAL WORKFLOWS\r\n </div>\r\n <button\r\n (click)=\"createApprovalClick(true)\"\r\n class=\"create-approval-btn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\r\n >\r\n + CREATE AN APPROVAL WORKFLOW\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"approval-table-body\">\r\n <ng-container\r\n *ngFor=\"let approvalWorkflow of approverWorkFlowList; let i = index\"\r\n >\r\n <div\r\n (click)=\"showDetails(approvalWorkflow?._id)\"\r\n class=\"approval-table-row clickable\"\r\n [class.active]=\"selectedWorkflow?._id === approvalWorkflow?._id\"\r\n [class.open]=\"approvalWorkflow?._id === openIndexId\"\r\n >\r\n <div class=\"approval-table-column serial\">\r\n <div\r\n class=\"sr-no\"\r\n [appTooltip]=\"i + 1\"\r\n placement=\"bottom\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"true\"\r\n >\r\n {{ i + 1 }}\r\n </div>\r\n <app-cs-radio\r\n [checked]=\"selectedWorkflow?._id === approvalWorkflow?._id\"\r\n (checkedEvent)=\"selectApproval(approvalWorkflow)\"\r\n ></app-cs-radio>\r\n </div>\r\n <div class=\"approval-table-column workflow\">\r\n <div\r\n class=\"name vx-fs-12 vx-label-txt\"\r\n [appTooltip]=\"approvalWorkflow?.workflow_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ approvalWorkflow?.workflow_name }}\r\n </div>\r\n </div>\r\n <div class=\"approval-table-column action\" appStopPropagation>\r\n <button\r\n appPopover\r\n (click)=\"moreAction.popover()\"\r\n placement=\"right\"\r\n class=\"more-action vx-fs-16 vx-txt-blue vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n </button>\r\n <app-popover #moreAction>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li>\r\n <button (click)=\"onEdit(approvalWorkflow)\">\r\n <i class=\"icons\"></i> Edit\r\n </button>\r\n </li>\r\n <!-- <li>\r\n <button><i class=\"icons\"></i> Delete</button>\r\n </li> -->\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n <div class=\"approval-table-column action\">\r\n <button\r\n class=\"arrow vx-fs-12 vx-paragraph-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <i *ngIf=\"approvalWorkflow?._id !== openIndexId\" class=\"icons\"\r\n ></i\r\n >\r\n <i *ngIf=\"approvalWorkflow?._id === openIndexId\" class=\"icons\"\r\n ></i\r\n >\r\n </button>\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"approvalWorkflow?._id === openIndexId\"\r\n class=\"approval-table-details\"\r\n >\r\n <div class=\"details-item vx-mb-2\">\r\n <div\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\"\r\n >\r\n WORKFLOW CRITERIA:\r\n </div>\r\n <div class=\"vx-d-flex\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-1\"\r\n *ngFor=\"\r\n let category of approvalWorkflow?.category_arr\r\n | slice : 0 : 3\r\n \"\r\n >\r\n <div\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Human Resource Policy'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ category?.category_name }}\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"approvalWorkflow?.category_arr?.length > 3\"\r\n appPopover\r\n (click)=\"criteriaAction.popover()\"\r\n placement=\"right\"\r\n class=\"details-chip-count vx-fs-11 vx-fw-500 vx-txt-blue vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n >\r\n + {{ approvalWorkflow?.category_arr?.length - 3 }}\r\n </button>\r\n <app-popover #criteriaAction>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let category of approvalWorkflow?.category_arr\r\n | slice : 3\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"category?.category_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ category?.category_name }}</span\r\n >\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 class=\"details-item vx-mb-1\">\r\n <div\r\n class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\"\r\n >\r\n APPROVERS:\r\n </div>\r\n <div\r\n *ngFor=\"\r\n let approverLevel of approvalWorkflow?.approval_workflow;\r\n let k = index\r\n \"\r\n class=\"approver-item vx-mb-2 vx-pb-2 vx-d-flex vx-align-center\"\r\n >\r\n <div class=\"lavel-area vx-pl-1 vx-pr-1\">\r\n <div\r\n class=\"lavel-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n [appTooltip]=\"approverLevel?.level1\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ approverLevel?.level1 }}\r\n </div>\r\n <div\r\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n >\r\n {{ approverLevel?.type }}\r\n </div>\r\n </div>\r\n <div class=\"lavel-chips vx-d-flex vx-flex-wrap\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-1\"\r\n *ngFor=\"\r\n let approver of approverLevel?.approvers\r\n | slice : 0 : 3;\r\n let approverIndex = index\r\n \"\r\n >\r\n <div\r\n *ngIf=\"\r\n approverLevel?.type?.toLowerCase() === 'sequential' &&\r\n approverLevel?.approvers?.length < 3\r\n \"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{\r\n approverIndex == approverLevel?.approvers?.length - 1\r\n ? \"Final\"\r\n : approverIndex + 1\r\n }}\r\n </div>\r\n <div\r\n *ngIf=\"approverLevel?.approvers?.length > 3\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ approverIndex + 1 }}\r\n </div>\r\n <div\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"approver?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ approver?.member_name }}\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"approverLevel?.approvers?.length > 3\"\r\n appPopover\r\n (click)=\"approversAction.popover()\"\r\n placement=\"right\"\r\n class=\"details-chip-count vx-fs-11 vx-fw-500 vx-txt-blue vx-pl-1 vx-pr-1 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"\r\n >\r\n + {{ approverLevel?.approvers?.length - 3 }}\r\n </button>\r\n <app-popover #approversAction>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let approver of approverLevel?.approvers\r\n | slice : 3;\r\n let approverIndex = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <div\r\n *ngIf=\"\r\n approverLevel?.type?.toLowerCase() !==\r\n 'sequential'\r\n \"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{ approverIndex + 4 }}\r\n </div>\r\n <div\r\n *ngIf=\"\r\n approverLevel?.type?.toLowerCase() ===\r\n 'sequential'\r\n \"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{\r\n approverIndex + 3 ===\r\n approverLevel?.approvers?.length - 1\r\n ? \"Final\"\r\n : approverIndex + 4\r\n }}\r\n </div>\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"approver?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ approver?.member_name }}</span\r\n >\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 </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <vui-floating-bar\r\n (closeList)=\"cancelClicked()\"\r\n (closeEvent)=\"nextClicked()\"\r\n [nextDisabled]=\"isNextDisabled\"\r\n >\r\n <ng-container *ngIf=\"selectedWorkflow\">\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-mr-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\r\n (click)=\"removeWorkflow()\"\r\n ></i\r\n >\r\n <span class=\"chipName vx-fs-11 vx-label-txt\">\r\n {{ selectedWorkflow?.workflow_name }}</span\r\n >\r\n </div>\r\n </ng-container>\r\n </vui-floating-bar>\r\n </div>\r\n</div>\r\n",
|
|
36391
|
+
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .approval-workflow-list-dialog{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .approval-workflow-list-dialog:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .approval-workflow-list-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-list-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .approval-workflow-list-dialog-body-inner{height:calc(100vh - 10.75rem);overflow:hidden;overflow-y:auto;margin-bottom:1rem;padding-right:.5rem;width:calc(100% + .5rem)}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head .approval-table-row{border-radius:0;border:none;margin-bottom:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-head .approval-table-row .approval-table-column{color:#161b2f;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details{border:1px solid #f1f1f1;border-radius:0 0 .25rem .25rem;padding:1rem 2rem 0;margin-bottom:.25rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item button.details-chip-count{background:#fff;border-radius:.125rem;border:1px solid #f1f1f1;min-width:1.5rem;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item{border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-area{width:4.5rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-area .lavel-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-body .approval-table-details .details-item .approver-item .lavel-chips{width:calc(100% - 4.5rem)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row{border-radius:.25rem;border:1px solid #f1f1f1;display:flex;align-items:center;position:relative;margin-bottom:.25rem}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.clickable{cursor:pointer}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row button.create-approval-btn{background:transparent;border-radius:0;border:none;position:absolute;top:.25rem;right:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row:hover .approval-table-column.serial app-cs-radio,::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.active .approval-table-column.serial app-cs-radio{opacity:1}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-row.open{border-radius:.25rem .25rem 0 0;border-bottom:none;margin-bottom:0}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column{color:#747576;height:40px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.serial.serial app-cs-radio{position:absolute;top:12px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.workflow{width:calc(100% - 96px);min-width:calc(100% - 96px)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.workflow .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 3rem)}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.more-action,::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.arrow{background:transparent;border:none;border-radius:0;height:100%;width:100%}::ng-deep .approval-workflow-list-dialog-body-inner .approval-table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .reviewer-floating-bar{padding:0!important}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .approval-workflow-list-dialog-body vui-floating-bar .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}\n"]
|
|
36384
36392
|
},] }
|
|
36385
36393
|
];
|
|
36386
36394
|
ApprovalWorkflowListComponent.ctorParameters = function () { return []; };
|
|
@@ -36422,6 +36430,7 @@
|
|
|
36422
36430
|
this.selectedCategoryId = [];
|
|
36423
36431
|
this.mode = 'CREATE';
|
|
36424
36432
|
this.saveApprovalWorkflow = new i0.EventEmitter();
|
|
36433
|
+
this.closeCreateClicked = new i0.EventEmitter();
|
|
36425
36434
|
this.description = {
|
|
36426
36435
|
mode: 'prime',
|
|
36427
36436
|
colorPalette: true,
|
|
@@ -36430,14 +36439,15 @@
|
|
|
36430
36439
|
};
|
|
36431
36440
|
}
|
|
36432
36441
|
ApprovalCreateFormComponent.prototype.ngOnInit = function () {
|
|
36433
|
-
|
|
36434
|
-
console.log('approvalWorkflows to display on init', this.approvalWorkflows);
|
|
36442
|
+
var _a, _b, _c;
|
|
36435
36443
|
if (this.mode == 'EDIT') {
|
|
36436
36444
|
this.populateApprover();
|
|
36437
36445
|
}
|
|
36446
|
+
if ((_a = this.editWorkflowLevel) === null || _a === void 0 ? void 0 : _a.editLevel) {
|
|
36447
|
+
this.editApproval((_b = this.editWorkflowLevel) === null || _b === void 0 ? void 0 : _b.editLevel, (_c = this.editWorkflowLevel) === null || _c === void 0 ? void 0 : _c.index);
|
|
36448
|
+
}
|
|
36438
36449
|
};
|
|
36439
36450
|
ApprovalCreateFormComponent.prototype.createApprovalAction = function (event) {
|
|
36440
|
-
console.log('createApprovalAction', event);
|
|
36441
36451
|
if (event.toLowerCase() === 'approval') {
|
|
36442
36452
|
this.enableApprovalCreate = true;
|
|
36443
36453
|
}
|
|
@@ -36449,34 +36459,26 @@
|
|
|
36449
36459
|
};
|
|
36450
36460
|
ApprovalCreateFormComponent.prototype.getCategoryId = function (category) {
|
|
36451
36461
|
this.selectedCategoryId = category.map(function (cat) { return cat.item_id; });
|
|
36452
|
-
console.log('this.selectedCategoryId', this.selectedCategoryId);
|
|
36453
36462
|
};
|
|
36454
36463
|
ApprovalCreateFormComponent.prototype.saveCategoryList = function (event) {
|
|
36455
36464
|
this.selectedCat = event;
|
|
36456
36465
|
this.filterSelectedCategory(event);
|
|
36457
36466
|
this.enablePolicyCategory = false;
|
|
36458
|
-
console.log('category list saveCategoryList', event);
|
|
36459
|
-
console.log('category selected', event);
|
|
36460
36467
|
};
|
|
36461
36468
|
ApprovalCreateFormComponent.prototype.filterSelectedCategory = function (selectedCategory) {
|
|
36462
36469
|
this.filteredCategory = this.selectedCategory.filter(function (category) { return selectedCategory.includes(category._id); });
|
|
36463
36470
|
this.getCategoryId(this.filteredCategory);
|
|
36464
|
-
console.log('filteredCategory', this.filteredCategory);
|
|
36465
36471
|
};
|
|
36466
36472
|
ApprovalCreateFormComponent.prototype.removeCategory = function (event) {
|
|
36467
36473
|
var _a;
|
|
36468
|
-
console.log('this.filteredCategory 1', this.filteredCategory);
|
|
36469
36474
|
var categoryIndex = this.filteredCategory.findIndex(function (category) { return (category === null || category === void 0 ? void 0 : category.item_id) === (event === null || event === void 0 ? void 0 : event.item_id); });
|
|
36470
36475
|
(_a = this.filteredCategory) === null || _a === void 0 ? void 0 : _a.splice(categoryIndex, 1);
|
|
36471
|
-
console.log('this.filteredCategory 2', this.filteredCategory);
|
|
36472
36476
|
};
|
|
36473
36477
|
ApprovalCreateFormComponent.prototype.closeCategoryList = function () {
|
|
36474
|
-
console.log('close category list', this.createDescription);
|
|
36475
36478
|
this.enablePolicyCategory = false;
|
|
36476
36479
|
};
|
|
36477
36480
|
ApprovalCreateFormComponent.prototype.enableCategory = function (event) {
|
|
36478
36481
|
this.enablePolicyCategory = event;
|
|
36479
|
-
console.log('selectedCat', this.selectedCat);
|
|
36480
36482
|
};
|
|
36481
36483
|
ApprovalCreateFormComponent.prototype.closeSelectApprover = function () {
|
|
36482
36484
|
this.enableApprovalLevel = false;
|
|
@@ -36484,26 +36486,20 @@
|
|
|
36484
36486
|
ApprovalCreateFormComponent.prototype.selectedApprover = function (event) {
|
|
36485
36487
|
var _a, _b;
|
|
36486
36488
|
this.selectApprovalPayload = event;
|
|
36487
|
-
console.log('close selected', this.selectApprovalPayload, this.editIndex, this.editApprovalData);
|
|
36488
|
-
console.log('approvalWorkflows selectedApprover', this.approvalWorkflows);
|
|
36489
36489
|
if (this.editIndex !== -1) {
|
|
36490
36490
|
(_a = this.approvalWorkflows) === null || _a === void 0 ? void 0 : _a.splice(this.editIndex, 1);
|
|
36491
36491
|
(_b = this.approvalWorkflows) === null || _b === void 0 ? void 0 : _b.splice(this.editIndex, 0, event[0]);
|
|
36492
36492
|
this.editIndex = -1;
|
|
36493
36493
|
this.editApprovalData = [];
|
|
36494
|
-
console.log(' hi in if');
|
|
36495
36494
|
}
|
|
36496
36495
|
else {
|
|
36497
|
-
console.log('hi in else');
|
|
36498
36496
|
this.approvalWorkflows.push(event[0]);
|
|
36499
36497
|
}
|
|
36500
36498
|
this.enableApprovalLevel = false;
|
|
36501
36499
|
};
|
|
36502
36500
|
ApprovalCreateFormComponent.prototype.deleteLevel = function (index) {
|
|
36503
36501
|
// Approver Level delete
|
|
36504
|
-
console.log('this.approvalWorkflows', this.approvalWorkflows, index);
|
|
36505
36502
|
this.approvalWorkflows.splice(index, 1);
|
|
36506
|
-
console.log('this.approvalWorkflows after splice', this.approvalWorkflows, index);
|
|
36507
36503
|
for (var i = index; i < this.approvalWorkflows.length; i++) {
|
|
36508
36504
|
if (this.approvalWorkflows[index]['level1'] ===
|
|
36509
36505
|
this.approvalWorkflows[index]['alias_name']) {
|
|
@@ -36511,16 +36507,6 @@
|
|
|
36511
36507
|
}
|
|
36512
36508
|
this.approvalWorkflows[index]['level1'] = "Level " + (i + 1);
|
|
36513
36509
|
}
|
|
36514
|
-
console.log('this.approvalWorkflows after delete', this.approvalWorkflows);
|
|
36515
|
-
// delete this.approvalWorkflows[`level${i + 1}`];
|
|
36516
|
-
// const newObj: any = {};
|
|
36517
|
-
// Object.keys(this.approvalWorkflows).forEach((item, index) => { // Renaming the keys of the object in sequential order
|
|
36518
|
-
// const key = item.substring(0, item.lastIndexOf('l') + 1).concat(`${index + 1}`);
|
|
36519
|
-
// newObj[key] = this.approvalWorkflows[item];
|
|
36520
|
-
// });
|
|
36521
|
-
// this.approvalWorkflows = Object.assign({}, newObj);
|
|
36522
|
-
// this.levels--;
|
|
36523
|
-
// this.checkLevel();
|
|
36524
36510
|
};
|
|
36525
36511
|
ApprovalCreateFormComponent.prototype.checkLevel = function () {
|
|
36526
36512
|
if (this.levels === 0) {
|
|
@@ -36531,10 +36517,9 @@
|
|
|
36531
36517
|
this.editApprovalData = [approval];
|
|
36532
36518
|
this.editIndex = index;
|
|
36533
36519
|
this.enableApprovalLevel = true;
|
|
36534
|
-
console.log('approval workflow ', this.editApprovalData, this.editIndex);
|
|
36535
36520
|
};
|
|
36536
36521
|
ApprovalCreateFormComponent.prototype.closeCreateForm = function () {
|
|
36537
|
-
|
|
36522
|
+
this.closeCreateClicked.emit();
|
|
36538
36523
|
};
|
|
36539
36524
|
ApprovalCreateFormComponent.prototype.nextClick = function () {
|
|
36540
36525
|
this.removeMemberNameKey();
|
|
@@ -36547,7 +36532,6 @@
|
|
|
36547
36532
|
return (Object.assign({}, rest));
|
|
36548
36533
|
}) }));
|
|
36549
36534
|
});
|
|
36550
|
-
console.log('this.approvalWorkflows removeMemberNameKey', this.approvalWorkflows);
|
|
36551
36535
|
this.generatePayload();
|
|
36552
36536
|
};
|
|
36553
36537
|
ApprovalCreateFormComponent.prototype.generatePayload = function () {
|
|
@@ -36573,7 +36557,6 @@
|
|
|
36573
36557
|
this.policyService.createApprovalWorkflow(payload).subscribe({
|
|
36574
36558
|
next: function (res) {
|
|
36575
36559
|
_this.saveApprovalWorkflow.emit(true);
|
|
36576
|
-
console.log('policy create', res);
|
|
36577
36560
|
},
|
|
36578
36561
|
error: function (err) {
|
|
36579
36562
|
console.log(err);
|
|
@@ -36587,7 +36570,6 @@
|
|
|
36587
36570
|
.subscribe({
|
|
36588
36571
|
next: function (res) {
|
|
36589
36572
|
_this.saveApprovalWorkflow.emit(true);
|
|
36590
|
-
console.log('policy create', res);
|
|
36591
36573
|
},
|
|
36592
36574
|
error: function (err) {
|
|
36593
36575
|
console.log(err);
|
|
@@ -36595,20 +36577,36 @@
|
|
|
36595
36577
|
});
|
|
36596
36578
|
};
|
|
36597
36579
|
ApprovalCreateFormComponent.prototype.populateApprover = function () {
|
|
36598
|
-
var
|
|
36580
|
+
var _d = this.approverDetails, workflow_name = _d.workflow_name, approval_workflow = _d.approval_workflow, description = _d.description, category_arr = _d.category_arr;
|
|
36599
36581
|
this.workflowName = workflow_name;
|
|
36600
36582
|
this.approvalWorkflows = approval_workflow;
|
|
36601
36583
|
this.description = description;
|
|
36584
|
+
var categoryDetails = category_arr.map(function (category) {
|
|
36585
|
+
return {
|
|
36586
|
+
item_id: category === null || category === void 0 ? void 0 : category.cal_category_id,
|
|
36587
|
+
item_name: category === null || category === void 0 ? void 0 : category.category_name,
|
|
36588
|
+
_id: category === null || category === void 0 ? void 0 : category._id,
|
|
36589
|
+
parent_items: [],
|
|
36590
|
+
parent_item_ids: [],
|
|
36591
|
+
custom_tags: [],
|
|
36592
|
+
};
|
|
36593
|
+
});
|
|
36594
|
+
this.filteredCategory = categoryDetails;
|
|
36602
36595
|
};
|
|
36603
36596
|
ApprovalCreateFormComponent.prototype.closeForm = function () {
|
|
36604
36597
|
this.saveApprovalWorkflow.emit();
|
|
36605
36598
|
};
|
|
36599
|
+
ApprovalCreateFormComponent.prototype.deselectUser = function (approver, index) {
|
|
36600
|
+
var _a, _b;
|
|
36601
|
+
var removeIndex = (_a = this.approvalWorkflows[index]) === null || _a === void 0 ? void 0 : _a.approvers.findIndex(function (ele) { return (ele === null || ele === void 0 ? void 0 : ele.member_id) === (approver === null || approver === void 0 ? void 0 : approver.member_id); });
|
|
36602
|
+
(_b = this.approvalWorkflows[index]) === null || _b === void 0 ? void 0 : _b.approvers.splice(removeIndex, 1);
|
|
36603
|
+
};
|
|
36606
36604
|
return ApprovalCreateFormComponent;
|
|
36607
36605
|
}());
|
|
36608
36606
|
ApprovalCreateFormComponent.decorators = [
|
|
36609
36607
|
{ type: i0.Component, args: [{
|
|
36610
36608
|
selector: 'app-approval-create-form',
|
|
36611
|
-
template: "<div class=\"approval-workflow-dialog\">\r\n <div\r\n class=\"approval-workflow-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\r\n >\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\r\n <button (click)=\"closeForm()\" class=\"back-btn vx-p-0 vx-m-0\">\r\n <i class=\"icons vx-mr-1\"></i></button\r\n >Select Approval Workflow\r\n </div>\r\n </div>\r\n <div class=\"approval-workflow-dialog-body\">\r\n <app-no-data\r\n *ngIf=\"!approverWorkFlowList.length && !enableApprovalCreate\"\r\n [noDataImage]=\"\r\n 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval-workflow.svg'\r\n \"\r\n [noDataText]=\"\r\n 'You did not set any approval workflow.<br>Click on the <strong>Create An Approval Workflow</strong> button to begin.'\r\n \"\r\n [noDataButton]=\"'CREATE AN APPROVAL WORKFLOW'\"\r\n [button]=\"'approval'\"\r\n (buttonAction)=\"createApprovalAction($event)\"\r\n ></app-no-data>\r\n\r\n <div\r\n *ngIf=\"enableApprovalCreate || enableCreateForm\"\r\n class=\"approval-workflow-dialog-body-inner vx-d-flex vx-align-center vx-justify-center\"\r\n >\r\n <div class=\"approval-workflow-form\">\r\n <!-- Workflow Name -->\r\n <div class=\"approval-workflow-form-row vx-mb-5\">\r\n <div class=\"form-left\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n />\r\n </div>\r\n <div class=\"form-right\">\r\n <div\r\n class=\"label-heading vx-fs-11 vx-fw-500 vx-tt-uppercase vx-tt-uppercase vx-mb-2\"\r\n >\r\n WORKFLOW NAME <span class=\"required vx-fs-14 vx-fw-500\">*</span>\r\n </div>\r\n <input\r\n class=\"textField\"\r\n type=\"text\"\r\n [(ngModel)]=\"workflowName\"\r\n placeholder=\"Name of the approval workflow\"\r\n />\r\n <div class=\"vx-mt-2\">\r\n <marx-editor\r\n [editorConfig]=\"description\"\r\n [(ngModel)]=\"createDescription\"\r\n ></marx-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Policy Category -->\r\n <div class=\"approval-workflow-form-row vx-mb-5\">\r\n <div class=\"form-left\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n />\r\n </div>\r\n <div class=\"form-right\">\r\n <div\r\n class=\"label-heading vx-fs-11 vx-fw-500 vx-tt-uppercase vx-tt-uppercase vx-mb-2\"\r\n >\r\n SELECT POLICY CATEGORY\r\n <span class=\"required vx-fs-14 vx-fw-500\">*</span>\r\n </div>\r\n <div\r\n *ngIf=\"filteredCategory?.length === 0\"\r\n (click)=\"enableCategory(true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the policy category that this approval<br />workflow\r\n applies to\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"filteredCategory?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-1 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"\r\n let category of filteredCategory | slice : 0 : 1;\r\n let catIndex = index\r\n \"\r\n >\r\n <i\r\n (click)=\"removeCategory(category)\"\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1 vx-ml-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"category?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ category?.item_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n *ngIf=\"filteredCategory?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"policyOwnerPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ filteredCategory?.length - 1 }}\r\n </button>\r\n </div>\r\n <app-popover #policyOwnerPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let category of filteredCategory | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"category?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i (click)=\"removeCategory(category)\" class=\"icons\"\r\n ></i\r\n >\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 <button\r\n filteredCategory\r\n (click)=\"enableCategory(true)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Approval Workflow -->\r\n <div class=\"approval-workflow-form-row vx-mb-5\">\r\n <div class=\"form-left\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n />\r\n </div>\r\n <div class=\"form-right\">\r\n <div\r\n class=\"label-heading vx-fs-11 vx-fw-500 vx-tt-uppercase vx-tt-uppercase vx-mb-2\"\r\n >\r\n APPROVERS & APPROVAL WORKFLOW\r\n <span class=\"required vx-fs-14 vx-fw-500\">*</span>\r\n </div>\r\n <div\r\n *ngIf=\"approvalWorkflows?.length === 0\"\r\n (click)=\"addLevelsClicked(true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select approvers and select the order of approval\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalWorkflows?.length > 0\">\r\n <div\r\n *ngFor=\"\r\n let approvalWorkflow of approvalWorkflows;\r\n let i = index\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n >\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <div class=\"level-left vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block\">\r\n <div\r\n class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n [appTooltip]=\"approvalWorkflow?.alias_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ approvalWorkflow?.alias_name }}\r\n </div>\r\n <div\r\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n >\r\n {{ approvalWorkflow?.type }}\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-1 vx-pr-2 vx-ml-2\"\r\n >\r\n <i\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1 vx-ml-1\"\r\n ></i\r\n >\r\n <div\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n 1\r\n </div>\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"'Samantha Jones'\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ approvalWorkflow?.approvers[0]?.member_name }}</span\r\n >\r\n <button\r\n *ngIf=\"approvalWorkflow?.approvers?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"workflowPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n + {{ approvalWorkflow?.approvers?.length - 1 }}\r\n </button>\r\n </div>\r\n <app-popover #workflowPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let approver of approvalWorkflow?.approvers\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"approver?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i class=\"icons\"></i>\r\n <span\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >Final</span\r\n >\r\n {{ approver?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <button\r\n (click)=\"editApproval(approvalWorkflow, i)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n <button\r\n (click)=\"deleteLevel(i)\"\r\n class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> DELETE\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <button\r\n *ngIf=\"approvalWorkflows?.length > 0\"\r\n (click)=\"addLevelsClicked(true)\"\r\n class=\"addMoreBtn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-mt-1\"\r\n >\r\n + ADD MORE LEVELS\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <vui-floating-bar\r\n *ngIf=\"enableApprovalCreate || enableCreateForm\"\r\n [nextDisabled]=\"\r\n workflowName?.trim() === '' ||\r\n approvalWorkflows?.length === 0 ||\r\n filteredCategory?.length === 0\r\n \"\r\n (closeList)=\"closeCreateForm()\"\r\n (closeEvent)=\"nextClick()\"\r\n ></vui-floating-bar>\r\n </div>\r\n</div>\r\n\r\n<!-- [selectedItems]=\"policyForm.selectedCategories\" -->\r\n\r\n<app-select-approvers\r\n *ngIf=\"enableApprovalLevel\"\r\n [allApprovers]=\"allApprovers\"\r\n (closeSelectApprover)=\"closeSelectApprover()\"\r\n (selectedApprover)=\"selectedApprover($event)\"\r\n [levels]=\"levels\"\r\n [editApprovalData]=\"editApprovalData\"\r\n></app-select-approvers>\r\n\r\n<app-checkbox-list\r\n *ngIf=\"enablePolicyCategory\"\r\n [config]=\"categoryConfig\"\r\n [twoColumn]=\"false\"\r\n [itemsList]=\"selectedCategory\"\r\n [identifierKey]=\"'_id'\"\r\n [displayKey]=\"'item_name'\"\r\n [tooltipKey]=\"'item_name'\"\r\n (saveList)=\"saveCategoryList($event)\"\r\n (closeList)=\"closeCategoryList()\"\r\n [selectedItems]=\"filteredCategory\"\r\n>\r\n</app-checkbox-list>\r\n",
|
|
36609
|
+
template: "<div class=\"approval-workflow-dialog\">\r\n <div\r\n class=\"approval-workflow-dialog-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\r\n >\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">\r\n <button (click)=\"closeCreateForm()\" class=\"back-btn vx-p-0 vx-m-0\">\r\n <i class=\"icons vx-mr-1\"></i></button\r\n >Select Approval Workflow\r\n </div>\r\n </div>\r\n <div class=\"approval-workflow-dialog-body\">\r\n <app-no-data\r\n *ngIf=\"!approverWorkFlowList.length && !enableApprovalCreate\"\r\n [noDataImage]=\"\r\n 'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval-workflow.svg'\r\n \"\r\n [noDataText]=\"\r\n 'You did not set any approval workflow.<br>Click on the <strong>Create An Approval Workflow</strong> button to begin.'\r\n \"\r\n [noDataButton]=\"'CREATE AN APPROVAL WORKFLOW'\"\r\n [button]=\"'approval'\"\r\n (buttonAction)=\"createApprovalAction($event)\"\r\n ></app-no-data>\r\n\r\n <div\r\n *ngIf=\"enableApprovalCreate || enableCreateForm\"\r\n class=\"approval-workflow-dialog-body-inner vx-d-flex vx-align-center vx-justify-center\"\r\n >\r\n <div class=\"approval-workflow-form\">\r\n <!-- Workflow Name -->\r\n <div class=\"approval-workflow-form-row vx-mb-5\">\r\n <div class=\"form-left\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\"\r\n />\r\n </div>\r\n <div class=\"form-right\">\r\n <div\r\n class=\"label-heading vx-fs-11 vx-fw-500 vx-tt-uppercase vx-tt-uppercase vx-mb-2\"\r\n >\r\n WORKFLOW NAME <span class=\"required vx-fs-14 vx-fw-500\">*</span>\r\n </div>\r\n <input\r\n class=\"textField\"\r\n type=\"text\"\r\n [(ngModel)]=\"workflowName\"\r\n placeholder=\"Name of the approval workflow\"\r\n />\r\n <div class=\"vx-mt-2\">\r\n <marx-editor\r\n [editorConfig]=\"description\"\r\n [(ngModel)]=\"createDescription\"\r\n ></marx-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Policy Category -->\r\n <div class=\"approval-workflow-form-row vx-mb-5\">\r\n <div class=\"form-left\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\"\r\n />\r\n </div>\r\n <div class=\"form-right\">\r\n <div\r\n class=\"label-heading vx-fs-11 vx-fw-500 vx-tt-uppercase vx-tt-uppercase vx-mb-2\"\r\n >\r\n SELECT POLICY CATEGORY\r\n <span class=\"required vx-fs-14 vx-fw-500\">*</span>\r\n </div>\r\n <div\r\n *ngIf=\"filteredCategory?.length === 0\"\r\n (click)=\"enableCategory(true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select the policy category that this approval<br />workflow\r\n applies to\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"filteredCategory?.length > 0\"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\r\n >\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-1 vx-pr-2\"\r\n >\r\n <ng-container\r\n *ngFor=\"\r\n let category of filteredCategory | slice : 0 : 1;\r\n let catIndex = index\r\n \"\r\n >\r\n <i\r\n (click)=\"removeCategory(category)\"\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1 vx-ml-1\"\r\n ></i\r\n >\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"category?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ category?.item_name }}</span\r\n >\r\n </ng-container>\r\n <button\r\n *ngIf=\"filteredCategory?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"policyOwnerPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n +{{ filteredCategory?.length - 1 }}\r\n </button>\r\n </div>\r\n <app-popover #policyOwnerPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let category of filteredCategory | slice : 1\">\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"category?.item_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i (click)=\"removeCategory(category)\" class=\"icons\"\r\n ></i\r\n >\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 <button\r\n filteredCategory\r\n (click)=\"enableCategory(true)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Approval Workflow -->\r\n <div class=\"approval-workflow-form-row vx-mb-5\">\r\n <div class=\"form-left\">\r\n <img\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/approval.svg\"\r\n />\r\n </div>\r\n <div class=\"form-right\">\r\n <div\r\n class=\"label-heading vx-fs-11 vx-fw-500 vx-tt-uppercase vx-tt-uppercase vx-mb-2\"\r\n >\r\n APPROVERS & APPROVAL WORKFLOW\r\n <span class=\"required vx-fs-14 vx-fw-500\">*</span>\r\n </div>\r\n <div\r\n *ngIf=\"approvalWorkflows?.length === 0\"\r\n (click)=\"addLevelsClicked(true)\"\r\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\r\n [class.disabled]=\"false\"\r\n >\r\n <div\r\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\r\n >\r\n Select approvers and select the order of approval\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"approvalWorkflows?.length > 0\">\r\n <div\r\n *ngFor=\"\r\n let approvalWorkflow of approvalWorkflows;\r\n let i = index\r\n \"\r\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\r\n >\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <div class=\"level-left vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block\">\r\n <div\r\n class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\r\n [appTooltip]=\"approvalWorkflow?.alias_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n {{ approvalWorkflow?.alias_name }}\r\n </div>\r\n <div\r\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\r\n >\r\n {{ approvalWorkflow?.type }}\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-1 vx-pr-2 vx-ml-2\"\r\n >\r\n <i (click)=\"deselectUser(approvalWorkflow?.approvers[0],i)\"\r\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1 vx-ml-1\"\r\n ></i\r\n >\r\n <div *ngIf=\"\r\n approvalWorkflow?.type?.toLowerCase() === 'sequential' &&\r\n approvalWorkflow?.approvers?.length < 2\r\n \"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n {{\r\n 1 == approvalWorkflow?.approvers?.length\r\n ? \"Final\"\r\n : 1\r\n }}\r\n </div>\r\n <div\r\n *ngIf=\"approvalWorkflow?.approvers?.length > 0\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >\r\n 1\r\n </div>\r\n <span\r\n class=\"chipName vx-fs-11 vx-label-txt\"\r\n [appTooltip]=\"approvalWorkflow?.approvers[0]?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{ approvalWorkflow?.approvers[0]?.member_name }}</span\r\n >\r\n <button\r\n *ngIf=\"approvalWorkflow?.approvers?.length > 1\"\r\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\r\n appPopover\r\n (click)=\"workflowPopover.popover()\"\r\n placement=\"right\"\r\n >\r\n + {{ approvalWorkflow?.approvers?.length - 1 }}\r\n </button>\r\n </div>\r\n <app-popover #workflowPopover [dontCloseonClick]=\"true\">\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li\r\n *ngFor=\"\r\n let approver of approvalWorkflow?.approvers\r\n | slice : 1;\r\n let j = index\r\n \"\r\n >\r\n <div class=\"avatar-card\">\r\n <span\r\n class=\"value\"\r\n [appTooltip]=\"approver?.member_name\"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >\r\n <i (click)=\"deselectUser(approver,i)\" class=\"icons\"></i>\r\n <span *ngIf=\"approvalWorkflow?.type?.toLowerCase() === 'sequential'\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >{{\r\n j+1 ===\r\n approvalWorkflow?.approvers?.length - 1\r\n ? \"Final\"\r\n : j + 2\r\n }}</span\r\n >\r\n <span *ngIf=\"approvalWorkflow?.type?.toLowerCase() !== 'sequential'\"\r\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\r\n >{{j+2}}</span\r\n >\r\n {{ approver?.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <button\r\n (click)=\"editApproval(approvalWorkflow, i)\"\r\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> EDIT\r\n </button>\r\n <button\r\n (click)=\"deleteLevel(i)\"\r\n class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\r\n >\r\n <i class=\"icons vx-mr-1\"></i> DELETE\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <button\r\n *ngIf=\"approvalWorkflows?.length > 0\"\r\n (click)=\"addLevelsClicked(true)\"\r\n class=\"addMoreBtn vx-fs-11 vx-fw-500 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-mt-1\"\r\n >\r\n + ADD MORE LEVELS\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <vui-floating-bar\r\n *ngIf=\"enableApprovalCreate || enableCreateForm\"\r\n [nextDisabled]=\"\r\n workflowName?.trim() === '' ||\r\n approvalWorkflows?.length === 0 ||\r\n filteredCategory?.length === 0\r\n \"\r\n (closeList)=\"closeCreateForm()\"\r\n (closeEvent)=\"nextClick()\"\r\n ></vui-floating-bar>\r\n </div>\r\n</div>\r\n\r\n<!-- [selectedItems]=\"policyForm.selectedCategories\" -->\r\n\r\n<app-select-approvers\r\n *ngIf=\"enableApprovalLevel\"\r\n [allApprovers]=\"allApprovers\"\r\n (closeSelectApprover)=\"closeSelectApprover()\"\r\n (selectedApprover)=\"selectedApprover($event)\"\r\n [levels]=\"levels\"\r\n [editApprovalData]=\"editApprovalData\"\r\n></app-select-approvers>\r\n\r\n<app-checkbox-list\r\n *ngIf=\"enablePolicyCategory\"\r\n [config]=\"categoryConfig\"\r\n [twoColumn]=\"false\"\r\n [itemsList]=\"selectedCategory\"\r\n [identifierKey]=\"'_id'\"\r\n [displayKey]=\"'item_name'\"\r\n [tooltipKey]=\"'item_name'\"\r\n (saveList)=\"saveCategoryList($event)\"\r\n (closeList)=\"closeCategoryList()\"\r\n [selectedItems]=\"filteredCategory\"\r\n>\r\n</app-checkbox-list>\r\n",
|
|
36612
36610
|
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .approval-workflow-dialog{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .approval-workflow-dialog:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .approval-workflow-dialog-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .approval-workflow-dialog-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .approval-workflow-dialog-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .approval-workflow-dialog-body-inner{height:calc(100vh - 10.75rem);overflow:hidden;overflow-y:auto;margin-bottom:1rem;padding-right:.5rem;width:calc(100% + .5rem)}::ng-deep .approval-workflow-dialog-body-inner::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .approval-workflow-dialog-body-inner::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .approval-workflow-dialog-body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form{width:30.75rem;max-height:calc(100vh - 10.75rem)}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row{position:relative}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-left{position:absolute;top:30px;left:0}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-left img{width:2.5rem;height:2.5rem}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-right{padding-left:3.75rem}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-right .label-heading .required{color:#eb2424;position:relative;top:-.125rem}::ng-deep .approval-workflow-dialog-body-inner .approval-workflow-form-row .form-right button.addMoreBtn{background:transparent;border-radius:0;border:none}::ng-deep .approval-workflow-dialog-body vui-floating-bar .reviewer-floating-bar{padding:0!important}\n"]
|
|
36613
36611
|
},] }
|
|
36614
36612
|
];
|
|
@@ -36623,7 +36621,9 @@
|
|
|
36623
36621
|
enableCreateForm: [{ type: i0.Input }],
|
|
36624
36622
|
allApprovers: [{ type: i0.Input }],
|
|
36625
36623
|
selectedCategory: [{ type: i0.Input }],
|
|
36626
|
-
|
|
36624
|
+
editWorkflowLevel: [{ type: i0.Input }],
|
|
36625
|
+
saveApprovalWorkflow: [{ type: i0.Output }],
|
|
36626
|
+
closeCreateClicked: [{ type: i0.Output }]
|
|
36627
36627
|
};
|
|
36628
36628
|
|
|
36629
36629
|
var LinkProgramComponent = /** @class */ (function () {
|
|
@@ -37052,7 +37052,7 @@
|
|
|
37052
37052
|
LinkProgramComponent.decorators = [
|
|
37053
37053
|
{ type: i0.Component, args: [{
|
|
37054
37054
|
selector: 'vc-link-program',
|
|
37055
|
-
template: "<div class=\"link-policy\" [class.animate]=\"animation\">\r\n <ng-container *ngIf=\"currentList =='programs'\">\r\n <div class=\"program-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Program</div>\r\n <!-- <button (click)=\"goBack()\" class=\"back-btn vx-fs-12 vx-fw-500 vx-lable-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons vx-mr-1\"></i> Back</button> -->\r\n </div>\r\n <div class=\"program-listing-body\">\r\n <div class=\"filter-card-row vx-d-flex vx-mb-2\">\r\n <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTabProgram('regulations')\">\r\n <div class=\"left vx-d-block vx-w-100\">\r\n <div class=\"label vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block vx-lh-3\">\r\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n <span class=\"vx-fs-10 vx-fw-600 vx-label-txt vx-lh-4\" *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">{{programData?.SelectedRegulationProgramsCount}}\r\n {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n <span class=\"counter vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{programData?.AllRegulationProgramsCount}}</span>\r\n </div>\r\n </div>\r\n <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTabProgram('standards')\">\r\n <div class=\"left vx-d-block vx-w-100\">\r\n <div class=\"label vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block vx-lh-3\">\r\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n <span class=\"vx-fs-10 vx-fw-600 vx-label-txt vx-lh-4\" *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">{{programData?.SelectedStandardProgramsCount}}\r\n {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n <span class=\"counter vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{programData?.AllStandardProgramsCount}}</span>\r\n </div>\r\n </div>\r\n <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'internal_controls'\" (click)=\"changeTabProgram('internal_controls')\">\r\n <div class=\"left vx-d-block vx-w-100\">\r\n <div class=\"label vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block vx-lh-3\">\r\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n <span class=\"vx-fs-10 vx-fw-600 vx-label-txt vx-lh-4\" *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">{{programData?.SelectedInternalControlsProgramsCount}}\r\n {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n <span class=\"counter vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{programData?.AllInternalControlsProgramsCount}}</span>\r\n </div>\r\n </div>\r\n <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTabProgram('others')\">\r\n <div class=\"left vx-d-block vx-w-100\">\r\n <div class=\"label vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block vx-lh-3\">\r\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n <span class=\"vx-fs-10 vx-fw-600 vx-label-txt vx-lh-4\" *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">{{programData?.SelectedOthersProgramsCount}}\r\n {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n <span class=\"counter vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{programData?.AllOthersProgramsCount}}</span>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"filter-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTabProgram('regulations')\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n {{programData?.SelectedRegulationProgramsCount}}\r\n {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span>\r\n </div> -->\r\n <!-- <div class=\"filter-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTabProgram('standards')\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n {{programData?.SelectedStandardProgramsCount}}\r\n {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span>\r\n </div> -->\r\n <!-- <div class=\"filter-card\" [class.active]=\"activeTab == 'internal_controls'\" (click)=\"changeTabProgram('internal_controls')\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n {{programData?.SelectedInternalControlsProgramsCount}}\r\n {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span>\r\n </div> -->\r\n <!-- <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTabProgram('others')\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n {{programData?.SelectedOthersProgramsCount}}\r\n {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span>\r\n </div> -->\r\n </div>\r\n <div class=\"link-policy-search vx-mb-2\">\r\n <i class=\"icons vx-fs-12\"></i>\r\n <input type=\"text\" placeholder=\"Search Programs\" #searchProgram\r\n (keyup.enter)=\"searchBy($event.target.value,'programs')\" />\r\n </div>\r\n <vui-pagination *ngIf=\"(!loader) && programData.totalPages>1\" [from]=\"programData.from\"\r\n [to]=\"programData.to\" [total]=\"programData.totalRecords\" [showPageDetail]=\"true\"\r\n [totalPage]=\"programData.totalPages\" [currentPage]=\"programData.currentPage\" [pageInSingleView]=\"5\"\r\n (pageChanged)=\"changePage($event,'programs')\">\r\n </vui-pagination>\r\n <div class=\"program-listing-part vx-mb-4\" [class.with-pagination]=\"(!loader) && programData.totalPages>1\">\r\n <app-no-data *ngIf=\"programData?.data?.length==0 && !loader\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n\r\n <div class=\"program-listing-item\" [class.active]=\"selectedValues?.program?.category_id == program?.category_id\"\r\n *ngFor=\"let program of programData.data;let i = index\">\r\n <div class=\"table-row main-list\" [class.active]=\"selectedValues?.program?.category_id == program?.category_id\"\r\n [class.disabled]=\"program?.programReportExists==0\" (click)=\"selectProgram(true,program)\">\r\n <div class=\"table-column serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n\r\n <app-cs-radio [name]=\"'policyName'\"\r\n [checked]=\"selectedValues?.program?.category_id == program?.category_id\"\r\n (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio>\r\n </div>\r\n <div class=\"table-column name\">\r\n <div class=\"name-inner\">\r\n <div class=\"name-with-count\">\r\n <div class=\"value\" appTooltip=\"{{program?.name | tooltipValidation}}\" placement=\"bottom-left\" delay=\"0\"\r\n type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"link-policy-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"link-policy-floating-bar-left vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"selectedValues?.program?.name\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('programs','')\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedValues?.program?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedValues?.program?.name}}</span>\r\n </div>\r\n\r\n <!-- <div class=\"chip vx-pl-2 vx-pr-2 vx-txt-blue vx-fs-12 vx-lh-6 vx-mr-1\" *ngIf=\"selectedValues?.program?.name\"><i class=\"icons vx-mr-1\" (click)=\"remove('programs','')\"></i>{{selectedValues?.program?.name}}</div> -->\r\n <!-- <div class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt vx-ml-2\">Policy selected</div> -->\r\n\r\n </div>\r\n <div class=\"link-policy-floating-bar-right vx-d-flex vx-align-center\">\r\n <button (click)=\"goBack()\" class=\"cancel-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-m-0 vx-mr-2 vx-d-flex vx-align-center vx-justify-center vx-txt-red\">CANCEL</button>\r\n <button (click)=\"saveChanges('programs')\" [class.disabled]=\"!selectedValues?.program?.name\" class=\"white-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-m-0 vx-mr-1 vx-d-flex vx-align-center vx-justify-center vx-txt-blue\">\r\n LINK CATEGORIES AND RESPONSIBILITIES</button>\r\n <button (click)=\"saveChanges('programsOnly')\" [class.disabled]=\"!selectedValues?.program?.name\" class=\"next-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-m-0 vx-d-flex vx-align-center vx-justify-center vx-txt-white\">Link\r\n <i class=\"icons vx-ml-2\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n <div class=\"confirmation-top\">\r\n <div class=\"icon-block\"><i class=\"icons\"></i></div>\r\n <div class=\"text\">You have opted to link all the responsibilities under the selected program \"{{selectedValues?.program?.name }}\" and it's sub-categories.</div>\r\n </div>\r\n <div class=\"confirmation-bottom\">\r\n <div class=\"message\">Are you sure you would like to proceed?</div>\r\n <div class=\"button-group\">\r\n <button class=\"no-btn\" (click)=\"saveChangesFromProgram(false)\">NO</button>\r\n <button class=\"yes-btn\" (click)=\"saveChangesFromProgram(true)\">YES</button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentList=='categories'\">\r\n <div class=\"link-policy-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt vx-d-flex vx-align-center\"><button (click)=\"goBack('categories')\" class=\"back-btn vx-fs-14 vx-fw-500 vx-lable-txt vx-p-0 vx-mr-2 vx-d-flex vx-align-center\"><i class=\"icons\"></i></button> Select Categories to link with this policy</div>\r\n </div>\r\n <div class=\"link-policy-body\">\r\n <div class=\"link-policy-search vx-mb-2\">\r\n <i class=\"icons vx-fs-12\"></i>\r\n <input type=\"text\" placeholder=\"Search categories\" #searchCategory\r\n (keyup.enter)=\"searchBy($event.target.value,'categories')\" />\r\n </div>\r\n <vui-pagination *ngIf=\"(!loader) && subCategoriesList.totalPage>1\" [from]=\"subCategoriesList.from\"\r\n [to]=\"subCategoriesList.to\" [total]=\"subCategoriesList.totalRecords\" [showPageDetail]=\"true\"\r\n [totalPage]=\"subCategoriesList.totalPage\" [currentPage]=\"subCategoriesList.currentPage\" [pageInSingleView]=\"5\"\r\n (pageChanged)=\"changePage($event,'programs')\">\r\n </vui-pagination>\r\n\r\n <div class=\"link-policy-table vx-mb-4\" [class.with-pagination]=\"(!loader) && subCategoriesList.totalPage>1\">\r\n <ng-container *ngIf=\"!loader && subCategoriesList.data?.length>0\">\r\n <div class=\"table-header\">\r\n <div class=\"table-row\">\r\n <div\r\n class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n #</div>\r\n <div\r\n class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n CATEGORIES</div>\r\n </div>\r\n </div>\r\n <div class=\"table-body\">\r\n <!-- when checkbox was checked then active class was true -->\r\n <div class=\"table-row\" [class.active]=\"selectedIds.categories.includes(category.category_id)\"\r\n *ngFor=\"let category of subCategoriesList.data; let i = index;\">\r\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+subCategoriesList.from\" placement=\"bottom\" delay=\"0\"\r\n type=\"black\" [tooltipMandatory]=\"true\">{{i+subCategoriesList.from}}</div>\r\n <vui-checkbox [checked]=\"selectedIds.categories.includes(category.category_id)\"\r\n (change)=\"selectCategory($event.target.checked,category)\"></vui-checkbox>\r\n </div>\r\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n <div class=\"vx-d-block vx-w-100\">\r\n\r\n <div class=\"value vx-fs-12 vx-label-txt\" [appTooltip]=\"category?.item_name | tooltipValidation\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n {{category?.item_name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <app-no-data *ngIf=\"!loader && subCategoriesList.data?.length==0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <div class=\"link-policy-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"link-policy-floating-bar-left vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"selectedValues?.categories?.length>0\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('categories',selectedValues?.categories[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedValues?.categories[0]?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedValues?.categories[0]?.item_name}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"programCount.popover()\" placement=\"left\" *ngIf=\"selectedValues?.categories?.length>1\">+{{selectedValues?.categories?.slice(1).length}}</button>\r\n </div>\r\n <app-popover #programCount>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let selectedCategory of selectedValues?.categories?.slice(1)\">\r\n <div class=\"avatar-card\">\r\n <i class=\"icons cross-btn vx-fs-12 vx-paragaph-txt vx-mr-2\" (click)=\"remove('categories',selectedCategory)\"></i>\r\n <span class=\"value\">{{selectedCategory?.item_name}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n\r\n\r\n <!-- <div class=\"chip vx-pl-2 vx-pr-2 vx-txt-blue vx-fs-12 vx-lh-6 vx-mr-1\" *ngIf=\"selectedValues.categories.length>0\"><i (click)=\"remove('categories',selectedValues?.categories[0])\" class=\"icons vx-mr-1\"></i> {{selectedValues?.categories[0]?.item_name}}</div>\r\n <ng-container *ngIf=\"selectedValues.categories.length>1\">\r\n <button class=\"count vx-fs-12 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\" vcPopover (click)=\"programCount.popover()\" position=\"left\">+{{selectedValues?.categories?.slice(1).length}}</button>\r\n <div class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt vx-ml-2\">{{(selectedValues?.categories?.slice(1)?.length==1)?'Category selected':'Categories selected'}}</div>\r\n <app-popover #programCount>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let selectedCategory of selectedValues?.categories?.slice(1)\">\r\n <div class=\"avatar-card\">\r\n <i class=\"icons cross-btn vx-fs-12 vx-txt-blue vx-mr-2\" (click)=\"remove('categories',selectedCategory)\"></i>\r\n <span class=\"value\">{{selectedCategory?.item_name}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container> -->\r\n </div>\r\n <div class=\"link-policy-floating-bar-right vx-d-flex vx-align-center\">\r\n <button (click)=\"goBack('categories')\" class=\"cancel-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-red\">CANCEL</button>\r\n <button (click)=\"saveChanges('categories')\" [class.disabled]=\"!selectedValues?.categories?.length\" class=\"next-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-white\">Add <i class=\"icons vx-ml-2\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentList=='responsibilities'\">\r\n <div class=\"link-policy-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"page-title vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities to link with this policy </div>\r\n <!-- <button (click)=\"goBack('responsibilities')\"\r\n class=\"back-btn vx-fs-14 vx-fw-500 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i\r\n class=\"icons vx-mr-1\"></i> BACK</button> -->\r\n </div>\r\n <div class=\"link-policy-body\">\r\n <div class=\"link-policy-search vx-mb-2\">\r\n <i class=\"icons vx-fs-12\"></i>\r\n <input type=\"text\" placeholder=\"Search Responsibilities\" (keyup.enter)=\"searchBy($event.target.value,'responsibilities')\" />\r\n </div>\r\n <vui-pagination *ngIf=\"(!loader) && responsibilitiesList.totalPage>1\" [from]=\"responsibilitiesList.from\"\r\n [to]=\"responsibilitiesList.to\" [total]=\"responsibilitiesList.totalRecords\" [showPageDetail]=\"true\"\r\n [totalPage]=\"responsibilitiesList.totalPage\" [currentPage]=\"responsibilitiesList.currentPage\" [pageInSingleView]=\"5\"\r\n (pageChanged)=\"changePage($event,'responsibilities')\">\r\n </vui-pagination>\r\n\r\n <div class=\"link-policy-table vx-mb-4\" [class.with-pagination]=\"(!loader) && subCategoriesList.totalPage>1\">\r\n <ng-container *ngIf=\"!loader && responsibilitiesList.data?.length>0\">\r\n <div class=\"table-header\">\r\n <div class=\"table-row\">\r\n <div\r\n class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n #</div>\r\n <div\r\n class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n RESPONSIBLITIES</div>\r\n </div>\r\n </div>\r\n <div class=\"table-body\">\r\n <!-- when checkbox was checked then active class was true -->\r\n\r\n <div class=\"table-row\"\r\n [class.active]=\"selectedIds.responsibilities.includes(responsibility.ReportId)\"\r\n *ngFor=\"let responsibility of responsibilitiesList.data; let i = index;\">\r\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+responsibilitiesList.from\" placement=\"bottom\" delay=\"0\"\r\n type=\"black\" [tooltipMandatory]=\"true\">{{i+responsibilitiesList.from}}</div>\r\n <vui-checkbox\r\n [checked]=\"selectedIds.responsibilities.includes(responsibility.ReportId)\"\r\n (change)=\"selectResponsibility($event.target.checked,responsibility)\">\r\n </vui-checkbox>\r\n </div>\r\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n\r\n <div class=\"value vx-fs-12 vx-label-txt\" [appTooltip]=\"responsibility?.control_id + responsibility?.ReportName | tooltipValidation\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <span class=\"vx-fs-10 vx-fw-500 vx-tt-uppercase vx-mr-1\">{{responsibility?.control_id}}</span> {{responsibility?.ReportName}}</div>\r\n </div>\r\n <!-- <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n <div class=\"value vx-fs-12 vx-label-txt\"\r\n [appTooltip]=\"'[CID-20210005] A.8.1.3 Acceptable Use of Assets'\" placement=\"bottom-left\"\r\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><span\r\n class=\"vx-fs-10 vx-fw-500 vx-tt-uppercase vx-mr-1\">[CID-20210005]</span> A.8.1.3\r\n Acceptable Use of Assets</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <app-no-data *ngIf=\"!loader && responsibilitiesList.data?.length==0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n <div class=\"link-policy-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3 vx-mt-1\">\r\n <div class=\"link-policy-floating-bar-left vx-d-flex vx-align-center\">\r\n <div class=\"chip vx-pl-2 vx-pr-2 vx-txt-blue vx-fs-12 vx-lh-6 vx-mr-1\"\r\n *ngIf=\"selectedValues.responsibilities.length>0\"><i\r\n (click)=\"remove('responsibilities',selectedValues?.responsibilities[0])\"\r\n class=\"icons vx-mr-1\"></i> {{selectedValues?.responsibilities[0]?.ReportName}}</div>\r\n <ng-container *ngIf=\"selectedValues.responsibilities.length>1\">\r\n <button\r\n class=\"count vx-fs-12 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\"\r\n vcPopover (click)=\"responsibilitiesPopover.popover()\"\r\n position=\"left\">+{{selectedValues?.responsibilities?.slice(1).length}}</button>\r\n <div class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt vx-ml-2\">\r\n {{(selectedValues?.responsibilities?.slice(1)?.length==1)?'Responsibility\r\n selected':'Responsibilities selected'}}</div>\r\n <app-popover #responsibilitiesPopover>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let selectedres of selectedValues?.responsibilities?.slice(1)\">\r\n <div class=\"avatar-card\">\r\n <i class=\"icons cross-btn vx-fs-12 vx-txt-blue vx-mr-2\" (click)=\"remove('responsibilities',selectedres)\"></i>\r\n <span class=\"value\">{{selectedres?.ReportName}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container>\r\n\r\n </div>\r\n <div class=\"link-policy-floating-bar-right vx-d-flex vx-align-center\">\r\n <button (click)=\"goBack('responsibilities')\"\r\n class=\"cancel-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-red\">CANCEL</button>\r\n <button (click)=\"saveChanges('responsibilities')\" [class.disabled]=\"!selectedValues?.responsibilities?.length\"\r\n class=\"next-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-white\">ADD\r\n <i class=\"icons vx-ml-2\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <app-loader *ngIf=\"loader || submissionLoader\"></app-loader>\r\n\r\n\r\n</div>\r\n",
|
|
37055
|
+
template: "<div class=\"link-policy\" [class.animate]=\"animation\">\r\n <ng-container *ngIf=\"currentList =='programs'\">\r\n <div class=\"program-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Program</div>\r\n <!-- <button (click)=\"goBack()\" class=\"back-btn vx-fs-12 vx-fw-500 vx-lable-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i class=\"icons vx-mr-1\"></i> Back</button> -->\r\n </div>\r\n <div class=\"program-listing-body\">\r\n <div class=\"filter-card-row vx-d-flex vx-mb-2\">\r\n <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTabProgram('regulations')\">\r\n <div class=\"left vx-d-block vx-w-100\">\r\n <div class=\"label vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block vx-lh-3\">\r\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">REGULATIONS</label>\r\n <span class=\"vx-fs-10 vx-fw-600 vx-label-txt vx-lh-4\" *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">{{programData?.SelectedRegulationProgramsCount}}\r\n {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n <span class=\"counter vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{programData?.AllRegulationProgramsCount}}</span>\r\n </div>\r\n </div>\r\n <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTabProgram('standards')\">\r\n <div class=\"left vx-d-block vx-w-100\">\r\n <div class=\"label vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block vx-lh-3\">\r\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">STANDARDS</label>\r\n <span class=\"vx-fs-10 vx-fw-600 vx-label-txt vx-lh-4\" *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">{{programData?.SelectedStandardProgramsCount}}\r\n {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n <span class=\"counter vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{programData?.AllStandardProgramsCount}}</span>\r\n </div>\r\n </div>\r\n <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'internal_controls'\" (click)=\"changeTabProgram('internal_controls')\">\r\n <div class=\"left vx-d-block vx-w-100\">\r\n <div class=\"label vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block vx-lh-3\">\r\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">INTERNAL CONTROLS</label>\r\n <span class=\"vx-fs-10 vx-fw-600 vx-label-txt vx-lh-4\" *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">{{programData?.SelectedInternalControlsProgramsCount}}\r\n {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n <span class=\"counter vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{programData?.AllInternalControlsProgramsCount}}</span>\r\n </div>\r\n </div>\r\n <div class=\"filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTabProgram('others')\">\r\n <div class=\"left vx-d-block vx-w-100\">\r\n <div class=\"label vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block vx-lh-3\">\r\n <label class=\"vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center\">OTHERS</label>\r\n <span class=\"vx-fs-10 vx-fw-600 vx-label-txt vx-lh-4\" *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">{{programData?.SelectedOthersProgramsCount}}\r\n {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right vx-d-flex vx-justify-end vx-w-100\">\r\n <span class=\"counter vx-txt-white vx-fw-500 vx-d-inline-block vx-text-center\">{{programData?.AllOthersProgramsCount}}</span>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"filter-card\" [class.active]=\"activeTab == 'regulations'\" (click)=\"changeTabProgram('regulations')\">\r\n <div class=\"left\">\r\n <label>REGULATIONS</label>\r\n <p *ngIf=\"programData?.SelectedRegulationProgramsCount> 0\">\r\n {{programData?.SelectedRegulationProgramsCount}}\r\n {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllRegulationProgramsCount}}</span>\r\n </div> -->\r\n <!-- <div class=\"filter-card\" [class.active]=\"activeTab == 'standards'\" (click)=\"changeTabProgram('standards')\">\r\n <div class=\"left\">\r\n <label>STANDARDS</label>\r\n <p *ngIf=\"programData?.SelectedStandardProgramsCount> 0\">\r\n {{programData?.SelectedStandardProgramsCount}}\r\n {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllStandardProgramsCount}}</span>\r\n </div> -->\r\n <!-- <div class=\"filter-card\" [class.active]=\"activeTab == 'internal_controls'\" (click)=\"changeTabProgram('internal_controls')\">\r\n <div class=\"left\">\r\n <label>INTERNAL CONTROLS</label>\r\n <p *ngIf=\"programData?.SelectedInternalControlsProgramsCount> 0\">\r\n {{programData?.SelectedInternalControlsProgramsCount}}\r\n {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllInternalControlsProgramsCount}}</span>\r\n </div> -->\r\n <!-- <div class=\"filter-card\" [class.active]=\"activeTab == 'others'\" (click)=\"changeTabProgram('others')\">\r\n <div class=\"left\">\r\n <label>OTHERS</label>\r\n <p *ngIf=\"programData?.SelectedOthersProgramsCount> 0\">\r\n {{programData?.SelectedOthersProgramsCount}}\r\n {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected\r\n </p>\r\n </div>\r\n <span class=\"counter\">{{programData?.AllOthersProgramsCount}}</span>\r\n </div> -->\r\n </div>\r\n <div class=\"link-policy-search vx-mb-2\">\r\n <i class=\"icons vx-fs-12\"></i>\r\n <input type=\"text\" placeholder=\"Search Programs\" #searchProgram\r\n (keyup.enter)=\"searchBy($event.target.value,'programs')\" />\r\n </div>\r\n <vui-pagination *ngIf=\"(!loader) && programData.totalPages>1\" [from]=\"programData.from\"\r\n [to]=\"programData.to\" [total]=\"programData.totalRecords\" [showPageDetail]=\"true\"\r\n [totalPage]=\"programData.totalPages\" [currentPage]=\"programData.currentPage\" [pageInSingleView]=\"5\"\r\n (pageChanged)=\"changePage($event,'programs')\">\r\n </vui-pagination>\r\n <div class=\"program-listing-part vx-mb-4\" [class.with-pagination]=\"(!loader) && programData.totalPages>1\">\r\n <app-no-data *ngIf=\"programData?.data?.length==0 && !loader\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n\r\n <div class=\"program-listing-item\" [class.active]=\"selectedValues?.program?.category_id == program?.category_id\"\r\n *ngFor=\"let program of programData.data;let i = index\">\r\n <div class=\"table-row main-list\" [class.active]=\"selectedValues?.program?.category_id == program?.category_id\"\r\n [class.disabled]=\"program?.programReportExists==0\" (click)=\"selectProgram(true,program)\">\r\n <div class=\"table-column serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+programData.from\" placement=\"bottom\" delay=\"0\" type=\"black\"\r\n [tooltipMandatory]=\"true\">{{i+programData.from}}</div>\r\n\r\n <app-cs-radio [name]=\"'policyName'\"\r\n [checked]=\"selectedValues?.program?.category_id == program?.category_id\"\r\n (checkedEvent)=\"selectProgram($event.target.checked,program)\"></app-cs-radio>\r\n </div>\r\n <div class=\"table-column name\">\r\n <div class=\"name-inner\">\r\n <div class=\"name-with-count\">\r\n <div class=\"value\" appTooltip=\"{{program?.name | tooltipValidation}}\" placement=\"bottom-left\" delay=\"0\"\r\n type=\"black\" [tooltipMandatory]=\"false\">{{program?.name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"link-policy-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"link-policy-floating-bar-left vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"selectedValues?.program?.name\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('programs','')\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedValues?.program?.name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedValues?.program?.name}}</span>\r\n </div>\r\n\r\n <!-- <div class=\"chip vx-pl-2 vx-pr-2 vx-txt-blue vx-fs-12 vx-lh-6 vx-mr-1\" *ngIf=\"selectedValues?.program?.name\"><i class=\"icons vx-mr-1\" (click)=\"remove('programs','')\"></i>{{selectedValues?.program?.name}}</div> -->\r\n <!-- <div class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt vx-ml-2\">Policy selected</div> -->\r\n\r\n </div>\r\n <div class=\"link-policy-floating-bar-right vx-d-flex vx-align-center\">\r\n <button (click)=\"goBack()\" class=\"cancel-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-m-0 vx-mr-2 vx-d-flex vx-align-center vx-justify-center vx-txt-red\">CANCEL</button>\r\n <!-- <button (click)=\"saveChanges('programs')\" [class.disabled]=\"!selectedValues?.program?.name\" class=\"white-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-m-0 vx-mr-1 vx-d-flex vx-align-center vx-justify-center vx-txt-blue\">\r\n LINK CATEGORIES AND RESPONSIBILITIES</button> -->\r\n <button (click)=\"saveChanges('programs')\" [class.disabled]=\"!selectedValues?.program?.name\" class=\"next-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-m-0 vx-d-flex vx-align-center vx-justify-center vx-txt-white\">Link\r\n <i class=\"icons vx-ml-2\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"program-listing-confirmation\" *ngIf=\"displayConfirmationMessage\">\r\n <div class=\"confirmation-top\">\r\n <div class=\"icon-block\"><i class=\"icons\"></i></div>\r\n <div class=\"text\">You have opted to link all the responsibilities under the selected program \"{{selectedValues?.program?.name }}\" and it's sub-categories.</div>\r\n </div>\r\n <div class=\"confirmation-bottom\">\r\n <div class=\"message\">Are you sure you would like to proceed?</div>\r\n <div class=\"button-group\">\r\n <button class=\"no-btn\" (click)=\"saveChangesFromProgram(false)\">NO</button>\r\n <button class=\"yes-btn\" (click)=\"saveChangesFromProgram(true)\">YES</button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentList=='categories'\">\r\n <div class=\"link-policy-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt vx-d-flex vx-align-center\"><button (click)=\"goBack('categories')\" class=\"back-btn vx-fs-14 vx-fw-500 vx-lable-txt vx-p-0 vx-mr-2 vx-d-flex vx-align-center\"><i class=\"icons\"></i></button> Select program categories to link with this policy</div>\r\n </div>\r\n <div class=\"link-policy-body\">\r\n <div class=\"link-policy-search vx-mb-2\">\r\n <i class=\"icons vx-fs-12\"></i>\r\n <input type=\"text\" placeholder=\"Search program categories\" #searchCategory\r\n (keyup.enter)=\"searchBy($event.target.value,'categories')\" />\r\n </div>\r\n <vui-pagination *ngIf=\"(!loader) && subCategoriesList.totalPage>1\" [from]=\"subCategoriesList.from\"\r\n [to]=\"subCategoriesList.to\" [total]=\"subCategoriesList.totalRecords\" [showPageDetail]=\"true\"\r\n [totalPage]=\"subCategoriesList.totalPage\" [currentPage]=\"subCategoriesList.currentPage\" [pageInSingleView]=\"5\"\r\n (pageChanged)=\"changePage($event,'programs')\">\r\n </vui-pagination>\r\n\r\n <div class=\"link-policy-table vx-mb-4\" [class.with-pagination]=\"(!loader) && subCategoriesList.totalPage>1\">\r\n <ng-container *ngIf=\"!loader && subCategoriesList.data?.length>0\">\r\n <div class=\"table-header\">\r\n <div class=\"table-row\">\r\n <div\r\n class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n #</div>\r\n <div\r\n class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n CATEGORIES</div>\r\n </div>\r\n </div>\r\n <div class=\"table-body\">\r\n <!-- when checkbox was checked then active class was true -->\r\n <div class=\"table-row\" [class.active]=\"selectedIds.categories.includes(category.category_id)\"\r\n *ngFor=\"let category of subCategoriesList.data; let i = index;\">\r\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+subCategoriesList.from\" placement=\"bottom\" delay=\"0\"\r\n type=\"black\" [tooltipMandatory]=\"true\">{{i+subCategoriesList.from}}</div>\r\n <vui-checkbox [checked]=\"selectedIds.categories.includes(category.category_id)\"\r\n (change)=\"selectCategory($event.target.checked,category)\"></vui-checkbox>\r\n </div>\r\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n <div class=\"vx-d-block vx-w-100\">\r\n\r\n <div class=\"value vx-fs-12 vx-label-txt\" [appTooltip]=\"category?.item_name | tooltipValidation\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n {{category?.item_name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <app-no-data *ngIf=\"!loader && subCategoriesList.data?.length==0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n\r\n <div class=\"link-policy-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3\">\r\n <div class=\"link-policy-floating-bar-left vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"selectedValues?.categories?.length>0\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('categories',selectedValues?.categories[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedValues?.categories[0]?.item_name\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedValues?.categories[0]?.item_name}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"programCount.popover()\" placement=\"left\" *ngIf=\"selectedValues?.categories?.length>1\">+{{selectedValues?.categories?.slice(1).length}}</button>\r\n \r\n </div>\r\n <div *ngIf=\"selectedValues?.categories?.slice(1).length\" class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt vx-ml-2\">\r\n {{(selectedValues?.categories?.slice(1).length === 1)? 'Program category\r\n selected':'Program categories selected'}}\r\n </div>\r\n <app-popover #programCount>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let selectedCategory of selectedValues?.categories?.slice(1)\">\r\n <div class=\"avatar-card\">\r\n <i class=\"icons cross-btn vx-fs-12 vx-paragraph-txt vx-mr-2\" (click)=\"remove('categories',selectedCategory)\"></i>\r\n <span class=\"value\">{{selectedCategory?.item_name}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n\r\n\r\n <!-- <div class=\"chip vx-pl-2 vx-pr-2 vx-txt-blue vx-fs-12 vx-lh-6 vx-mr-1\" *ngIf=\"selectedValues.categories.length>0\"><i (click)=\"remove('categories',selectedValues?.categories[0])\" class=\"icons vx-mr-1\"></i> {{selectedValues?.categories[0]?.item_name}}</div>\r\n <ng-container *ngIf=\"selectedValues.categories.length>1\">\r\n <button class=\"count vx-fs-12 vx-fw-500 vx-txt-white vx-p-0 vx-pl-1 vx-pr-1 vx-m-0 vx-ml-1 vx-d-flex vx-align-center vx-justify-center\" vcPopover (click)=\"programCount.popover()\" position=\"left\">+{{selectedValues?.categories?.slice(1).length}}</button>\r\n <div class=\"vx-fs-12 vx-fw-500 vx-paragraph-txt vx-ml-2\">{{(selectedValues?.categories?.slice(1)?.length==1)?'Category selected':'Categories selected'}}</div>\r\n <app-popover #programCount>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let selectedCategory of selectedValues?.categories?.slice(1)\">\r\n <div class=\"avatar-card\">\r\n <i class=\"icons cross-btn vx-fs-12 vx-txt-blue vx-mr-2\" (click)=\"remove('categories',selectedCategory)\"></i>\r\n <span class=\"value\">{{selectedCategory?.item_name}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </ng-container> -->\r\n </div>\r\n <div class=\"link-policy-floating-bar-right vx-d-flex vx-align-center\">\r\n <button (click)=\"goBack('categories')\" class=\"cancel-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-red\">CANCEL</button>\r\n <button (click)=\"saveChanges('categories')\" [class.disabled]=\"!selectedValues?.categories?.length\" class=\"next-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-white vx-ml-5\">Add <i class=\"icons vx-ml-2\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"currentList=='responsibilities'\">\r\n <div class=\"link-policy-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt vx-d-flex vx-align-center\"><button (click)=\"goBack('responsibilities')\" class=\"back-btn vx-fs-14 vx-fw-500 vx-lable-txt vx-p-0 vx-mr-2 vx-d-flex vx-align-center\"><i class=\"icons\"></i></button> Select Responsibilities to link with this policy </div>\r\n <!-- <div class=\"page-title vx-fs-14 vx-fw-500 vx-label-txt\">Select Responsibilities to link with this policy </div> -->\r\n\r\n <!-- <button (click)=\"goBack('responsibilities')\"\r\n class=\"back-btn vx-fs-14 vx-fw-500 vx-label-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"><i\r\n class=\"icons vx-mr-1\"></i> BACK</button> -->\r\n </div>\r\n <div class=\"link-policy-body\">\r\n <div class=\"link-policy-search vx-mb-2\">\r\n <i class=\"icons vx-fs-12\"></i>\r\n <input type=\"text\" placeholder=\"Search Responsibilities\" (keyup.enter)=\"searchBy($event.target.value,'responsibilities')\" />\r\n </div>\r\n <vui-pagination *ngIf=\"(!loader) && responsibilitiesList.totalPage>1\" [from]=\"responsibilitiesList.from\"\r\n [to]=\"responsibilitiesList.to\" [total]=\"responsibilitiesList.totalRecords\" [showPageDetail]=\"true\"\r\n [totalPage]=\"responsibilitiesList.totalPage\" [currentPage]=\"responsibilitiesList.currentPage\" [pageInSingleView]=\"5\"\r\n (pageChanged)=\"changePage($event,'responsibilities')\">\r\n </vui-pagination>\r\n\r\n <div class=\"link-policy-table vx-mb-4\" [class.with-pagination]=\"(!loader) && subCategoriesList.totalPage>1\">\r\n <ng-container *ngIf=\"!loader && responsibilitiesList.data?.length>0\">\r\n <div class=\"table-header\">\r\n <div class=\"table-row\">\r\n <div\r\n class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n #</div>\r\n <div\r\n class=\"table-column vx-fs-10 vx-fw-500 vx-label-txt vx-lh-5 vx-tt-uppercase vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n RESPONSIBLITIES</div>\r\n </div>\r\n </div>\r\n <div class=\"table-body\">\r\n <!-- when checkbox was checked then active class was true -->\r\n\r\n <div class=\"table-row\"\r\n [class.active]=\"selectedIds.responsibilities.includes(responsibility.ReportId)\"\r\n *ngFor=\"let responsibility of responsibilitiesList.data; let i = index;\">\r\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center serial\">\r\n <div class=\"sr-no\" [appTooltip]=\"i+responsibilitiesList.from\" placement=\"bottom\" delay=\"0\"\r\n type=\"black\" [tooltipMandatory]=\"true\">{{i+responsibilitiesList.from}}</div>\r\n <vui-checkbox\r\n [checked]=\"selectedIds.responsibilities.includes(responsibility.ReportId)\"\r\n (change)=\"selectResponsibility($event.target.checked,responsibility)\">\r\n </vui-checkbox>\r\n </div>\r\n <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n\r\n <div class=\"value vx-fs-12 vx-label-txt\" [appTooltip]=\"responsibility?.control_id + responsibility?.ReportName | tooltipValidation\"\r\n placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">\r\n <span class=\"vx-fs-10 vx-fw-500 vx-tt-uppercase vx-mr-1\">{{responsibility?.control_id}}</span> {{responsibility?.ReportName}}</div>\r\n </div>\r\n <!-- <div class=\"table-column vx-pl-1 vx-pr-1 vx-d-flex vx-align-center category-name\">\r\n <div class=\"value vx-fs-12 vx-label-txt\"\r\n [appTooltip]=\"'[CID-20210005] A.8.1.3 Acceptable Use of Assets'\" placement=\"bottom-left\"\r\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\"><span\r\n class=\"vx-fs-10 vx-fw-500 vx-tt-uppercase vx-mr-1\">[CID-20210005]</span> A.8.1.3\r\n Acceptable Use of Assets</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <app-no-data *ngIf=\"!loader && responsibilitiesList.data?.length==0\"\r\n [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"'No data to display'\"></app-no-data>\r\n </div>\r\n <div class=\"link-policy-floating-bar vx-d-flex vx-align-center vx-justify-between vx-p-3 vx-mt-1\">\r\n <div class=\"link-policy-floating-bar-left vx-d-flex vx-align-center\">\r\n <div class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\" *ngIf=\"selectedValues.responsibilities.length>0\">\r\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\" (click)=\"remove('responsibilities',selectedValues?.responsibilities[0])\"></i>\r\n <span class=\"chipName vx-fs-11 vx-label-txt\" [appTooltip]=\"selectedValues?.responsibilities[0]?.ReportName\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{selectedValues?.responsibilities[0]?.ReportName}}</span>\r\n <button class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\" appPopover (click)=\"responsibilitiesPopover.popover()\" placement=\"left\" *ngIf=\"selectedValues.responsibilities.length>1\">+{{selectedValues?.responsibilities?.slice(1).length}}</button>\r\n <app-popover #responsibilitiesPopover>\r\n <div class=\"wf-action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let selectedres of selectedValues?.responsibilities?.slice(1)\">\r\n <div class=\"avatar-card\">\r\n <i class=\"icons cross-btn vx-fs-12 vx-paragraph-txt vx-mr-2\" (click)=\"remove('responsibilities',selectedres)\"></i>\r\n <span class=\"value\">{{selectedres?.ReportName}}</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 class=\"link-policy-floating-bar-right vx-d-flex vx-align-center\">\r\n <button (click)=\"goBack('responsibilities')\" class=\"cancel-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-red\">CANCEL</button>\r\n <button (click)=\"saveChanges('responsibilities')\" [class.disabled]=\"!selectedValues?.responsibilities?.length\" class=\"next-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-d-flex vx-align-center vx-justify-center vx-txt-white vx-ml-5\">ADD <i class=\"icons vx-ml-2\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <app-loader *ngIf=\"loader || submissionLoader\"></app-loader>\r\n</div>\r\n",
|
|
37056
37056
|
styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .link-policy{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .link-policy:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .link-policy.animate{animation:.5s cubic-bezier(.25,.46,.45,.94) both animate-right;z-index:-1}::ng-deep .link-policy-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .link-policy-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .link-policy-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .link-policy-search{position:relative}::ng-deep .link-policy-search input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .link-policy-search input::placeholder{color:#747576;opacity:1}::ng-deep .link-policy-search i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .link-policy-table{overflow:hidden;overflow-y:auto;height:calc(100vh - 14rem)}::ng-deep .link-policy-table::-webkit-scrollbar-track{background-color:transparent}::ng-deep .link-policy-table .table-header{background:#fff;position:sticky;top:0;z-index:1}::ng-deep .link-policy-table .table-header .table-row{border:none!important;border-radius:0!important}::ng-deep .link-policy-table .table-header .table-row .table-column{line-height:1rem!important;min-height:1.5rem!important}::ng-deep .link-policy-table .table-row{border:1px solid #f1f1f1;border-radius:.25rem;display:flex;justify-content:space-between;position:relative;margin-bottom:.25rem}::ng-deep .link-policy-table .table-row:hover .table-column.serial .sr-no,::ng-deep .link-policy-table .table-row.active .table-column.serial .sr-no{opacity:0}::ng-deep .link-policy-table .table-row:hover .table-column.serial vui-cs-radio,::ng-deep .link-policy-table .table-row.active .table-column.serial vui-cs-radio,::ng-deep .link-policy-table .table-row:hover .table-column.serial vui-checkbox,::ng-deep .link-policy-table .table-row.active .table-column.serial vui-checkbox{opacity:1}::ng-deep .link-policy-table .table-row .table-column{min-height:2.5rem;position:relative;width:100%}::ng-deep .link-policy-table .table-row .table-column.serial{width:2rem;max-width:2rem;justify-content:center}::ng-deep .link-policy-table .table-row .table-column.serial .sr-no{width:1.25rem;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:.625rem;font-weight:500;display:flex;height:2.5rem;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .link-policy-table .table-row .table-column.serial vui-cs-radio{background:#fff;border-radius:50%;position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .link-policy-table .table-row .table-column.serial vui-cs-radio .radio-item .radio,::ng-deep .link-policy-table .table-row .table-column.serial vui-cs-radio .radio-item .radiomark{position:absolute;top:0}::ng-deep .link-policy-table .table-row .table-column.serial vui-checkbox{background:#fff;border-radius:.125rem;position:absolute;top:.75rem;left:.5rem;width:1rem;height:1rem;opacity:0;transition:all .2s ease-in-out}::ng-deep .link-policy-table .table-row .table-column.serial vui-checkbox .checkbox-item{position:absolute!important}::ng-deep .link-policy-table .table-row .table-column.serial vui-checkbox .checkbox-item .checkbox,::ng-deep .link-policy-table .table-row .table-column.serial vui-checkbox .checkbox-item .checkmark{position:absolute;top:0}::ng-deep .link-policy-table .table-row .table-column.policies{width:calc(100% - 28rem);min-width:calc(100% - 28rem)}::ng-deep .link-policy-table .table-row .table-column.policies .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .link-policy-table .table-row .table-column.categories{width:26rem;min-width:26rem}::ng-deep .link-policy-table .table-row .table-column.categories .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 1rem)}::ng-deep .link-policy-table .table-row .table-column.categories button.count{background:#1e5dd3;border:none;border-radius:.125rem;height:1.5rem}::ng-deep .link-policy-table .table-row .table-column.category-name{width:calc(100% - 2rem);min-width:calc(100% - 2rem)}::ng-deep .link-policy-table .table-row .table-column.category-name .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .link-policy .with-pagination{height:calc(100vh - 16rem)}::ng-deep .link-policy-floating-bar{background:#fff;border-radius:.25rem;box-shadow:0 2px 12px #4681ef40}::ng-deep .link-policy-floating-bar-left .counter{background:#34aa44;border-radius:.125rem;min-width:1.75rem}::ng-deep .link-policy-floating-bar-left .chip{background:#fff;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a;height:1.5rem;display:block;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .link-policy-floating-bar-left .chip i{position:relative;top:.0625rem;cursor:pointer}::ng-deep .link-policy-floating-bar-left button.count{background:#34aa44;border:none;border-radius:.125rem;height:1.5rem}::ng-deep .link-policy-floating-bar-right button{background:transparent;border:none;border-radius:.125rem;padding:0 .5rem;height:1.5rem}::ng-deep .link-policy-floating-bar-right button.white-btn{background:#fff;border:1px solid #f1f1f1}::ng-deep .link-policy-floating-bar-right button.white-btn.disabled{background:#f1f1f1!important;color:#747576!important;pointer-events:none!important}::ng-deep .link-policy-floating-bar-right button.next-btn{background:#1e5dd3}::ng-deep .link-policy-floating-bar-right button.next-btn.disabled{background:#f1f1f1!important;color:#747576!important;pointer-events:none!important}::ng-deep app-popover .wf-action-list ul.action-item li .avatar-card .cross-btn{cursor:pointer}::ng-deep .program-listing{position:fixed;top:0;right:500px;bottom:0;left:0}::ng-deep .program-listing:before{background:#1E5DD3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .program-listing-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .program-listing-head button.back-btn{background:transparent;border:none;border-radius:0}::ng-deep .program-listing-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .program-listing-body .filter-card{box-shadow:0 0 2px #00000029;border-radius:.125rem;height:55px;cursor:pointer}::ng-deep .program-listing-body .filter-card.active{box-shadow:0 3px 12px #1e5dd340;border:none;pointer-events:none}::ng-deep .program-listing-body .filter-card.active span.counter{background:#F1F1F1;color:#042e7d}::ng-deep .program-listing-body .filter-card label{font-weight:500;text-transform:uppercase;color:#747576;line-height:16px;margin-left:0;font-size:11px;width:100%;pointer-events:none}::ng-deep .program-listing-body .filter-card p{line-height:16px;font-size:11px;color:#161b2f;font-weight:600;margin:0}::ng-deep .program-listing-body .filter-card span.counter{display:flex;height:28px;min-width:28px;border-radius:2px;background:#042E7D;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;padding:0 4px;line-height:28px}::ng-deep .program-listing-body .filter-card .left{display:flex;flex-wrap:wrap}::ng-deep .program-listing-body .filter-card+.filter-card{margin-left:10px}::ng-deep .program-listing-body .filter-card-row .vx-table-card.active{box-shadow:0 3px 12px #1e5dd340!important}::ng-deep .program-listing-body .search-block{position:relative}::ng-deep .program-listing-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .program-listing-body .search-block input::placeholder{font-weight:400}::ng-deep .program-listing-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .program-listing-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .program-listing-body .program-listing-part{height:calc(100vh - 288px);overflow:auto;padding:0 12px 0 0;width:calc(100% + 12px)}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-track{background-color:#fff;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::ng-deep .program-listing-body .program-listing-part::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .program-listing-body .program-listing-part.with-pagination{height:calc(100vh - 320px)}::ng-deep .program-listing-body .program-listing-part .selected-area{background:#fff;height:32px;position:sticky;top:0;z-index:1}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:100%;height:16px}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item{width:100%;position:relative}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox .checkbox-item .value,::ng-deep .program-listing-body .program-listing-part .selected-area app-cs-checkbox-indeterminate .checkbox-item .value{color:#161b2f;font-size:12px;font-weight:500;margin-left:24px}::ng-deep .program-listing-body .program-listing-part .table-head .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column{color:#747576;font-size:11px;font-weight:500;height:28px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px;text-transform:uppercase}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.name{width:calc(100% - 64px);min-width:calc(100% - 64px)}::ng-deep .program-listing-body .program-listing-part .table-head .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item{border:1px solid #f1f1f1;border-radius:2px;margin-bottom:4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .main-list{cursor:pointer}::ng-deep .program-listing-body .program-listing-part .program-listing-item:hover .table-row .serial .sr-no{opacity:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active{border-color:#1e5dd3;box-shadow:0 3px 6px #4681ef26}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .serial .sr-no{opacity:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row{display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.disabled{pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column{color:#747576;height:48px;position:relative;width:100%;display:flex;align-items:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial .sr-no{width:16px;background:#f8f8f8;writing-mode:vertical-lr;color:#747576;font-size:10px;font-weight:500;display:flex;height:100%;align-items:center;justify-content:center;position:relative;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{position:absolute;top:14px;left:8px;opacity:0;transition:all .2s ease-in-out}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate{background:#fff;border-radius:2px;width:16px;height:16px;top:16px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox .checkbox-item .checkmark,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.serial app-cs-checkbox-indeterminate .checkbox-item .checkmark{position:absolute;top:0;left:0}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name{width:calc(100% - 32px);min-width:calc(100% - 32px)}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner{width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .value{color:#161b2f;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:8px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .count{background:#1E5DD3;border-radius:20px;color:#fff;font-size:9px;font-weight:500;line-height:16px;min-width:24px;display:inline-block;text-align:center;padding:0 4px}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.name .name-inner .name-with-count{display:flex;align-items:center;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action{width:32px;max-width:32px;justify-content:center}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.arrow{background:transparent;border:none;border-radius:0;color:#747576;font-size:12px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row .table-column.action button.disabled{opacity:.5!important;pointer-events:none}::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row:hover .table-column.serial app-cs-checkbox-indeterminate,::ng-deep .program-listing-body .program-listing-part .program-listing-item .table-row.active .table-column.serial app-cs-checkbox-indeterminate{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row{border-top:1px solid #f1f1f1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no{color:#f8f8f8}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row:hover .table-column.serial .sr-no vui-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row.active .table-column.serial .sr-no vui-checkbox{opacity:1}::ng-deep .program-listing-body .program-listing-part .program-listing-item .sub-list .table-row .table-column.name .name-inner .value{color:#747576;font-size:12px}::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-radio,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox,::ng-deep .program-listing-body .program-listing-part .program-listing-item.active .table-row .table-column.serial app-cs-checkbox-indeterminate{opacity:1}::ng-deep .program-listing-confirmation{background:#161B2F;border-radius:.25rem;position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:1}::ng-deep .program-listing-confirmation .confirmation-top{display:flex;align-items:center;justify-content:flex-start;padding:1.25rem}::ng-deep .program-listing-confirmation .confirmation-top .icon-block{height:2.25rem;width:2.25rem;min-width:2.25rem;border-radius:50%;background:#fff;border:1px solid #dbdbdb;display:flex;justify-content:center;align-items:center;margin-right:1rem}::ng-deep .program-listing-confirmation .confirmation-top .icon-block i{color:#eb2424;font-size:12px}::ng-deep .program-listing-confirmation .confirmation-top .text{color:#fff;font-size:14px;font-weight:300}::ng-deep .program-listing-confirmation .confirmation-bottom{background:#282E48;border-radius:0 0 .25rem .25rem;padding:.75rem .75rem .75rem 1.25rem;display:flex;align-items:center;justify-content:space-between}::ng-deep .program-listing-confirmation .confirmation-bottom .message{font-size:14px;font-weight:500;line-height:20px;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group{display:flex}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button{height:1.5rem;width:4rem;border:1px solid #fff;border-radius:.125rem;display:flex;align-items:center;justify-content:center;line-height:22px;cursor:pointer;font-size:11px;text-transform:uppercase;font-weight:500;padding:0}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.no-btn{background:transparent;color:#fff}::ng-deep .program-listing-confirmation .confirmation-bottom .button-group button.yes-btn{background:#fff;color:#1e5dd3;margin-left:.25rem}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
|
|
37057
37057
|
},] }
|
|
37058
37058
|
];
|