vcomply-workflow-engine 2.6.42 → 2.6.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/bundles/vcomply-workflow-engine.umd.js +55 -48
  2. package/bundles/vcomply-workflow-engine.umd.js.map +1 -1
  3. package/esm2015/lib/add-multiple-responsibility/add-multiple-responsibility.component.js +3 -3
  4. package/esm2015/lib/add-multiple-risk/add-multiple-risk.component.js +2 -2
  5. package/esm2015/lib/create-documents/create-documents.component.js +5 -5
  6. package/esm2015/lib/log-an-issue/log-an-issue.component.js +3 -3
  7. package/esm2015/lib/sharedComponents/assessment-editor/components/assessment-settings/assessment-settings.component.js +3 -3
  8. package/esm2015/lib/sharedComponents/assessment-editor/components/move/move.component.js +3 -3
  9. package/esm2015/lib/sharedComponents/checkpoint/checkpoints/checkpoints.component.js +2 -2
  10. package/esm2015/lib/sharedComponents/document-section/document-section.component.js +5 -5
  11. package/esm2015/lib/sharedComponents/frequency/frequency-container/frequency-container.component.js +5 -5
  12. package/esm2015/lib/sharedComponents/group-users-list/group-users-list.component.js +2 -2
  13. package/esm2015/lib/sharedComponents/review-frequency/review-frequency.component.js +2 -2
  14. package/esm2015/lib/ui-kit/snack-bar/snack-bar.component.js +14 -8
  15. package/esm2015/lib/ui-kit/snack-bar/snack-bar.component.ngfactory.js +3 -3
  16. package/esm2015/lib/ui-kit/snack-bar/snack-bar.service.js +3 -3
  17. package/esm2015/lib/workflow-assessment/workflow-assessment.component.js +4 -4
  18. package/esm2015/lib/workflow-compliance/workflow-compliance.component.js +3 -3
  19. package/esm2015/lib/workflow-engine-container/workflow-engine-container.component.js +3 -3
  20. package/esm2015/lib/workflow-policy/workflow-policy.component.js +6 -6
  21. package/esm2015/lib/workflow-risk/workflow-risk.component.js +5 -4
  22. package/esm2015/lib/workflow-risk/workflow-risk.component.ngfactory.js +2 -2
  23. package/fesm2015/vcomply-workflow-engine.js +55 -48
  24. package/fesm2015/vcomply-workflow-engine.js.map +1 -1
  25. package/lib/ui-kit/snack-bar/snack-bar.component.d.ts +2 -0
  26. package/lib/ui-kit/snack-bar/snack-bar.service.d.ts +1 -1
  27. package/lib/workflow-risk/workflow-risk.component.d.ts +1 -0
  28. package/package.json +1 -1
  29. package/vcomply-workflow-engine.metadata.json +1 -1
@@ -37,11 +37,11 @@ class SnackBarService {
37
37
  this.snackbarSubject = new Subject();
38
38
  this.snackbarState = this.snackbarSubject.asObservable();
39
39
  }
40
- show(message, icon) {
40
+ show(message, type) {
41
41
  this.snackbarSubject.next({
42
42
  show: true,
43
43
  message,
44
- icon,
44
+ icon: type,
45
45
  });
46
46
  }
47
47
  hide() {
@@ -448,10 +448,10 @@ class WorkflowEngineContainerComponent {
448
448
  }
449
449
  setNetworkListner() {
450
450
  addEventListener('offline', (e) => {
451
- this.snackBar.show('Connection lost!<br>Check your network connectivity.');
451
+ this.snackBar.show('Connection lost!<br>Check your network connectivity.', 'alert');
452
452
  });
453
453
  addEventListener('online', (e) => {
454
- this.snackBar.show('You\'re back online!');
454
+ this.snackBar.show('You\'re back online!', 'success');
455
455
  });
456
456
  }
457
457
  ngAfterViewInit() {
@@ -1028,6 +1028,7 @@ class WorkflowRiskComponent {
1028
1028
  this.loader = false;
1029
1029
  //
1030
1030
  this.activeSelector = '';
1031
+ this.currentTimeStamp = Math.round(Date.now() / 1000);
1031
1032
  this.description = {
1032
1033
  mode: 'prime',
1033
1034
  colorPalette: true,
@@ -1577,7 +1578,7 @@ class WorkflowRiskComponent {
1577
1578
  console.log(err);
1578
1579
  this.loader = false;
1579
1580
  this.uiKitService.isLoader = false;
1580
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
1581
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
1581
1582
  });
1582
1583
  }
1583
1584
  if (this.mode == 'EDIT' && this.openedFrom !== 'MOVE_TO_REGISTER') {
@@ -1592,7 +1593,7 @@ class WorkflowRiskComponent {
1592
1593
  console.log(err);
1593
1594
  this.loader = false;
1594
1595
  this.uiKitService.isLoader = false;
1595
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
1596
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
1596
1597
  });
1597
1598
  }
1598
1599
  if (this.openedFrom === 'MOVE_TO_REGISTER') {
@@ -1703,7 +1704,7 @@ class WorkflowRiskComponent {
1703
1704
  WorkflowRiskComponent.decorators = [
1704
1705
  { type: Component, args: [{
1705
1706
  selector: 'app-workflow-risk',
1706
- template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n <!-- Risk Type -->\r\n <div class=\"form-group-row\" [class.active]=\"false\"\r\n [class.disabled]=\"false\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\" *ngIf=\"true\">\r\n\r\n <svg *ngIf=\"false\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Type <span class=\"required\">*</span></label>\r\n <div class=\"risk-type-field\">\r\n <div class=\"type-item\" [class.active]=\"riskForm?.riskType === 'NORMAL'\">\r\n <button [class.disabled]=\"!riskTypeChangeAllowed\" (click)=\"changeRisk('NORMAL')\">ADD TO RISK REGISTER</button>\r\n <i class=\"icons info\" [appTooltip]=\"'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n </div>\r\n <div class=\"type-item\" [class.active]=\"riskForm?.riskType === 'REPORTED'\">\r\n <button [class.disabled]=\"!riskTypeChangeAllowed\" (click)=\"changeRisk('REPORTED')\">REPORT A RISK</button>\r\n <i class=\"icons info\" [appTooltip]=\"'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n </div>\r\n <span class=\"background-glider\"></span>\r\n </div>\r\n <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Risk Name -->\r\n <div class=\"form-group-row\" [class.active]=\"false\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'name' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"riskForm.title\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\" *ngIf=\"riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\">\r\n\r\n <svg *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Name <span class=\"required\">*</span></label>\r\n <input spaceTrim type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\" [(ngModel)]=\"riskForm.title\"\r\n placeholder=\"Add a risk name\" *ngIf=\"riskForm?.title?.trim() =='' || activeSelector === 'name'\">\r\n <div class=\"selected\" *ngIf=\"riskForm?.title?.trim()!= '' && activeSelector !== 'name'\">\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{riskForm.title}}</span>\r\n </div>\r\n <button class=\"edit\" (click)=\"activateSelector('name',true)\" type=\"button\"><i\r\n class=\"icons\">&#xe9ba;</i> Edit</button>\r\n </div>\r\n <p *ngIf=\"submitted && (!riskForm.title)\" class=\"error-message\">Add a risk name</p>\r\n <marx-editor [(ngModel)]=\"riskForm.description\" [editorConfig]=\"description\" (clickOutside)=\"checkDescription()\"></marx-editor>\r\n <p *ngIf=\"submitted && (riskForm.riskType ==='REPORTED' && !riskForm?.description?.trim()?.length)\" class=\"error-message\">Add a risk description</p>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Responsibility Center -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.responsibilityCentersList?.length>0\">\r\n <img *ngIf=\"riskForm?.responsibilityCentersList?.length==0 || activeSelector === 'rc'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\" alt=\"\">\r\n\r\n <svg *ngIf=\"riskForm?.responsibilityCentersList?.length>0 && activeSelector !== 'rc'\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Responsibility Center <span class=\"required\">*</span>\r\n <i class=\"icons\" [appTooltip]=\"'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.responsibilityCentersList?.length==0\">\r\n <input type=\"text\" (click)=\"activateSelector('rc',true)\"\r\n placeholder=\"Select Responsibility Center(s)\" readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.responsibilityCentersList?.length>0\">\r\n <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i> {{rcName.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\"\r\n appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+\r\n {{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'rc'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"submitted && (riskForm?.responsibilityCentersList?.length==0)\" class=\"error-message\">Assign\r\n this risk to a Responsibility Center(s)</p>\r\n <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rcName of riskForm?.responsibilityCentersList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i>\r\n {{ rcName.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 <!-- RISK OWNER -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'owner'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'owner' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length>0\">\r\n <img *ngIf=\"riskForm?.ownersList?.length ==0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"\" />\r\n\r\n <svg *ngIf=\"riskForm?.ownersList?.length>0 && activeSelector !== 'owner'\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK OWNER <span class=\"required\">*</span>\r\n <i class=\"icons\" [appTooltip]=\"'This is the person that is responsible for managing the risk.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length ==0\">\r\n <input type=\"text\" (click)=\"activateSelector('owner',true)\" placeholder=\"Select Risk Owner(s)\"\r\n readonly>\r\n </div>\r\n \r\n <div class=\"selected\" *ngIf=\"riskForm?.ownersList?.length>0\">\r\n <div class=\"chip-container\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\"\r\n *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n {{owner?.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover\r\n (click)=\"popoverOwner.popover()\" placement=\"right\">+\r\n {{riskForm?.ownersList?.slice(2).length}}</button>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'owner'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('owner',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"submitted && (riskForm?.ownersList?.length===0)\" class=\"error-message\">Select Owner(s) for this risk.</p>\r\n <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerPop\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i *ngIf = \"!nonRemovableUsersList.includes(owner?.member_id)\" class=\"icons\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Risk Category -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img *ngIf=\"!riskForm?.category?.selectedCategory || activeSelector === 'category'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" />\r\n\r\n <svg class=\"checkIcon\" *ngIf=\"riskForm?.category?.selectedCategory && activeSelector !== 'category'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Category\r\n <i class=\"icons\" [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n <input type=\"text\" (click)=\"activateSelector('category',true)\" placeholder=\"Select Risk Category\"\r\n readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"><i class=\"icons\"\r\n (click)=\"remove('category',riskForm.category.selectedCategory)\">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}\r\n </span>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length>0\">\r\n <div class=\"vx-form-group\" *ngFor=\"let tag of riskForm.categoryCustomTags\">\r\n <label class=\"vx-control-panel\">{{tag.custom_tag_name}}</label>\r\n <input type=\"text\" [(ngModel)]=\"tag.custom_tag_value\" [placeholder]=\"tag.custom_tag_name\">\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <!-- Assessment Deadline -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assessment'\" id=\"deadline\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'assessment' && sideSelectorElements.includes(activeSelector)\"\r\n *ngIf=\"!settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && !editDetails?.IfAssessmentDone\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days>=1\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n *ngIf=\"riskForm?.assessment_deadline_days<1 || activeSelector === 'assessment'\" alt=\"\" />\r\n <svg class=\"checkIcon\" *ngIf=\"riskForm?.assessment_deadline_days>=1 && activeSelector !== 'assessment'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Assessment Deadline <span class=\"required\">*</span>\r\n <i class=\"icons\" [appTooltip]=\"'This is the date that the inherent risk assessment must be completed by.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n <div class=\"input\">\r\n <span class=\"text\">Set Number of days</span>\r\n <div class=\"input-group counter\">\r\n <button (click)=\"changeRiskAssessment('subtract')\">\r\n <i class=\"icons\">&#xea53;</i>\r\n </button>\r\n <input type=\"number\" [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n (focusin)=\"activateSelector('assessment',true)\"\r\n (focusout)=\"activateSelector('assessment',false)\" name=\"riskAssessmentDeadline\"\r\n validateAssessment #deadline=\"ngModel\"\r\n (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" />\r\n <button (click)=\"changeRiskAssessment('add')\">\r\n <i class=\"icons\">&#xe915;</i>\r\n </button>\r\n </div>\r\n </div>\r\n <p *ngIf=\"submitted && (riskForm?.assessment_deadline_days<1)\" class=\"error-message\">\r\n Enter a value greater than 0.\r\n </p>\r\n <label class=\"vx-control-panel\" *ngIf=\"riskForm?.assessment_deadline_days>=1\">\r\n This risk assessment needs to be completed by {{ date | date: 'dd MMM yyyy' }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Risk Overseer -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"activeSelector === 'overseer'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'overseer' && sideSelectorElements.includes(activeSelector)\"\r\n *ngIf=\"riskForm.addOverseer\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length>0\">\r\n <img *ngIf=\"riskForm?.overseersList?.length==0 || activeSelector === 'overseer'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" />\r\n <svg class=\"checkIcon\" *ngIf=\"riskForm?.overseersList?.length>0 && activeSelector !== 'overseer'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Overseer<i class=\"icons\" [appTooltip]=\"'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n <div class=\"select\" *ngIf=\"riskForm?.overseersList?.length==0\">\r\n <input type=\"text\" (click)=\"activateSelector('overseer',true)\" placeholder=\"Select Risk Overseer(s)\"\r\n readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.overseersList?.length>0\">\r\n <div class=\"chip-container\" [class.more-one]=\"riskForm?.overseersList?.length>1\" [class.plus]=\"riskForm?.overseersList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let owner of riskForm?.overseersList?.slice(0,2)\"><i class=\"icons\"\r\n (click)=\"remove('overseer',owner)\">&#xe90d;</i> {{owner.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.overseersList?.length > 2\" type=\"button\" appPopover\r\n (click)=\"popoverOverseer.popover()\" placement=\"right\">+\r\n {{riskForm?.overseersList?.slice(2).length}}</button>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of riskForm?.overseersList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer',owner)\">&#xe90d;</i>\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Risk Mitigation Priority -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"false\"\r\n [class.disabled]=\"activeSelector && sideSelectorElements.includes(activeSelector)\"\r\n *ngIf=\"riskForm.addMitigation\">\r\n <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\" *ngIf=\"!riskForm.mitigation\" alt=\"\" />\r\n <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n </svg> -->\r\n <svg class=\"checkIcon\" *ngIf=\"riskForm.mitigation\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Mitigation Priority\r\n <i class=\"icons\" [appTooltip]=\"'This sets the priority level for the mitigation of each risk.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n\r\n <cs-select [(ngModel)]=\"riskForm.mitigation\" [placeholder]=\"'Select a mitigation priority'\"\r\n name=\"riskForm.mitigation\">\r\n <cs-option *ngFor=\"let data of mitigationDetails\" [value]=\"data?.mitigation_id\"\r\n [color]=\"data?.mitigation_color\">\r\n {{ data.mitigation_name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Recommended Mitigation Plan -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"riskForm?.addMitigationPlan\">\r\n <div id=\"riskSpace\" class=\"left\" [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\">\r\n <img *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) ===''\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"\" />\r\n <svg *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\" class=\"checkIcon\" \r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label for=\"\" class=\"vx-control-panel\">Recommended Mitigation Plans<link rel=\"manifest\" href=\"./manifest.json\">\r\n <i class=\"icons\" [appTooltip]=\"'Specify the mitigation plan that can be undertaken to mitigate the risk.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </label>\r\n <marx-editor [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n [editorConfig]=\"mitigationDescriptionPlan\" (clickOutside)=\"checkMitigationPlan()\">\r\n </marx-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\" [rcIdKey]=\"'rc_id'\"\r\n (saveSelectedList)=\"saveSelectedRCList($event)\" (closeRcList)=\"activateSelector('rc',false)\"\r\n [singularText]=\"'Responsibility Center selected'\" [pluralText]=\"'Responsibility Centers selected'\" >\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'owner'\" [usersList]=\"ownersList\" [selectedUsers]=\"riskForm.ownersList\"\r\n [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\" (closeUsersList)=\"activateSelector('owner',false)\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" ></app-owner-list>\r\n\r\n<app-category-list *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categoryList\"\r\n [selectedCategory]=\"riskForm.category\" (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n (closeCategoriesList)=\"activateSelector('category',false)\"></app-category-list>\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [usersList]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\" [userIdKey]=\"'member_id'\" [itemNameKey]=\"'member_name'\" [itemEmailKey]=\"'member_email'\"\r\n (saveSelectedList)=\"saveSelectedOverseersList($event)\" (closeUsersList)=\"activateSelector('overseer',false)\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" >\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<!-- <app-smiley-dialog *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog> -->\r\n\r\n <app-smiley-dialog-inline\r\n *ngIf=\"showSmiley\"\r\n [message]=\"smileyMessage\"\r\n [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\"\r\n (closeSmiley)=\"closeSmiley($event)\">\r\n </app-smiley-dialog-inline>\r\n",
1707
+ template: "<div class=\"workflw-risk\" *ngIf=\"!showSmiley\">\r\n <!-- Risk Type -->\r\n <div class=\"form-group-row\" [class.active]=\"false\"\r\n [class.disabled]=\"false\">\r\n <div class=\"left\" [class.checked]=\"false\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\" *ngIf=\"true\">\r\n\r\n <svg *ngIf=\"false\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Type <span class=\"required\">*</span></label>\r\n <div class=\"risk-type-field\">\r\n <div class=\"type-item\" [class.active]=\"riskForm?.riskType === 'NORMAL'\">\r\n <button [class.disabled]=\"!riskTypeChangeAllowed\" (click)=\"changeRisk('NORMAL')\">ADD TO RISK REGISTER</button>\r\n <i class=\"icons info\" [appTooltip]=\"'This option lets you add a risk directly to the Risk Register. The risk owners will receive an alert and they can begin the the risk assessment process.'\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n </div>\r\n <div class=\"type-item\" [class.active]=\"riskForm?.riskType === 'REPORTED'\">\r\n <button [class.disabled]=\"!riskTypeChangeAllowed\" (click)=\"changeRisk('REPORTED')\">REPORT A RISK</button>\r\n <i class=\"icons info\" [appTooltip]=\"'This options lets you report a risk and assign it to the risk owners. The risk owners will have the option to either add the risk to the Risk Register or flag it for a follow-up at a later date.'\" placement=\"bottom-right\" delay=\"0\" type=\"white\" [tooltipMandatory]=\"true\">&#xe932;</i>\r\n </div>\r\n <span class=\"background-glider\"></span>\r\n </div>\r\n <p *ngIf=\"false\" class=\"error-message\">Add a risk type</p>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Risk Name -->\r\n <div class=\"form-group-row\" [class.active]=\"false\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'name' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"riskForm.title\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/what.svg\" alt=\"im\" *ngIf=\"riskForm?.title?.trim()?.length === 0 || activeSelector === 'name'\">\r\n\r\n <svg *ngIf=\"riskForm?.title?.trim()?.length > 0 && activeSelector !== 'name'\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Name <span class=\"required\">*</span></label>\r\n <input spaceTrim type=\"text\" (keydown)=\"activeSelector = 'name'\" (focusin)=\"activateSelector('name',true)\"\r\n (focusout)=\"activateSelector('name',false)\" [(ngModel)]=\"riskForm.title\"\r\n placeholder=\"Add a risk name\" *ngIf=\"riskForm?.title?.trim() =='' || activeSelector === 'name'\">\r\n <div class=\"selected\" *ngIf=\"riskForm?.title?.trim()!= '' && activeSelector !== 'name'\">\r\n <div class=\"chip-container\">\r\n <span class=\"value\">{{riskForm.title}}</span>\r\n </div>\r\n <button class=\"edit\" (click)=\"activateSelector('name',true)\" type=\"button\"><i\r\n class=\"icons\">&#xe9ba;</i> Edit</button>\r\n </div>\r\n <p *ngIf=\"submitted && (!riskForm.title)\" class=\"error-message\">Add a risk name</p>\r\n <marx-editor [(ngModel)]=\"riskForm.description\" [editorConfig]=\"description\" (clickOutside)=\"checkDescription()\"></marx-editor>\r\n <p *ngIf=\"submitted && (riskForm.riskType ==='REPORTED' && !riskForm?.description?.trim()?.length)\" class=\"error-message\">Add a risk description</p>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Responsibility Center -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'rc'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'rc' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.responsibilityCentersList?.length>0\">\r\n <img *ngIf=\"riskForm?.responsibilityCentersList?.length==0 || activeSelector === 'rc'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/responsibility-center.svg\" alt=\"\">\r\n\r\n <svg *ngIf=\"riskForm?.responsibilityCentersList?.length>0 && activeSelector !== 'rc'\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Responsibility Center <span class=\"required\">*</span>\r\n <i class=\"icons\" [appTooltip]=\"'Responsibility Centers represent the corporate and operational infrastructure of an organization. One or more Responsibility Centers can be exposed to a risk and accordingly, the risk must be assessed against each Responsibility Center.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.responsibilityCentersList?.length==0\">\r\n <input type=\"text\" (click)=\"activateSelector('rc',true)\"\r\n placeholder=\"Select Responsibility Center(s)\" readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.responsibilityCentersList?.length>0\">\r\n <div class=\"chip-container\" [class.more-one]=\"riskForm?.responsibilityCentersList?.length>1\" [class.plus]=\"riskForm?.responsibilityCentersList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let rcName of riskForm?.responsibilityCentersList?.slice(0,2)\"><i\r\n class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i> {{rcName.item_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.responsibilityCentersList?.length > 2\" type=\"button\"\r\n appPopover (click)=\"popoverRC.popover()\" placement=\"right\">+\r\n {{riskForm?.responsibilityCentersList?.slice(2).length}}</button>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'rc'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('rc',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"submitted && (riskForm?.responsibilityCentersList?.length==0)\" class=\"error-message\">Assign\r\n this risk to a Responsibility Center(s)</p>\r\n <app-popover #popoverRC [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let rcName of riskForm?.responsibilityCentersList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('rc',rcName)\">&#xe90d;</i>\r\n {{ rcName.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 <!-- RISK OWNER -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'owner'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'owner' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.ownersList?.length>0\">\r\n <img *ngIf=\"riskForm?.ownersList?.length ==0 || activeSelector === 'owner'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/im-creating.svg\" alt=\"\" />\r\n\r\n <svg *ngIf=\"riskForm?.ownersList?.length>0 && activeSelector !== 'owner'\" class=\"checkIcon\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">RISK OWNER <span class=\"required\">*</span>\r\n <i class=\"icons\" [appTooltip]=\"'This is the person that is responsible for managing the risk.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </label>\r\n <div class=\"select\" *ngIf=\"riskForm?.ownersList?.length ==0\">\r\n <input type=\"text\" (click)=\"activateSelector('owner',true)\" placeholder=\"Select Risk Owner(s)\"\r\n readonly>\r\n </div>\r\n \r\n <div class=\"selected\" *ngIf=\"riskForm?.ownersList?.length>0\">\r\n <div class=\"chip-container\" [class.more-one]=\"riskForm?.ownersList?.length>1\" [class.plus]=\"riskForm?.ownersList?.length>2\">\r\n <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerList\">\r\n <span class=\"chip\" *ngFor=\"let owner of ownerList?.slice(0,2)\"><i class=\"icons\"\r\n *ngIf=\"!nonRemovableUsersList.includes(owner?.member_id)\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n {{owner?.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.ownersList?.length > 2\" type=\"button\" appPopover\r\n (click)=\"popoverOwner.popover()\" placement=\"right\">+\r\n {{riskForm?.ownersList?.slice(2).length}}</button>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'owner'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('owner',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <p *ngIf=\"submitted && (riskForm?.ownersList?.length===0)\" class=\"error-message\">Select Owner(s) for this risk.</p>\r\n <app-popover #popoverOwner [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ng-container *ngIf=\"(riskForm?.ownersList|shortMerge : nonRemovableUsersList) as ownerPop\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of ownerPop | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i *ngIf = \"!nonRemovableUsersList.includes(owner?.member_id)\" class=\"icons\" (click)=\"remove('owner',owner)\">&#xe90d;</i>\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Risk Category -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'category'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'category' && sideSelectorElements.includes(activeSelector)\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.category?.selectedCategory\">\r\n <img *ngIf=\"!riskForm?.category?.selectedCategory || activeSelector === 'category'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/category.svg\" alt=\"\" />\r\n\r\n <svg class=\"checkIcon\" *ngIf=\"riskForm?.category?.selectedCategory && activeSelector !== 'category'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Category\r\n <i class=\"icons\" [appTooltip]=\"'Risk Categories are used to group similar risks.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n <div class=\"select\" *ngIf=\"!riskForm?.category?.selectedCategory\">\r\n <input type=\"text\" (click)=\"activateSelector('category',true)\" placeholder=\"Select Risk Category\"\r\n readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.category?.selectedCategory\">\r\n <div class=\"chip-container\">\r\n <span class=\"chip\"><i class=\"icons\"\r\n (click)=\"remove('category',riskForm.category.selectedCategory)\">&#xe90d;</i>{{riskForm?.category?.selectedCategory?.category_name}}\r\n </span>\r\n </div>\r\n <button *ngIf=\"activeSelector !== 'category'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('category',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"riskForm?.categoryCustomTags?.length>0\">\r\n <div class=\"vx-form-group\" *ngFor=\"let tag of riskForm.categoryCustomTags\">\r\n <label class=\"vx-control-panel\">{{tag.custom_tag_name}}</label>\r\n <input type=\"text\" [(ngModel)]=\"tag.custom_tag_value\" [placeholder]=\"tag.custom_tag_name\">\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <!-- Assessment Deadline -->\r\n <div class=\"form-group-row\" [class.active]=\"activeSelector === 'assessment'\" id=\"deadline\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'assessment' && sideSelectorElements.includes(activeSelector)\"\r\n *ngIf=\"!settingsInfo?.assessment_deadline_enable && riskForm?.riskType !== 'REPORTED' && ((currentTimeStamp < editDetails?.assessment_date_timestamp) || !editDetails?.IfAssessmentDone )\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.assessment_deadline_days>=1\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/when.svg\"\r\n *ngIf=\"riskForm?.assessment_deadline_days<1 || activeSelector === 'assessment'\" alt=\"\" />\r\n <svg class=\"checkIcon\" *ngIf=\"riskForm?.assessment_deadline_days>=1 && activeSelector !== 'assessment'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Assessment Deadline <span class=\"required\">*</span>\r\n <i class=\"icons\" [appTooltip]=\"'This is the date that the inherent risk assessment must be completed by.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n <div class=\"input\">\r\n <span class=\"text\">Set Number of days</span>\r\n <div class=\"input-group counter\">\r\n <button (click)=\"changeRiskAssessment('subtract')\">\r\n <i class=\"icons\">&#xea53;</i>\r\n </button>\r\n <input type=\"number\" [(ngModel)]=\"riskForm.assessment_deadline_days\"\r\n (focusin)=\"activateSelector('assessment',true)\"\r\n (focusout)=\"activateSelector('assessment',false)\" name=\"riskAssessmentDeadline\"\r\n validateAssessment #deadline=\"ngModel\"\r\n (ngModelChange)=\"changeRiskAssessmentDeadline($event)\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" />\r\n <button (click)=\"changeRiskAssessment('add')\">\r\n <i class=\"icons\">&#xe915;</i>\r\n </button>\r\n </div>\r\n </div>\r\n <p *ngIf=\"submitted && (riskForm?.assessment_deadline_days<1)\" class=\"error-message\">\r\n Enter a value greater than 0.\r\n </p>\r\n <label class=\"vx-control-panel\" *ngIf=\"riskForm?.assessment_deadline_days>=1\">\r\n This risk assessment needs to be completed by {{ date | date: 'dd MMM yyyy' }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Risk Overseer -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"activeSelector === 'overseer'\"\r\n [class.disabled]=\" activeSelector && activeSelector !== 'overseer' && sideSelectorElements.includes(activeSelector)\"\r\n *ngIf=\"riskForm.addOverseer\">\r\n <div class=\"left\" [class.checked]=\"riskForm?.overseersList?.length>0\">\r\n <img *ngIf=\"riskForm?.overseersList?.length==0 || activeSelector === 'overseer'\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/oversight.svg\" alt=\"\" />\r\n <svg class=\"checkIcon\" *ngIf=\"riskForm?.overseersList?.length>0 && activeSelector !== 'overseer'\"\r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Overseer<i class=\"icons\" [appTooltip]=\"'This is the person that is responsible for overseeing the risk but who is not responsible for managing the risk.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n <div class=\"select\" *ngIf=\"riskForm?.overseersList?.length==0\">\r\n <input type=\"text\" (click)=\"activateSelector('overseer',true)\" placeholder=\"Select Risk Overseer(s)\"\r\n readonly>\r\n </div>\r\n <div class=\"selected\" *ngIf=\"riskForm?.overseersList?.length>0\">\r\n <div class=\"chip-container\" [class.more-one]=\"riskForm?.overseersList?.length>1\" [class.plus]=\"riskForm?.overseersList?.length>2\">\r\n <span class=\"chip\" *ngFor=\"let owner of riskForm?.overseersList?.slice(0,2)\"><i class=\"icons\"\r\n (click)=\"remove('overseer',owner)\">&#xe90d;</i> {{owner.member_name}}</span>\r\n <button class=\"count\" *ngIf=\"riskForm?.overseersList?.length > 2\" type=\"button\" appPopover\r\n (click)=\"popoverOverseer.popover()\" placement=\"right\">+\r\n {{riskForm?.overseersList?.slice(2).length}}</button>\r\n </div>\r\n\r\n <button *ngIf=\"activeSelector !== 'overseer'\" class=\"edit\" type=\"button\"\r\n (click)=\"activateSelector('overseer',true)\"><i class=\"icons\">&#xe9ba;</i>\r\n Edit</button>\r\n </div>\r\n <app-popover #popoverOverseer [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let owner of riskForm?.overseersList | slice: 2; let j = index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" (click)=\"remove('overseer',owner)\">&#xe90d;</i>\r\n {{ owner.member_name }}\r\n </span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n </app-popover>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Risk Mitigation Priority -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" [class.active]=\"false\"\r\n [class.disabled]=\"activeSelector && sideSelectorElements.includes(activeSelector)\"\r\n *ngIf=\"riskForm.addMitigation\">\r\n <div class=\"left\" [class.checked]=\"riskForm.mitigation\">\r\n <img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/priority.svg\" *ngIf=\"!riskForm.mitigation\" alt=\"\" />\r\n <!-- <svg viewBox=\"25 25 50 50\" class=\"edit-loader\">\r\n <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"#1e5dd3\" stroke-width=\"3\" class=\"loader-path\"></circle>\r\n </svg> -->\r\n <svg class=\"checkIcon\" *ngIf=\"riskForm.mitigation\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label class=\"vx-control-panel\">Risk Mitigation Priority\r\n <i class=\"icons\" [appTooltip]=\"'This sets the priority level for the mitigation of each risk.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i></label>\r\n\r\n <cs-select [(ngModel)]=\"riskForm.mitigation\" [placeholder]=\"'Select a mitigation priority'\"\r\n name=\"riskForm.mitigation\">\r\n <cs-option *ngFor=\"let data of mitigationDetails\" [value]=\"data?.mitigation_id\"\r\n [color]=\"data?.mitigation_color\">\r\n {{ data.mitigation_name }}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Recommended Mitigation Plan -->\r\n <div [appScrollInView]=\"scrollToBottom\" class=\"form-group-row\" *ngIf=\"riskForm?.addMitigationPlan\">\r\n <div id=\"riskSpace\" class=\"left\" [class.checked]=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\">\r\n <img *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) ===''\"\r\n src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/objectives.svg\" alt=\"\" />\r\n <svg *ngIf=\"(riskForm.mitigationDescriptionPlan | spaceTrim) !== ''\" class=\"checkIcon\" \r\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n </svg>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"vx-form-group\">\r\n <label for=\"\" class=\"vx-control-panel\">Recommended Mitigation Plans<link rel=\"manifest\" href=\"./manifest.json\">\r\n <i class=\"icons\" [appTooltip]=\"'Specify the mitigation plan that can be undertaken to mitigate the risk.'\"\r\n placement=\"bottom\"\r\n delay=\"0\" type=\"white\"\r\n [tooltipMandatory]=\"true\">&#xe91f;</i>\r\n </label>\r\n <marx-editor [(ngModel)]=\"riskForm.mitigationDescriptionPlan\"\r\n [editorConfig]=\"mitigationDescriptionPlan\" (clickOutside)=\"checkMitigationPlan()\">\r\n </marx-editor>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n<app-responsibility-centers-list *ngIf=\"activeSelector === 'rc'\" [responsibilityCentersList]=\"responsibilityCentersList\"\r\n [selectedResponsibilityCenters]=\"riskForm.responsibilityCentersList\" [rcIdKey]=\"'rc_id'\"\r\n (saveSelectedList)=\"saveSelectedRCList($event)\" (closeRcList)=\"activateSelector('rc',false)\"\r\n [singularText]=\"'Responsibility Center selected'\" [pluralText]=\"'Responsibility Centers selected'\" >\r\n</app-responsibility-centers-list>\r\n\r\n<app-owner-list *ngIf=\"activeSelector === 'owner'\" [usersList]=\"ownersList\" [selectedUsers]=\"riskForm.ownersList\"\r\n [userIdKey]=\"'member_id'\" [itemEmailKey]=\"'member_email'\" [itemNameKey]=\"'member_name'\" (saveSelectedList)=\"saveSelectedOwnersList($event)\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\" (closeUsersList)=\"activateSelector('owner',false)\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" ></app-owner-list>\r\n\r\n<app-category-list *ngIf=\"activeSelector === 'category'\" [categoryList]=\"categoryList\"\r\n [selectedCategory]=\"riskForm.category\" (saveSelectedCategory)=\"saveSelectedCategory($event)\"\r\n (closeCategoriesList)=\"activateSelector('category',false)\"></app-category-list>\r\n<app-owner-list *ngIf=\"activeSelector === 'overseer'\" [usersList]=\"overseersList\"\r\n [selectedUsers]=\"riskForm.overseersList\" [userIdKey]=\"'member_id'\" [itemNameKey]=\"'member_name'\" [itemEmailKey]=\"'member_email'\"\r\n (saveSelectedList)=\"saveSelectedOverseersList($event)\" (closeUsersList)=\"activateSelector('overseer',false)\"\r\n [singularText]=\"'User selected'\" [pluralText]=\"'Users selected'\" >\r\n</app-owner-list>\r\n<app-loader-inline *ngIf=\"loader\"></app-loader-inline>\r\n<!-- <app-smiley-dialog *ngIf=\"showSmiley\" [message]=\"smileyMessage\" [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\" (closeSmiley)=\"closeSmiley($event)\"></app-smiley-dialog> -->\r\n\r\n <app-smiley-dialog-inline\r\n *ngIf=\"showSmiley\"\r\n [message]=\"smileyMessage\"\r\n [actionButtons]=\"actionButtons\"\r\n (action)=\"action($event)\"\r\n (closeSmiley)=\"closeSmiley($event)\">\r\n </app-smiley-dialog-inline>\r\n",
1707
1708
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .workflw-risk{display:block;position:relative}", "@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:15px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:3px 12px;line-height:16px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;cursor:pointer}::ng-deep .vx-form-group .select .custom-input:empty:not(:focus):before{content:attr(aria-placeholder);line-height:16px;font-size:13px;width:94%;display:block;pointer-events:none;opacity:.8}::ng-deep .vx-form-group .select .custom-input:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:116px}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 24px;display:flex;align-items:center}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px;margin-right:20px}::ng-deep .vx-form-group .tab-group .upload-file .browse{display:flex;align-items:center;justify-content:center;width:calc(100% - 100px);text-align:center}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;top:0;margin:0;padding:0;right:0;bottom:0;left:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:12px \u200B24px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#fff}::ng-deep .vx-form-group .file-list cs-select{position:relative;margin-top:8px;width:100%}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group input.value{height:32px!important;font-size:11px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;width:100%;margin-top:4px;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:16px;font-weight:400;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group .input,::ng-deep .vx-form-group input[type=text]{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;outline:none;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group .input:hover,::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group input[type=text]:hover{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .input.error,::ng-deep .vx-form-group input[type=text].error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group .input.error:focus,::ng-deep .vx-form-group input[type=text].error:focus{box-shadow:0 0 5px rgba(211,30,30,.27)}::ng-deep .vx-form-group .input:disabled,::ng-deep .vx-form-group input[type=text]:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .input:disabled:hover,::ng-deep .vx-form-group input[type=text]:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group .input span.text,::ng-deep .vx-form-group input[type=text] span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group .input .input-group,::ng-deep .vx-form-group input[type=text] .input-group{display:flex;align-items:center}::ng-deep .vx-form-group .input .input-group.counter,::ng-deep .vx-form-group input[type=text] .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group .input .input-group.counter button,::ng-deep .vx-form-group input[type=text] .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group .input .input-group.counter input,::ng-deep .vx-form-group input[type=text] .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}::ng-deep .vx-form-group .input+.file-list,::ng-deep .vx-form-group input[type=text]+.file-list{margin-top:8px}::ng-deep .vx-form-group .input::-moz-placeholder,::ng-deep .vx-form-group input[type=text]::-moz-placeholder{font-size:13px}::ng-deep .vx-form-group .input::placeholder,::ng-deep .vx-form-group input[type=text]::placeholder{font-size:13px}::ng-deep .vx-form-group .input:-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .input::-ms-input-placeholder,::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{width:100%;position:relative;z-index:1;margin:0 4px 0 0}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:1}::ng-deep .vx-form-group .classification label input:checked+span{color:#fff}::ng-deep .vx-form-group .classification label input:checked+span:before{bottom:0;height:100%;z-index:-1}::ng-deep .vx-form-group .classification label.low span:before{background:#34aa44}::ng-deep .vx-form-group .classification label.low-med span:before{background:#f2bf19}::ng-deep .vx-form-group .classification label.med-high span:before{background:#f29619}::ng-deep .vx-form-group .classification label.high span:before{background:#eb2424}::ng-deep .vx-form-group .classification label:last-of-type{margin-right:0}::ng-deep .vx-form-group .input{display:flex;align-items:center}::ng-deep .vx-form-group .selected{height:40px;border-radius:4px;border:1px solid #f1f1f1;background:#fbfbfb;outline:none;padding:8px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:flex;align-items:center;position:relative;justify-content:space-between}::ng-deep .vx-form-group .selected.first-field{z-index:2}::ng-deep .vx-form-group .selected .chip-container{display:flex;width:calc(100% - 60px);align-items:center}::ng-deep .vx-form-group .selected .chip-container.checkpoints{width:calc(100% - 120px)}::ng-deep .vx-form-group .selected .chip-container span.chip{background:#fff;border-radius:2px;box-shadow:0 0 3px #1e5dd31a;height:24px;padding:0 8px;color:#1e5dd3;font-size:12px;display:block;width:auto;max-width:100%;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}::ng-deep .vx-form-group .selected .chip-container span.chip.disabled{background:#f1f1f1;box-shadow:none;color:#747576;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:300px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:1px solid #f1f1f1;border-radius:2px;background:#fff;outline:none;cursor:pointer;display:block;height:24px;padding:0 5px 0 4px;font-size:11px;font-weight:500;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd3;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group marx-editor{margin-top:8px;display:block}::ng-deep .vx-form-group marx-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group marx-editor .editor-container .editable-block{min-height:60px;padding:11px 15px;max-height:100px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group marx-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools{z-index:1;border-top:1px solid #dbdbdb;transition:none;border-radius:0 0 3px 3px;position:static}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep .vx-form-group marx-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group marx-editor+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group app-cs-switch label.cs-switch span.value{font-size:11px;color:#747576;text-transform:uppercase}::ng-deep .vx-form-group app-cs-switch+app-cs-switch{margin-top:8px}::ng-deep .vx-form-group .date-time-picker{display:flex;justify-content:space-between;height:40px;border-radius:4px;border:1px solid #dbdbdb;padding:11px 0}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:#fff;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::-moz-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:16px;position:absolute;left:12px;top:0;color:#bcbcbc;font-size:16px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item.active button{color:#1e5dd3!important}::ng-deep .vx-form-group .risk-type-field .type-item:nth-child(2).active~.background-glider{transform:translate(100%)}::ng-deep .vx-form-group .risk-type-field .background-glider{background:#fff;border-radius:4px;box-shadow:0 1px 3px #161b2f26;position:absolute;display:flex;width:208px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:30px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;top:2px;right:0;bottom:0;left:2px;background:#fff;opacity:.7;border-radius:50%;width:32px;height:32px}.form-group-row.disabled .right{opacity:.3}.form-group-row.active{pointer-events:none;filter:grayscale(0);z-index:2;opacity:1}.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group input{border-color:#1e5dd3;box-shadow:0 0 5px rgba(30,93,211,.27)}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{width:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:5px}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@-webkit-keyframes rotate{to{transform:rotate(1turn)}}@keyframes rotate{to{transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#fff;box-shadow:0 3px 6px #00000029;padding:24px 0;z-index:9;max-height:calc(100vh - 200px);overflow:auto}::ng-deep .dropdown ul.dropdown-list{padding:0 20px;margin:0;display:block}::ng-deep .dropdown ul.dropdown-list li{list-style:none}::ng-deep .dropdown ul.dropdown-list li app-cs-radio{display:flex}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.radio{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item span.value{padding:11px 12px 11px 32px;width:100%;border:1px solid #bcbcbc;border-radius:4px;margin-left:0;max-width:100%}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item svg{position:absolute;top:12px;left:12px}::ng-deep .dropdown ul.dropdown-list li app-cs-radio label.radio-item input[type=radio]:checked~span.value{background:#e8feeb;border-color:#34aa44}::ng-deep .dropdown ul.dropdown-list li+li{margin-top:8px}app-smiley-dialog{position:relative;z-index:10}app-smiley-dialog-inline{position:absolute;top:-3px;right:0;bottom:0;z-index:999;width:520px;height:calc(100vh + 3px)}::ng-deep .vx-overlay{position:fixed;z-index:3;top:0;right:0;bottom:0;left:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;position:relative;margin-right:5px;border:1px solid #747576;border-top:none;margin-top:5px;background:#fff}::ng-deep span.file.table{margin-right:8px;width:18px;min-width:18px}::ng-deep span.file.table i{font-size:8px}::ng-deep span.file.table .format{height:8px;font-size:7px;line-height:8px;font-weight:400}::ng-deep span.file:before{position:absolute;border-radius:0;top:-4px;right:-1px;content:\"\";height:4px;width:4px;display:block;background:linear-gradient(45deg,#747576,#747576 1%,#747576 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0 0;background:#fff}::ng-deep span.file .format{height:10px;font-size:6px;text-transform:uppercase;background:transparent;font-weight:600;text-align:center;display:block;line-height:10px}::ng-deep span.file i{font-size:10px;height:10px;display:flex;align-items:center;justify-content:center;color:#dbdbdb}::ng-deep span.file.docx{width:22px!important}::ng-deep span.file.pdf,::ng-deep span.file.template{border-color:#f31c39}::ng-deep span.file.pdf:before,::ng-deep span.file.template:before{background:linear-gradient(45deg,#f31c39,#f31c39 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.css,::ng-deep span.file.less,::ng-deep span.file.scss,::ng-deep span.file.xls,::ng-deep span.file.xlsx{border-color:#34aa44}::ng-deep span.file.css:before,::ng-deep span.file.less:before,::ng-deep span.file.scss:before,::ng-deep span.file.xls:before,::ng-deep span.file.xlsx:before{background:linear-gradient(45deg,#34aa44,#34aa44 1%,#34aa44 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.css:after,::ng-deep span.file.less:after,::ng-deep span.file.scss:after,::ng-deep span.file.xls:after,::ng-deep span.file.xlsx:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.css .format,::ng-deep span.file.less .format,::ng-deep span.file.scss .format,::ng-deep span.file.xls .format,::ng-deep span.file.xlsx .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3,#1e5dd3 1%,#1e5dd3 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpeg,::ng-deep span.file.jpg,::ng-deep span.file.png,::ng-deep span.file.ppt{border-color:#f6882f}::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.jpg:before,::ng-deep span.file.png:before,::ng-deep span.file.ppt:before{background:linear-gradient(45deg,#f6882f,#f6882f 1%,#f6882f 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.jpg:after,::ng-deep span.file.png:after,::ng-deep span.file.ppt:after{border-color:#f6882f}::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.jpg .format,::ng-deep span.file.png .format,::ng-deep span.file.ppt .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7,#7aa6f7 1%,#7aa6f7 50%,rgba(41,137,216,0) 51%,rgba(125,185,232,0));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:rgba(0,0,0,.05)!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:14px solid #f1f1f1;border-bottom:12px solid transparent;border-top:12px solid transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:calc(224px / 2 - 20px)!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span{color:#000}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer span.active{color:#fff}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand{height:80px!important;top:calc(50% - 80px)!important;background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number>span.active{background-color:#1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__clock-hand_minute:before{border:4px solid #1e5dd3!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions{display:flex!important;padding:10px 0 0!important;background:#fff!important;justify-content:space-around!important;border-radius:0 0 2px 2px!important;overflow:hidden}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div:first-child ngx-material-timepicker-button button.timepicker-button{background:#f8f8f8;color:#1e5dd3}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button{line-height:28px!important;width:100%;background:#1e5dd3;color:#fff;border-radius:0!important;height:32px!important;width:116px!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .timepicker__actions div ngx-material-timepicker-button button.timepicker-button span{font-weight:500!important;font-size:11px;font-family:Poppins}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}"]
1708
1709
  },] }
1709
1710
  ];
@@ -4157,7 +4158,7 @@ class WorkflowComplianceComponent {
4157
4158
  console.log(err);
4158
4159
  this.loader = false;
4159
4160
  this.uiKitService.isLoader = false;
4160
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
4161
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
4161
4162
  });
4162
4163
  }
4163
4164
  if (this.mode == 'EDIT' || this.isDuplicateEntrust) {
@@ -4174,7 +4175,7 @@ class WorkflowComplianceComponent {
4174
4175
  console.log(err);
4175
4176
  this.loader = false;
4176
4177
  this.uiKitService.isLoader = false;
4177
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
4178
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
4178
4179
  });
4179
4180
  }
4180
4181
  }
@@ -6011,7 +6012,7 @@ class WorkflowPolicyComponent {
6011
6012
  console.error(err);
6012
6013
  this.loader = false;
6013
6014
  this.uiKitService.isLoader = false;
6014
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
6015
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
6015
6016
  });
6016
6017
  }
6017
6018
  if (this.mode == 'EDIT') {
@@ -6029,7 +6030,7 @@ class WorkflowPolicyComponent {
6029
6030
  }
6030
6031
  else {
6031
6032
  this.disconnectRefresh.emit(false);
6032
- this.snackBar.show('The policy has been updated');
6033
+ this.snackBar.show('The policy has been updated', 'success');
6033
6034
  window.location.href = this.baseURL + '/all/policy/workroom?id=' + this.policyId;
6034
6035
  // this.router.navigate(['/policy/workroom'], { queryParams: { id: this.policyId }, relativeTo: this.route });
6035
6036
  // window.location.reload();
@@ -6038,7 +6039,7 @@ class WorkflowPolicyComponent {
6038
6039
  console.error(err);
6039
6040
  this.loader = false;
6040
6041
  this.uiKitService.isLoader = false;
6041
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
6042
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
6042
6043
  });
6043
6044
  }
6044
6045
  }
@@ -6060,12 +6061,12 @@ class WorkflowPolicyComponent {
6060
6061
  }, (err) => {
6061
6062
  this.loader = false;
6062
6063
  console.error(err);
6063
- this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?');
6064
+ this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?', 'alert');
6064
6065
  });
6065
6066
  }
6066
6067
  else {
6067
6068
  this.loader = false;
6068
- this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?');
6069
+ this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?', 'alert');
6069
6070
  }
6070
6071
  }
6071
6072
  /**
@@ -8154,7 +8155,7 @@ class AddMultipleRiskComponent {
8154
8155
  console.log(err);
8155
8156
  this.loader = false;
8156
8157
  this.showExcel = false;
8157
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
8158
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
8158
8159
  });
8159
8160
  }
8160
8161
  returnIds(item, key) {
@@ -8540,7 +8541,7 @@ class CheckpointsComponent {
8540
8541
  save() {
8541
8542
  console.log(this.validateCheckpoint());
8542
8543
  if (this.validateCheckpoint() === false) {
8543
- this.snackbar.show('Please fill in the details.');
8544
+ this.snackbar.show('Please fill in the details.', 'alert');
8544
8545
  }
8545
8546
  else {
8546
8547
  this.errorIndex = -1;
@@ -9087,7 +9088,7 @@ class FrequencyContainerComponent {
9087
9088
  switch (this.frequencyTab) {
9088
9089
  case 'daily':
9089
9090
  if (this.frequencyData.continuous_failed_days < 2) {
9090
- this.snackbar.show('Input value should be greater than 1.');
9091
+ this.snackbar.show('Input value should be greater than 1.', 'alert');
9091
9092
  isInvalid = true;
9092
9093
  }
9093
9094
  else {
@@ -9098,7 +9099,7 @@ class FrequencyContainerComponent {
9098
9099
  break;
9099
9100
  case 'weekly':
9100
9101
  if (this.frequencyData.continuous_failed_days < 2) {
9101
- this.snackbar.show('Input value should be greater than 1.');
9102
+ this.snackbar.show('Input value should be greater than 1.', 'alert');
9102
9103
  isInvalid = true;
9103
9104
  break;
9104
9105
  }
@@ -9117,7 +9118,7 @@ class FrequencyContainerComponent {
9117
9118
  break;
9118
9119
  case 'monthly':
9119
9120
  if (this.frequencyData.continuous_failed_days < 2) {
9120
- this.snackbar.show('Input value should be greater than 1.');
9121
+ this.snackbar.show('Input value should be greater than 1.', 'alert');
9121
9122
  isInvalid = true;
9122
9123
  break;
9123
9124
  }
@@ -9146,7 +9147,7 @@ class FrequencyContainerComponent {
9146
9147
  if ((frequencyDetails === null || frequencyDetails === void 0 ? void 0 : frequencyDetails.length) > 0) {
9147
9148
  const selectedTime = moment(`${frequencyDetails[3]}-${frequencyDetails[2]}-${frequencyDetails[1]} ${this.frequencyData.timeIn12hr}`, 'DD-MM-YYYY HH:mm a').unix();
9148
9149
  if (Date.now() / 1000 > selectedTime) {
9149
- this.snackbar.show('Please set a future date.');
9150
+ this.snackbar.show('Please set a future date.', 'alert');
9150
9151
  isInvalid = true;
9151
9152
  break;
9152
9153
  }
@@ -11914,7 +11915,7 @@ class AddMultipleResponsibilityComponent {
11914
11915
  console.log(err);
11915
11916
  this.loader = false;
11916
11917
  this.showExcel = false;
11917
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
11918
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
11918
11919
  });
11919
11920
  }
11920
11921
  returnIds(item, key) {
@@ -12091,7 +12092,7 @@ class AddMultipleResponsibilityComponent {
12091
12092
  }, err => {
12092
12093
  console.error(err);
12093
12094
  this.loader = false;
12094
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
12095
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
12095
12096
  });
12096
12097
  }
12097
12098
  }
@@ -13707,7 +13708,7 @@ class LogAnIssueComponent {
13707
13708
  }, error => {
13708
13709
  this.loader = false;
13709
13710
  this.uiKitService.isLoader = false;
13710
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
13711
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
13711
13712
  });
13712
13713
  }
13713
13714
  else if (this.mode === 'CREATE' || this.mode === '' || !this.mode) {
@@ -13720,7 +13721,7 @@ class LogAnIssueComponent {
13720
13721
  }, error => {
13721
13722
  this.loader = false;
13722
13723
  this.uiKitService.isLoader = false;
13723
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
13724
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
13724
13725
  });
13725
13726
  }
13726
13727
  }
@@ -14230,7 +14231,7 @@ class CreateDocumentsComponent {
14230
14231
  this.uploadFile({ file: this.fileToUpload, fileType: this.fileType });
14231
14232
  }
14232
14233
  else {
14233
- this.snackBar.show('Please upload a valid file');
14234
+ this.snackBar.show('Please upload a valid file', 'alert');
14234
14235
  }
14235
14236
  }
14236
14237
  uploadFile(event) {
@@ -14250,7 +14251,7 @@ class CreateDocumentsComponent {
14250
14251
  }
14251
14252
  }, err => {
14252
14253
  this.isUploading = false;
14253
- this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?');
14254
+ this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?', 'alert');
14254
14255
  });
14255
14256
  }
14256
14257
  }
@@ -14264,7 +14265,7 @@ class CreateDocumentsComponent {
14264
14265
  }
14265
14266
  }, err => {
14266
14267
  this.isUploading = false;
14267
- this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?');
14268
+ this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?', 'alert');
14268
14269
  });
14269
14270
  }
14270
14271
  changeDocType(event) {
@@ -14286,7 +14287,7 @@ class CreateDocumentsComponent {
14286
14287
  }
14287
14288
  }, err => {
14288
14289
  this.isLoader = false;
14289
- this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?');
14290
+ this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?', 'alert');
14290
14291
  });
14291
14292
  }
14292
14293
  else if (event === 'docx') {
@@ -14470,7 +14471,7 @@ class GroupUsersListComponent {
14470
14471
  }
14471
14472
  validationCheck(isChecked) {
14472
14473
  if (isChecked) {
14473
- this.snackbar.show('You can select a maximum of 19 users.');
14474
+ this.snackbar.show('You can select a maximum of 19 users.', 'alert');
14474
14475
  }
14475
14476
  }
14476
14477
  setList() {
@@ -15302,14 +15303,20 @@ class SnackBarComponent {
15302
15303
  this.show = false;
15303
15304
  this.message = '--';
15304
15305
  this.icon = '&#xe914;';
15306
+ this.type = 'alert';
15307
+ this.icons = {
15308
+ success: '&#xe93d;',
15309
+ warning: '&#xe914;',
15310
+ info: '&#xe932;',
15311
+ alert: '&#xe914;',
15312
+ error: '&#xeaae;'
15313
+ };
15305
15314
  }
15306
15315
  ngOnInit() {
15307
15316
  this.snackbarSubscription = this.snackbarService.snackbarState.subscribe((state) => {
15308
- if (state === null || state === void 0 ? void 0 : state.type) {
15309
- this.icon = state.type;
15310
- }
15311
- else {
15312
- this.icon = '&#xe914;';
15317
+ if (state.icon && Object.keys(this.icons).includes(state === null || state === void 0 ? void 0 : state.icon)) {
15318
+ this.icon = this.icons[state.icon];
15319
+ this.type = state === null || state === void 0 ? void 0 : state.icon;
15313
15320
  }
15314
15321
  this.message = state.message;
15315
15322
  this.show = state.show;
@@ -15333,8 +15340,8 @@ class SnackBarComponent {
15333
15340
  SnackBarComponent.decorators = [
15334
15341
  { type: Component, args: [{
15335
15342
  selector: 'app-snack-bar',
15336
- template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n <div class=\"workflow-snackbar-inner\">\r\n <div class=\"workflow-snackbarText\">\r\n <!-- &#xe914; -->\r\n <i class=\"icons\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n </div>\r\n <button (click)=\"close()\">[ Close ]</button>\r\n </div>\r\n</div>",
15337
- styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.2);min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#f6882f;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#f6882f;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@-webkit-keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}"]
15343
+ template: "<div class=\"workflow-snackbar\" *ngIf=\"show\">\r\n <div class=\"workflow-snackbar-inner\">\r\n <div class=\"workflow-snackbarText\">\r\n <!-- &#xe914; -->\r\n <i class=\"icons\" [class]=\"type\" [innerHTML]=\"icon\"></i> <span [innerHTML]=\"message\">{{ message }}</span>\r\n </div>\r\n <button (click)=\"close()\">[ <span>Close</span> ]</button>\r\n </div>\r\n</div>",
15344
+ styles: ["::ng-deep .workflow-snackbar{position:fixed;top:20px;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:2147483647!important;pointer-events:none;-webkit-animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .3s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .workflow-snackbar.white{background-color:#fff;color:#000;z-index:20}::ng-deep .workflow-snackbar.white button{color:#f6882f;font-size:11px;font-weight:400;pointer-events:all}::ng-deep .workflow-snackbar .workflow-snackbar-inner{display:flex;max-width:500px;min-width:450px;align-items:center;justify-content:space-between;padding:10px;background:#fff;border-radius:3px;box-shadow:0 0 10px rgba(0,0,0,.2);min-height:55px;pointer-events:auto}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText{color:#161b2f;font-size:13px;display:flex;align-items:center;width:calc(100% - 70px)}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i{background:#f1f1f1;color:#d93b41;border-radius:50px;font-size:16px;width:30px;height:30px;text-align:center;line-height:28px;margin-right:10px;min-width:30px}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.success{color:#34aa44}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.warning{color:#f0b819}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.info{color:#1e5dd3}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.alert{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner .workflow-snackbarText i.error{color:#d93b41}::ng-deep .workflow-snackbar .workflow-snackbar-inner button{background:transparent;border:none;font-size:11px;padding:0;position:relative;color:#747576;width:65px;text-align:right;cursor:pointer;text-transform:uppercase}::ng-deep .workflow-snackbar .workflow-snackbar-inner button span{color:#1e5dd3;font-weight:500}::ng-deep .workflow-snackbar .workflow-snackbar-inner button:focus{outline:none}@-webkit-keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-top{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}"]
15338
15345
  },] }
15339
15346
  ];
15340
15347
  SnackBarComponent.ctorParameters = () => [
@@ -15814,7 +15821,7 @@ class ReviewFrequencyComponent {
15814
15821
  }
15815
15822
  onValueChange() {
15816
15823
  if (this.reviewCompleteDays < 1) {
15817
- this.snackbar.show('Please enter a value greater than 0.');
15824
+ this.snackbar.show('Please enter a value greater than 0.', 'alert');
15818
15825
  }
15819
15826
  }
15820
15827
  }
@@ -16425,7 +16432,7 @@ class DocumentSectionComponent {
16425
16432
  this.uploadFile({ file: this.fileToUpload, fileType: this.fileType });
16426
16433
  }
16427
16434
  else {
16428
- this.snackBar.show('Please upload a valid file');
16435
+ this.snackBar.show('Please upload a valid file', 'alert');
16429
16436
  }
16430
16437
  }
16431
16438
  uploadFile(event) {
@@ -16449,7 +16456,7 @@ class DocumentSectionComponent {
16449
16456
  }
16450
16457
  }, err => {
16451
16458
  this.isUploading = false;
16452
- this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?');
16459
+ this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?', 'alert');
16453
16460
  });
16454
16461
  }
16455
16462
  }
@@ -16467,7 +16474,7 @@ class DocumentSectionComponent {
16467
16474
  }
16468
16475
  }, err => {
16469
16476
  this.isUploading = false;
16470
- this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?');
16477
+ this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?', 'alert');
16471
16478
  });
16472
16479
  }
16473
16480
  changeDocType(event) {
@@ -16489,7 +16496,7 @@ class DocumentSectionComponent {
16489
16496
  }
16490
16497
  }, err => {
16491
16498
  this.isLoader = false;
16492
- this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?');
16499
+ this.snackBar.show('Oops! Something went wrong and we were unable to complete this action. Let\'s give it another try, shall we?', 'alert');
16493
16500
  });
16494
16501
  }
16495
16502
  else if (event === 'docx') {
@@ -16708,7 +16715,7 @@ class WorkflowAssessmentComponent {
16708
16715
  this.loader = false;
16709
16716
  },
16710
16717
  error: (err) => {
16711
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
16718
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
16712
16719
  this.loader = false;
16713
16720
  }
16714
16721
  });
@@ -16814,7 +16821,7 @@ class WorkflowAssessmentComponent {
16814
16821
  console.log(err);
16815
16822
  this.loader = false;
16816
16823
  this.uiKitService.isLoader = false;
16817
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
16824
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
16818
16825
  });
16819
16826
  }
16820
16827
  else if (this.mode === 'EDIT') {
@@ -16829,7 +16836,7 @@ class WorkflowAssessmentComponent {
16829
16836
  this.showSmiley = true;
16830
16837
  }
16831
16838
  else {
16832
- this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?');
16839
+ this.snackBar.show('OOPS! Something went wrong and the page could not be loaded. Could you please try one more time?', 'alert');
16833
16840
  }
16834
16841
  }
16835
16842
  });
@@ -18475,7 +18482,7 @@ class AssessmentSettingsComponent {
18475
18482
  }
18476
18483
  this.editorService.formsPage.responseSegment['maxScore'] = this.criteriaService.calculateMaxScore(this.editorService.formsPage);
18477
18484
  });
18478
- this.snackbar.show("The settings have been updated.");
18485
+ this.snackbar.show("The settings have been updated.", 'success');
18479
18486
  this.activeSettingType = '';
18480
18487
  // } else {
18481
18488
  // this.fd.formsPage.settings.assessmentMode = false;
@@ -18492,7 +18499,7 @@ class AssessmentSettingsComponent {
18492
18499
  if (evt.isEnabled) {
18493
18500
  evt.segmentData.isEnabled = true;
18494
18501
  this.editorService.formsPage.responseSegment = evt.segmentData;
18495
- this.snackbar.show("The settings have been updated.");
18502
+ this.snackbar.show("The settings have been updated.", 'success');
18496
18503
  this.activeSettingType = '';
18497
18504
  }
18498
18505
  }
@@ -22261,13 +22268,13 @@ class MoveComponent {
22261
22268
  this.service.formsPage.elements[this.questionIndex].page = this.currentPage;
22262
22269
  this.service.moveQuestion(this.questionIndex, nextIndex);
22263
22270
  // this.snackbar.snackbar.next(message);
22264
- this.snackbar.show(message);
22271
+ this.snackbar.show(message, 'success');
22265
22272
  setTimeout(() => {
22266
22273
  this.moveElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
22267
22274
  }, 400);
22268
22275
  }
22269
22276
  else {
22270
- this.snackbar.show('Please select a reference question to move');
22277
+ this.snackbar.show('Please select a reference question to move', 'alert');
22271
22278
  }
22272
22279
  }
22273
22280
  onPageChange(evt) {