vcomply-workflow-engine 6.1.21 → 6.1.23

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 (16) hide show
  1. package/esm2022/lib/report-a-case/components/due-date/due-date.component.mjs +3 -2
  2. package/esm2022/lib/report-a-case/components/report-date/report-date.component.mjs +2 -1
  3. package/esm2022/lib/sharedComponents/document-section/document-section.component.mjs +36 -14
  4. package/esm2022/lib/sharedComponents/policy-template/select-template-list/select-template-list.component.mjs +15 -5
  5. package/esm2022/lib/ui-kit/multi-select/cs-multiselect/cs-multiselect.component.mjs +12 -5
  6. package/esm2022/lib/workflow-policy/ms-word.constants.mjs +2 -2
  7. package/esm2022/lib/workflow-policy/workflow-policy.component.mjs +5 -5
  8. package/esm2022/lib/workflow-services/policy.service.mjs +2 -1
  9. package/fesm2022/vcomply-workflow-engine.mjs +67 -26
  10. package/fesm2022/vcomply-workflow-engine.mjs.map +1 -1
  11. package/lib/sharedComponents/document-section/document-section.component.d.ts +7 -5
  12. package/lib/sharedComponents/policy-template/select-template-list/select-template-list.component.d.ts +1 -0
  13. package/lib/ui-kit/multi-select/cs-multiselect/cs-multiselect.component.d.ts +3 -1
  14. package/lib/workflow-policy/workflow-policy.component.d.ts +0 -1
  15. package/lib/workflow-services/policy.service.d.ts +1 -0
  16. package/package.json +1 -1
package/fesm2022/vcomply-workflow-engine.mjs CHANGED
@@ -8801,6 +8801,7 @@ class PolicyService {
8801
8801
  this.authService = authService;
8802
8802
  this.PolicyCategoryList = new BehaviorSubject(null);
8803
8803
  this.linkedPolicies$ = new BehaviorSubject(null);
8804
+ this.templateView = new BehaviorSubject(false);
8804
8805
  this.linkRelatePolicies = {};
8805
8806
  if (config) {
8806
8807
  this.env = config.envConfig;
@@ -10808,6 +10809,7 @@ class ReportDateComponent {
10808
10809
  'Feb',
10809
10810
  'Mar',
10810
10811
  'Apr',
10812
+ 'May',
10811
10813
  'Jun',
10812
10814
  'Jul',
10813
10815
  'Aug',
@@ -12459,7 +12461,7 @@ class DueDateComponent {
12459
12461
  this.dateConfig.min = dayjs(this.validDeadline);
12460
12462
  }
12461
12463
  else {
12462
- this.dateConfig.min = dayjs(this.frequencyService.formatDate());
12464
+ this.dateConfig.min = this.frequencyService.formatDate();
12463
12465
  }
12464
12466
  }
12465
12467
  createStageAssigneeMap(stagesAssignees) {
@@ -12494,6 +12496,7 @@ class DueDateComponent {
12494
12496
  'Feb',
12495
12497
  'Mar',
12496
12498
  'Apr',
12499
+ 'May',
12497
12500
  'Jun',
12498
12501
  'Jul',
12499
12502
  'Aug',
@@ -34976,6 +34979,7 @@ class CsMultiselectComponent {
34976
34979
  this.applyFilter = new EventEmitter();
34977
34980
  this.searchText = new EventEmitter();
34978
34981
  this.resetSelectedData = new EventEmitter();
34982
+ this.restoreSelectedData = new EventEmitter();
34979
34983
  this.previousItems = [];
34980
34984
  this.itemsDisplayedList = [];
34981
34985
  this.filterApplied = true;
@@ -35094,21 +35098,25 @@ class CsMultiselectComponent {
35094
35098
  this.multiSelectService.overflowHidden = false;
35095
35099
  this.searchKey = '';
35096
35100
  if (applyFilter) {
35097
- this.tempSelectedData = [...this.value];
35101
+ this.tempSelectedData = [...new Set(this.value)];
35098
35102
  this.previousItems = [...new Set(this.items)];
35099
35103
  this.itemsDisplayedList = [...new Set(this.items)];
35100
35104
  this.applyFilter.emit(applyFilter);
35101
35105
  }
35102
35106
  else {
35103
35107
  this.filterApplied = true;
35104
- this.resetState();
35105
35108
  this.tempSelectedData?.forEach((ele) => {
35106
35109
  // this.addValue({key: ele?.rc_name ?? ele?.category_name, value: ele});
35107
35110
  this.addValue({ key: ele?.item_short_name, value: ele });
35108
35111
  });
35109
- this.previousItems = [...new Set(this.items)];
35112
+ this.resetToLastState();
35110
35113
  }
35111
35114
  }
35115
+ resetToLastState() {
35116
+ this.value = [...new Set(this.tempSelectedData)];
35117
+ this.items = [...new Set(this.previousItems)];
35118
+ this.restoreSelectedData.emit([...new Set(this.tempSelectedData)]);
35119
+ }
35112
35120
  checkChanges() {
35113
35121
  if (this.previousItems?.length === 0 && this.items?.length > 0) {
35114
35122
  return false;
@@ -35122,7 +35130,7 @@ class CsMultiselectComponent {
35122
35130
  }
35123
35131
  }
35124
35132
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsMultiselectComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
35125
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsMultiselectComponent, selector: "cs-multi-select", inputs: { isRequired: "isRequired", dropdownLabel: "dropdownLabel", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", value: "value", selectedItem: "selectedItem" }, outputs: { valueChange: "valueChange", applyFilter: "applyFilter", searchText: "searchText", resetSelectedData: "resetSelectedData" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"multi-select-input-group\" (clickOutside)=\"dropdownOption = false\">\n <label *ngIf=\"dropdownLabel\">\n {{ dropdownLabel }}\n <span class=\"sub-label\" *ngIf=\"dropdownSubLabel\">{{\n dropdownSubLabel\n }}</span>\n <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n >\n <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n <div class=\"multiple-value vx-d-flex vx-align-center vx-justify-between\">\n <div\n class=\"multiple-value-inner vx-d-flex vx-align-center vx-justify-end vx-pr-2\"\n (click)=\"openDropdown($event)\"\n ></div>\n <span class=\"placeholder\" *ngIf=\"!value || value?.length === 0\">{{\n placeholder\n }}</span>\n <!-- <i class=\"icons arrow-down vx-fs-9\">&#xe9e8;</i> -->\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"value && value?.length > 0\">\n <div\n class=\"chip\"\n *ngFor=\"let data of items | slice : 0 : 1; let i = index\"\n >\n <span class=\"close\" (click)=\"removeValue(i)\">&times;</span\n ><span class=\"value\">{{ data }}</span>\n </div>\n <span\n class=\"counter\"\n *ngIf=\"items.length > 1\"\n appPopover\n (click)=\"actionButton.popover()\"\n placement=\"right\"\n >+{{ items.length - 1 }}</span\n >\n <app-popover #actionButton>\n <div class=\"template-filter-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of items.slice(1); let j = index\">\n <div class=\"chip-item\">\n <i class=\"icons\" (click)=\"removeValue(j + 1)\">&#xe90d;</i>\n <span>{{ data }}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n <div\n class=\"overlay active\"\n *ngIf=\"dropdownOption === true\"\n (click)=\"closeDropdown(false)\"\n ></div>\n <ul\n class=\"list-of-option\"\n *ngIf=\"dropdownOption === true\"\n #optionList\n (keyup.Escape)=\"closeDropdown(false)\"\n [style.top.px]=\"getTop\"\n [style.left.px]=\"getLeft\"\n [style.min-width.px]=\"getWidth\"\n [style.max-width.px]=\"maxWidth\"\n [class.active]=\"activeDropdown\"\n >\n <div class=\"input-group\">\n <input\n type=\"text\"\n [placeholder]=\"searchPlaceholder\"\n [ngModel]=\"searchKey\"\n (ngModelChange)=\"search($event)\"\n />\n </div>\n <ng-content></ng-content>\n <div class=\"button-block\">\n <button\n type=\"button\"\n [class.disabled]=\"checkChanges()\"\n (click)=\"closeDropdown(true)\"\n >\n Apply\n </button>\n </div>\n </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .multi-select-input-group{position:relative;margin-bottom:0}::ng-deep .multi-select-input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .multi-select-input-group label span.required{color:#eb2424;font-size:14px}::ng-deep .multi-select-input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:4px}::ng-deep .multi-select-input-group .multiple-value{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #cdced6;border-radius:4px;width:100%;display:flex;padding:6px 25px 6px 6px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;position:relative}::ng-deep .multi-select-input-group .multiple-value-inner{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .multi-select-input-group .multiple-value-inner:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:8px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .multi-select-input-group .multiple-value .placeholder{color:#565a6f;font-size:11px;line-height:16px;pointer-events:none}::ng-deep .multi-select-input-group .multiple-value .arrow-down{position:relative;right:-16px;z-index:1}::ng-deep .multi-select-input-group .multiple-value.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}::ng-deep .multi-select-input-group .multiple-value .chip{display:inline-flex;border-radius:2px;background:#f8f8f8;border:1px solid #f8f8f8;height:22px;padding:0 5px;pointer-events:none;max-width:100%;position:relative;z-index:1;box-shadow:0 1px 4px #1e5dd340;max-width:150px}::ng-deep .multi-select-input-group .multiple-value .chip span{display:inline-block}::ng-deep .multi-select-input-group .multiple-value .chip span.close{cursor:pointer;color:#1e5dd3;font-size:16px;line-height:20px;pointer-events:auto}::ng-deep .multi-select-input-group .multiple-value .chip span.value{color:#747576;margin-left:5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .multi-select-input-group .multiple-value .chip+.chip{margin-left:4px}::ng-deep .multi-select-input-group .multiple-value .counter{display:inline-flex;border-radius:2px;background:#34aa44;border:1px solid #34aa44;height:22px;padding:0 5px;color:#fff;margin-left:5px;cursor:pointer;position:relative;z-index:1}::ng-deep .multi-select-input-group .multiple-value app-popover .action-list ul.action-item li .chip-item span{color:#747576}::ng-deep .multi-select-input-group .custom-select-box{position:relative}::ng-deep .multi-select-input-group .custom-select-box input[type=text],::ng-deep .multi-select-input-group .custom-select-box .input{cursor:pointer;padding-right:30px}::ng-deep .multi-select-input-group .custom-select-box input[type=text].line,::ng-deep .multi-select-input-group .custom-select-box .input.line{padding-right:20px}::ng-deep .multi-select-input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}ul.list-of-option{position:fixed;overflow:hidden;overflow-y:auto;max-height:260px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:9;background:#fff;border-radius:2px;opacity:0;width:230px;max-width:230px!important}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option app-cs-multi-select-option{display:block;width:100%}ul.list-of-option .input-group{padding:4px 10px;position:sticky;top:0;background:#fff;box-shadow:0 0 3px #1e5dd240;z-index:1;margin-bottom:4px}ul.list-of-option .input-group input{border:1px solid transparent;border-bottom-color:transparent;color:#747576;outline:none;width:100%;padding:0}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multi-select{padding:0 15px}ul.list-of-option li label.multi-select span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option .button-block{width:100%;display:flex;justify-content:flex-end;position:sticky;bottom:0;padding:4px 8px;background:#fff;box-shadow:0 0 3px #1e5dd240;z-index:1}ul.list-of-option .button-block button{display:flex;padding:0 12px;font-size:11px;text-transform:uppercase;font-weight:500;cursor:pointer;background:#1e5dd3;color:#fff;border:none;outline:none;border-radius:2px}.overlay{position:fixed;inset:0;z-index:2}.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}.template-filter-list{width:220px}.template-filter-list ul{padding:0;margin:0;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}.template-filter-list ul.action-item{display:block}.template-filter-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}.template-filter-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}.template-filter-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.template-filter-list ul.action-item li button:hover{background:#f3f3f3}.template-filter-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.template-filter-list ul.action-item li .avatar-card.within-con{display:block}.template-filter-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.template-filter-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%}.template-filter-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.template-filter-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.template-filter-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.template-filter-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.template-filter-list ul.action-item li .avatar-card.no-image{display:block}.template-filter-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.template-filter-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.template-filter-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.template-filter-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}.template-filter-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.template-filter-list ul.action-item li .chip-item span.id{font-size:9px}.template-filter-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.template-filter-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}.template-filter-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}.template-filter-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
35133
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsMultiselectComponent, selector: "cs-multi-select", inputs: { isRequired: "isRequired", dropdownLabel: "dropdownLabel", dropdownSubLabel: "dropdownSubLabel", disabled: "disabled", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", value: "value", selectedItem: "selectedItem" }, outputs: { valueChange: "valueChange", applyFilter: "applyFilter", searchText: "searchText", resetSelectedData: "resetSelectedData", restoreSelectedData: "restoreSelectedData" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["optionList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"multi-select-input-group\" (clickOutside)=\"dropdownOption = false\">\n <label *ngIf=\"dropdownLabel\">\n {{ dropdownLabel }}\n <span class=\"sub-label\" *ngIf=\"dropdownSubLabel\">{{\n dropdownSubLabel\n }}</span>\n <span class=\"required\" *ngIf=\"isRequired\">*</span></label\n >\n <div class=\"custom-select-box\" [class.disabled]=\"disabled\">\n <div class=\"multiple-value vx-d-flex vx-align-center vx-justify-between\">\n <div\n class=\"multiple-value-inner vx-d-flex vx-align-center vx-justify-end vx-pr-2\"\n (click)=\"openDropdown($event)\"\n ></div>\n <span class=\"placeholder\" *ngIf=\"!value || value?.length === 0\">{{\n placeholder\n }}</span>\n <!-- <i class=\"icons arrow-down vx-fs-9\">&#xe9e8;</i> -->\n <div class=\"vx-d-flex vx-align-center\" *ngIf=\"value && value?.length > 0\">\n <div\n class=\"chip\"\n *ngFor=\"let data of items | slice : 0 : 1; let i = index\"\n >\n <span class=\"close\" (click)=\"removeValue(i)\">&times;</span\n ><span class=\"value\">{{ data }}</span>\n </div>\n <span\n class=\"counter\"\n *ngIf=\"items.length > 1\"\n appPopover\n (click)=\"actionButton.popover()\"\n placement=\"right\"\n >+{{ items.length - 1 }}</span\n >\n <app-popover #actionButton>\n <div class=\"template-filter-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of items.slice(1); let j = index\">\n <div class=\"chip-item\">\n <i class=\"icons\" (click)=\"removeValue(j + 1)\">&#xe90d;</i>\n <span>{{ data }}</span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n <div\n class=\"overlay active\"\n *ngIf=\"dropdownOption === true\"\n (click)=\"closeDropdown(false)\"\n ></div>\n <ul\n class=\"list-of-option\"\n *ngIf=\"dropdownOption === true\"\n #optionList\n (keyup.Escape)=\"closeDropdown(false)\"\n [style.top.px]=\"getTop\"\n [style.left.px]=\"getLeft\"\n [style.min-width.px]=\"getWidth\"\n [style.max-width.px]=\"maxWidth\"\n [class.active]=\"activeDropdown\"\n >\n <div class=\"input-group\">\n <input\n type=\"text\"\n [placeholder]=\"searchPlaceholder\"\n [ngModel]=\"searchKey\"\n (ngModelChange)=\"search($event)\"\n />\n </div>\n <ng-content></ng-content>\n <div class=\"button-block\">\n <button\n type=\"button\"\n [class.disabled]=\"checkChanges()\"\n (click)=\"closeDropdown(true)\"\n >\n Apply\n </button>\n </div>\n </ul>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .multi-select-input-group{position:relative;margin-bottom:0}::ng-deep .multi-select-input-group label{font-size:11px;color:#161b2f;font-weight:500;line-height:16px;margin-bottom:5px;text-transform:uppercase;display:block}::ng-deep .multi-select-input-group label span.required{color:#eb2424;font-size:14px}::ng-deep .multi-select-input-group label span.sub-label{color:#747576;font-size:11px;font-weight:400;margin-left:4px}::ng-deep .multi-select-input-group .multiple-value{height:36px;line-height:16px;font-size:13px;color:#747576;font-weight:400;background:#fff;border:1px solid #cdced6;border-radius:4px;width:100%;display:flex;padding:6px 25px 6px 6px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;position:relative}::ng-deep .multi-select-input-group .multiple-value-inner{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .multi-select-input-group .multiple-value-inner:after{border-left-color:#707070;border-bottom:1px solid #707070;border-right:1px solid #707070;border-top-color:#707070;content:\"\";display:inline-block;right:8px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .multi-select-input-group .multiple-value .placeholder{color:#565a6f;font-size:11px;line-height:16px;pointer-events:none}::ng-deep .multi-select-input-group .multiple-value .arrow-down{position:relative;right:-16px;z-index:1}::ng-deep .multi-select-input-group .multiple-value.line{border:none;border-bottom:1px solid #dbdbdb;border-radius:0;padding-left:0}::ng-deep .multi-select-input-group .multiple-value .chip{display:inline-flex;border-radius:2px;background:#f8f8f8;border:1px solid #f8f8f8;height:22px;padding:0 5px;pointer-events:none;max-width:100%;position:relative;z-index:1;box-shadow:0 1px 4px #1e5dd340;max-width:150px}::ng-deep .multi-select-input-group .multiple-value .chip span{display:inline-block}::ng-deep .multi-select-input-group .multiple-value .chip span.close{cursor:pointer;color:#1e5dd3;font-size:16px;line-height:20px;pointer-events:auto}::ng-deep .multi-select-input-group .multiple-value .chip span.value{color:#747576;margin-left:5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .multi-select-input-group .multiple-value .chip+.chip{margin-left:4px}::ng-deep .multi-select-input-group .multiple-value .counter{display:inline-flex;border-radius:2px;background:#34aa44;border:1px solid #34aa44;height:22px;padding:0 5px;color:#fff;margin-left:5px;cursor:pointer;position:relative;z-index:1}::ng-deep .multi-select-input-group .multiple-value app-popover .action-list ul.action-item li .chip-item span{color:#747576}::ng-deep .multi-select-input-group .custom-select-box{position:relative}::ng-deep .multi-select-input-group .custom-select-box input[type=text],::ng-deep .multi-select-input-group .custom-select-box .input{cursor:pointer;padding-right:30px}::ng-deep .multi-select-input-group .custom-select-box input[type=text].line,::ng-deep .multi-select-input-group .custom-select-box .input.line{padding-right:20px}::ng-deep .multi-select-input-group .custom-select-box.disabled{filter:grayscale(1);pointer-events:none}ul.list-of-option{position:fixed;overflow:hidden;overflow-y:auto;max-height:260px;padding:0;margin:0;display:block;border:1px solid #dbdbdb;box-shadow:0 3px 6px #1e5dd333;z-index:9;background:#fff;border-radius:2px;opacity:0;width:230px;max-width:230px!important}ul.list-of-option.reset{top:inherit;bottom:100%;box-shadow:0 -3px 6px #1e5dd333}ul.list-of-option.active{opacity:1}ul.list-of-option app-cs-multi-select-option{display:block;width:100%}ul.list-of-option .input-group{padding:4px 10px;position:sticky;top:0;background:#fff;box-shadow:0 0 3px #1e5dd240;z-index:1;margin-bottom:4px}ul.list-of-option .input-group input{border:1px solid transparent;border-bottom-color:transparent;color:#747576;outline:none;width:100%;padding:0}ul.list-of-option li{width:100%;display:block;margin-bottom:0;padding:0;height:auto}ul.list-of-option li label{line-height:23px;font-size:13px;font-weight:400;border-radius:4px;display:flex;position:relative;margin:0;align-items:center}ul.list-of-option li label input[type=radio]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=radio]:checked+span,ul.list-of-option li label input[type=radio]:hover+span{background:#dcdcdc}ul.list-of-option li label span.value{color:#747576;font-size:14px;line-height:21px;font-weight:400;max-width:100%;white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis;padding:5px 15px;width:100%;text-transform:none;cursor:pointer;text-align:left}ul.list-of-option li label.multi-select{padding:0 15px}ul.list-of-option li label.multi-select span.checkbox{display:inline-block;border:1px solid #dbdbdb;border-radius:2px;height:16px;width:16px;position:relative;padding:2px}ul.list-of-option li label input[type=checkbox]{position:absolute;margin:0;height:100%;width:100%;opacity:0;cursor:pointer}ul.list-of-option li label input[type=checkbox]:checked+span{background:#dcdcdc}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox{border-color:#34aa44;background:#34aa44}ul.list-of-option li label input[type=checkbox]:checked+span.checkbox:after{width:8px;height:3px;border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;transform:rotate(-45deg);content:\"\";position:absolute;top:3px;left:2px}ul.list-of-option .button-block{width:100%;display:flex;justify-content:flex-end;position:sticky;bottom:0;padding:4px 8px;background:#fff;box-shadow:0 0 3px #1e5dd240;z-index:1}ul.list-of-option .button-block button{display:flex;padding:0 12px;font-size:11px;text-transform:uppercase;font-weight:500;cursor:pointer;background:#1e5dd3;color:#fff;border:none;outline:none;border-radius:2px}.overlay{position:fixed;inset:0;z-index:2}.disabled{pointer-events:none;filter:grayscale(1);opacity:.3}.template-filter-list{width:220px}.template-filter-list ul{padding:0;margin:0;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}.template-filter-list ul.action-item{display:block}.template-filter-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}.template-filter-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}.template-filter-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.template-filter-list ul.action-item li button:hover{background:#f3f3f3}.template-filter-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.template-filter-list ul.action-item li .avatar-card.within-con{display:block}.template-filter-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.template-filter-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%}.template-filter-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.template-filter-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.template-filter-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.template-filter-list ul.action-item li .avatar-card span.value i.cross-icon{color:#747576}.template-filter-list ul.action-item li .avatar-card.no-image{display:block}.template-filter-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.template-filter-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.template-filter-list ul.action-item li .chip-item i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}.template-filter-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}.template-filter-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.template-filter-list ul.action-item li .chip-item span.id{font-size:9px}.template-filter-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.template-filter-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}.template-filter-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}.template-filter-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.template-filter-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] }); }
35126
35134
  }
35127
35135
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsMultiselectComponent, decorators: [{
35128
35136
  type: Component,
@@ -35151,6 +35159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
35151
35159
  type: Output
35152
35160
  }], resetSelectedData: [{
35153
35161
  type: Output
35162
+ }], restoreSelectedData: [{
35163
+ type: Output
35154
35164
  }], content: [{
35155
35165
  type: ViewChild,
35156
35166
  args: ['optionList']
@@ -35369,8 +35379,10 @@ class SelectTemplateListComponent {
35369
35379
  });
35370
35380
  }
35371
35381
  this.templateList = [...new Set(this.customTemplates ?? [])];
35372
- const categoryIds = this.selectedCategoryId.map((category) => category.item_id);
35373
- this.userCreatedCategoryList = this.userCreatedCategoryList.filter((category) => categoryIds?.includes(category.item_id));
35382
+ if (this.selectedCategoryId?.length) {
35383
+ const categoryIds = this.selectedCategoryId.map((category) => category.item_id);
35384
+ this.userCreatedCategoryList = this.userCreatedCategoryList.filter((category) => categoryIds?.includes(category.item_id));
35385
+ }
35374
35386
  this.loader = false;
35375
35387
  this.categoryList = this.userCreatedCategoryList;
35376
35388
  });
@@ -35414,6 +35426,14 @@ class SelectTemplateListComponent {
35414
35426
  }
35415
35427
  this.selectedCategory = [...new Set(this.selectedCategory)];
35416
35428
  }
35429
+ onRestoreSelectedData(event) {
35430
+ if (event?.length === 0) {
35431
+ this.selectedCategory = [];
35432
+ }
35433
+ else {
35434
+ this.selectedCategory = [...new Set(event)];
35435
+ }
35436
+ }
35417
35437
  onApplyFilter(event) {
35418
35438
  if (!event) {
35419
35439
  this.selectedCategory = [];
@@ -35455,11 +35475,11 @@ class SelectTemplateListComponent {
35455
35475
  this.previewTemplate = null;
35456
35476
  }
35457
35477
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectTemplateListComponent, deps: [{ token: TemplateService }, { token: PolicyService }, { token: Configurations, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
35458
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectTemplateListComponent, selector: "app-select-template-list", inputs: { selectedCategoryId: "selectedCategoryId", feature: "feature" }, outputs: { onTemplateSelect: "onTemplateSelect" }, ngImport: i0, template: "<div\n class=\"select-template-list\"\n [class.animate]=\"animation\"\n [class.withPreview]=\"isPreview\"\n>\n <ng-container *ngIf=\"!isPreview\">\n <div\n class=\"select-template-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Template</div>\n </div>\n <div class=\"select-template-list-body\">\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <div class=\"select-template-list-tab vx-d-flex vx-align-center vx-mb-2\">\n <button\n (click)=\"switchTab('VCOMPLY')\"\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'VCOMPLY'\"\n >\n VCOMPLY TEMPLATES\n </button>\n <button\n (click)=\"switchTab('USER_CREATED')\"\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'USER_CREATED'\"\n >\n USER-CREATED TEMPLATES\n </button>\n </div>\n <div class=\"search-block vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" [(ngModel)]=\"searchTemplate\" placeholder=\"Search\" />\n </div>\n <div class=\"body-top vx-d-flex vx-align-center vx-justify-end vx-mb-2\">\n <cs-multi-select\n (searchText)=\"searchCategory = $event\"\n [placeholder]=\"'Select Category'\"\n [value]=\"selectedCategory\"\n (applyFilter)=\"onApplyFilter($event)\"\n >\n <ng-container\n *ngFor=\"\n let eachCategory of categoryList\n | SearchByKeys : ['name'] : searchCategory\n \"\n >\n <cs-multi-select-option\n [appTooltip]=\"eachCategory?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n [value]=\"eachCategory?.item_id\"\n (change)=\"onSelectCategory(eachCategory, $event)\"\n [tooltipMandatory]=\"true\"\n >\n {{ eachCategory?.name }}\n </cs-multi-select-option>\n </ng-container>\n </cs-multi-select>\n </div>\n <div class=\"body-inner vx-mb-1\">\n <ng-container *ngIf=\"!loader\">\n <ng-container\n *ngIf=\"\n templateList\n | SearchByKeys\n : ['name', 'categoryDetails']\n : searchTemplate as allTemplate\n \"\n >\n <app-template-list-table\n *ngIf=\"allTemplate.length\"\n [templateList]=\"allTemplate\"\n [loader]=\"loader\"\n [categoryList]=\"categoryList\"\n [selectedTemplate]=\"selectedTemplate[0]\"\n [feature]=\"feature\"\n (onSort)=\"sortBy($event)\"\n (onSelectTemplate)=\"onSelectTemplate($event)\"\n (onPreview)=\"onPreview($event)\"\n ></app-template-list-table>\n <app-no-data\n *ngIf=\"!allTemplate?.length\"\n [noDataImage]=\"NO_DATA_FOUND_IMAGE\"\n [noDataText]=\"NO_DATA_FOUND_MESSAGE\"\n ></app-no-data>\n </ng-container>\n </ng-container>\n </div>\n\n <app-floating-bar\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n [isDisabled]=\"selectedTemplate?.length === 0\"\n [selectedData]=\"selectedTemplate\"\n [displayElementKey]=\"'name'\"\n [singularText]=\"'Template Selected'\"\n (deleteEvent)=\"deleteEvent()\"\n >\n </app-floating-bar>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isPreview\">\n <div\n class=\"select-template-list-head vx-d-flex vx-align-center vx-pl-4 vx-pr-4\"\n >\n <button\n (click)=\"onClosePreview()\"\n class=\"previewBtn vx-fs-14 vx-fw-500 vx-label-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe91d;</i>Preview\n </button>\n <div\n class=\"template-name vx-fs-14 vx-ml-1\"\n [appTooltip]=\"previewTemplate?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ previewTemplate?.name }}\n </div>\n </div>\n <div class=\"preview-template-body vx-d-flex vx-justify-center\">\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <div *ngIf=\"!loader\" class=\"preview-template-body-inner\">\n <ngx-doc-viewer\n [url]=\"fileUrl\"\n viewer=\"office\"\n style=\"width: 100%; height: 100%; margin: 0\"\n disableContent=\"popout-hide\"\n >\n </ngx-doc-viewer>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .select-template-list{background:#fff;position:fixed;inset:0 500px 0 0;z-index:10}::ng-deep .select-template-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .select-template-list:after{background:#f1f1f1;content:\"\";position:absolute;top:3px;right:0;width:1px;height:calc(100% - 3px)}::ng-deep .select-template-list.withPreview{background:#f2f2f5}::ng-deep .select-template-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .select-template-list-head button.previewBtn{background:transparent;border-radius:0;border:none}::ng-deep .select-template-list-head .template-name{color:#787a8c;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .select-template-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .select-template-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;color:#565a6f;height:23px;margin-right:1.75rem!important}::ng-deep .select-template-list-tab button.active{pointer-events:none}::ng-deep .select-template-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .select-template-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .select-template-list-body .search-block{position:relative}::ng-deep .select-template-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .select-template-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .select-template-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .select-template-list-body .body-top cs-multi-select{display:block;width:320px}::ng-deep .select-template-list-body .body-inner{height:calc(100% - 180px);width:calc(100% + 2rem);padding-right:2rem;overflow:hidden;overflow-y:auto;scrollbar-width:thin}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-track{background-color:#f1f1f1}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .select-template-list .preview-template-body{margin-top:3rem;height:calc(100% - 6rem)}::ng-deep .select-template-list .preview-template-body-inner{background:#fff;border-radius:8px 8px 0 0;border:1px solid #dbdbdb;width:50rem}::ng-deep .select-template-list .preview-template-body-inner app-view-policy{display:block;height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn{height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane{height:calc(100% - 30px)}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor .e-documenteditor-optionspane{height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: CsMultiselectComponent, selector: "cs-multi-select", inputs: ["isRequired", "dropdownLabel", "dropdownSubLabel", "disabled", "placeholder", "searchPlaceholder", "value", "selectedItem"], outputs: ["valueChange", "applyFilter", "searchText", "resetSelectedData"] }, { kind: "component", type: CsMultiselectOptionComponent, selector: "cs-multi-select-option", inputs: ["value"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "component", type: TemplateListTableComponent, selector: "app-template-list-table", inputs: ["selectedTemplate", "templateList", "loader", "categoryList", "feature"], outputs: ["onSort", "onSelectTemplate", "onPreview"] }, { kind: "pipe", type: SearchByKeysPipe, name: "SearchByKeys" }] }); }
35478
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectTemplateListComponent, selector: "app-select-template-list", inputs: { selectedCategoryId: "selectedCategoryId", feature: "feature" }, outputs: { onTemplateSelect: "onTemplateSelect" }, ngImport: i0, template: "<div\n class=\"select-template-list\"\n [class.animate]=\"animation\"\n [class.withPreview]=\"isPreview\"\n>\n <ng-container *ngIf=\"!isPreview\">\n <div\n class=\"select-template-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Template</div>\n </div>\n <div class=\"select-template-list-body\">\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <div class=\"select-template-list-tab vx-d-flex vx-align-center vx-mb-2\">\n <button\n (click)=\"switchTab('VCOMPLY')\"\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'VCOMPLY'\"\n >\n VCOMPLY TEMPLATES\n </button>\n <button\n (click)=\"switchTab('USER_CREATED')\"\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'USER_CREATED'\"\n >\n USER-CREATED TEMPLATES\n </button>\n </div>\n <div class=\"search-block vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" [(ngModel)]=\"searchTemplate\" placeholder=\"Search\" />\n </div>\n <div *ngIf=\"categoryList?.length\" class=\"body-top vx-d-flex vx-align-center vx-justify-end vx-mb-2\">\n <cs-multi-select\n (searchText)=\"searchCategory = $event\"\n [placeholder]=\"'Select Category'\"\n [value]=\"selectedCategory\"\n (restoreSelectedData)=\"onRestoreSelectedData($event)\"\n (applyFilter)=\"onApplyFilter($event)\"\n >\n <ng-container\n *ngFor=\"\n let eachCategory of categoryList\n | SearchByKeys : ['name'] : searchCategory\n \"\n >\n <cs-multi-select-option\n [appTooltip]=\"eachCategory?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n [value]=\"eachCategory?.item_id\"\n (change)=\"onSelectCategory(eachCategory, $event)\"\n [tooltipMandatory]=\"true\"\n >\n {{ eachCategory?.name }}\n </cs-multi-select-option>\n </ng-container>\n </cs-multi-select>\n </div>\n <div class=\"body-inner vx-mb-1\">\n <ng-container *ngIf=\"!loader\">\n <ng-container\n *ngIf=\"\n templateList\n | SearchByKeys\n : ['name', 'categoryDetails']\n : searchTemplate as allTemplate\n \"\n >\n <app-template-list-table\n *ngIf=\"allTemplate.length\"\n [templateList]=\"allTemplate\"\n [loader]=\"loader\"\n [categoryList]=\"categoryList\"\n [selectedTemplate]=\"selectedTemplate[0]\"\n [feature]=\"feature\"\n (onSort)=\"sortBy($event)\"\n (onSelectTemplate)=\"onSelectTemplate($event)\"\n (onPreview)=\"onPreview($event)\"\n ></app-template-list-table>\n <app-no-data\n *ngIf=\"!allTemplate?.length\"\n [noDataImage]=\"NO_DATA_FOUND_IMAGE\"\n [noDataText]=\"NO_DATA_FOUND_MESSAGE\"\n ></app-no-data>\n </ng-container>\n </ng-container>\n </div>\n\n <app-floating-bar\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n [isDisabled]=\"selectedTemplate?.length === 0\"\n [selectedData]=\"selectedTemplate\"\n [displayElementKey]=\"'name'\"\n [singularText]=\"'Template Selected'\"\n (deleteEvent)=\"deleteEvent()\"\n >\n </app-floating-bar>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isPreview\">\n <div\n class=\"select-template-list-head vx-d-flex vx-align-center vx-pl-4 vx-pr-4\"\n >\n <button\n (click)=\"onClosePreview()\"\n class=\"previewBtn vx-fs-14 vx-fw-500 vx-label-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe91d;</i>Preview\n </button>\n <div\n class=\"template-name vx-fs-14 vx-ml-1\"\n [appTooltip]=\"previewTemplate?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ previewTemplate?.name }}\n </div>\n </div>\n <div class=\"preview-template-body vx-d-flex vx-justify-center\">\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <div *ngIf=\"!loader\" class=\"preview-template-body-inner\">\n <ngx-doc-viewer\n [url]=\"fileUrl\"\n viewer=\"office\"\n style=\"width: 100%; height: 100%; margin: 0\"\n disableContent=\"popout-hide\"\n >\n </ngx-doc-viewer>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .select-template-list{background:#fff;position:fixed;inset:0 500px 0 0;z-index:10}::ng-deep .select-template-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .select-template-list:after{background:#f1f1f1;content:\"\";position:absolute;top:3px;right:0;width:1px;height:calc(100% - 3px)}::ng-deep .select-template-list.withPreview{background:#f2f2f5}::ng-deep .select-template-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .select-template-list-head button.previewBtn{background:transparent;border-radius:0;border:none}::ng-deep .select-template-list-head .template-name{color:#787a8c;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .select-template-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .select-template-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;color:#565a6f;height:23px;margin-right:1.75rem!important}::ng-deep .select-template-list-tab button.active{pointer-events:none}::ng-deep .select-template-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .select-template-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .select-template-list-body .search-block{position:relative}::ng-deep .select-template-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .select-template-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .select-template-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .select-template-list-body .body-top cs-multi-select{display:block;width:320px}::ng-deep .select-template-list-body .body-inner{height:calc(100% - 180px);width:calc(100% + 2rem);padding-right:2rem;overflow:hidden;overflow-y:auto;scrollbar-width:thin}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-track{background-color:#f1f1f1}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .select-template-list .preview-template-body{margin-top:3rem;height:calc(100% - 6rem)}::ng-deep .select-template-list .preview-template-body-inner{background:#fff;border-radius:8px 8px 0 0;border:1px solid #dbdbdb;width:50rem}::ng-deep .select-template-list .preview-template-body-inner app-view-policy{display:block;height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn{height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane{height:calc(100% - 30px)}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor .e-documenteditor-optionspane{height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: NoDataComponent, selector: "app-no-data", inputs: ["action", "noDataImage", "noDataText", "noDataButton", "noDataSecButton", "altText", "smallButton", "button"], outputs: ["buttonAction"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: CsMultiselectComponent, selector: "cs-multi-select", inputs: ["isRequired", "dropdownLabel", "dropdownSubLabel", "disabled", "placeholder", "searchPlaceholder", "value", "selectedItem"], outputs: ["valueChange", "applyFilter", "searchText", "resetSelectedData", "restoreSelectedData"] }, { kind: "component", type: CsMultiselectOptionComponent, selector: "cs-multi-select-option", inputs: ["value"] }, { kind: "component", type: FloatingBarComponent, selector: "app-floating-bar", inputs: ["selectedData", "selectedGroups", "displayElementKey", "elementId", "singularText", "pluralText", "showNextButton", "showFrequencyText", "showWorkflow", "workflowText", "currentFrequency", "isDisabled", "workflowList", "selectedWorkflow", "workflowPlaceHolder", "mode", "defaultSelected", "groupsEnabled", "nonRemovableUsersList", "removePosition"], outputs: ["closeEvent", "deleteEvent", "closeList", "deleteGroupEvent", "workflowTypeChanged"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i12.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "component", type: TemplateListTableComponent, selector: "app-template-list-table", inputs: ["selectedTemplate", "templateList", "loader", "categoryList", "feature"], outputs: ["onSort", "onSelectTemplate", "onPreview"] }, { kind: "pipe", type: SearchByKeysPipe, name: "SearchByKeys" }] }); }
35459
35479
  }
35460
35480
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectTemplateListComponent, decorators: [{
35461
35481
  type: Component,
35462
- args: [{ selector: 'app-select-template-list', template: "<div\n class=\"select-template-list\"\n [class.animate]=\"animation\"\n [class.withPreview]=\"isPreview\"\n>\n <ng-container *ngIf=\"!isPreview\">\n <div\n class=\"select-template-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Template</div>\n </div>\n <div class=\"select-template-list-body\">\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <div class=\"select-template-list-tab vx-d-flex vx-align-center vx-mb-2\">\n <button\n (click)=\"switchTab('VCOMPLY')\"\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'VCOMPLY'\"\n >\n VCOMPLY TEMPLATES\n </button>\n <button\n (click)=\"switchTab('USER_CREATED')\"\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'USER_CREATED'\"\n >\n USER-CREATED TEMPLATES\n </button>\n </div>\n <div class=\"search-block vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" [(ngModel)]=\"searchTemplate\" placeholder=\"Search\" />\n </div>\n <div class=\"body-top vx-d-flex vx-align-center vx-justify-end vx-mb-2\">\n <cs-multi-select\n (searchText)=\"searchCategory = $event\"\n [placeholder]=\"'Select Category'\"\n [value]=\"selectedCategory\"\n (applyFilter)=\"onApplyFilter($event)\"\n >\n <ng-container\n *ngFor=\"\n let eachCategory of categoryList\n | SearchByKeys : ['name'] : searchCategory\n \"\n >\n <cs-multi-select-option\n [appTooltip]=\"eachCategory?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n [value]=\"eachCategory?.item_id\"\n (change)=\"onSelectCategory(eachCategory, $event)\"\n [tooltipMandatory]=\"true\"\n >\n {{ eachCategory?.name }}\n </cs-multi-select-option>\n </ng-container>\n </cs-multi-select>\n </div>\n <div class=\"body-inner vx-mb-1\">\n <ng-container *ngIf=\"!loader\">\n <ng-container\n *ngIf=\"\n templateList\n | SearchByKeys\n : ['name', 'categoryDetails']\n : searchTemplate as allTemplate\n \"\n >\n <app-template-list-table\n *ngIf=\"allTemplate.length\"\n [templateList]=\"allTemplate\"\n [loader]=\"loader\"\n [categoryList]=\"categoryList\"\n [selectedTemplate]=\"selectedTemplate[0]\"\n [feature]=\"feature\"\n (onSort)=\"sortBy($event)\"\n (onSelectTemplate)=\"onSelectTemplate($event)\"\n (onPreview)=\"onPreview($event)\"\n ></app-template-list-table>\n <app-no-data\n *ngIf=\"!allTemplate?.length\"\n [noDataImage]=\"NO_DATA_FOUND_IMAGE\"\n [noDataText]=\"NO_DATA_FOUND_MESSAGE\"\n ></app-no-data>\n </ng-container>\n </ng-container>\n </div>\n\n <app-floating-bar\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n [isDisabled]=\"selectedTemplate?.length === 0\"\n [selectedData]=\"selectedTemplate\"\n [displayElementKey]=\"'name'\"\n [singularText]=\"'Template Selected'\"\n (deleteEvent)=\"deleteEvent()\"\n >\n </app-floating-bar>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isPreview\">\n <div\n class=\"select-template-list-head vx-d-flex vx-align-center vx-pl-4 vx-pr-4\"\n >\n <button\n (click)=\"onClosePreview()\"\n class=\"previewBtn vx-fs-14 vx-fw-500 vx-label-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe91d;</i>Preview\n </button>\n <div\n class=\"template-name vx-fs-14 vx-ml-1\"\n [appTooltip]=\"previewTemplate?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ previewTemplate?.name }}\n </div>\n </div>\n <div class=\"preview-template-body vx-d-flex vx-justify-center\">\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <div *ngIf=\"!loader\" class=\"preview-template-body-inner\">\n <ngx-doc-viewer\n [url]=\"fileUrl\"\n viewer=\"office\"\n style=\"width: 100%; height: 100%; margin: 0\"\n disableContent=\"popout-hide\"\n >\n </ngx-doc-viewer>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .select-template-list{background:#fff;position:fixed;inset:0 500px 0 0;z-index:10}::ng-deep .select-template-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .select-template-list:after{background:#f1f1f1;content:\"\";position:absolute;top:3px;right:0;width:1px;height:calc(100% - 3px)}::ng-deep .select-template-list.withPreview{background:#f2f2f5}::ng-deep .select-template-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .select-template-list-head button.previewBtn{background:transparent;border-radius:0;border:none}::ng-deep .select-template-list-head .template-name{color:#787a8c;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .select-template-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .select-template-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;color:#565a6f;height:23px;margin-right:1.75rem!important}::ng-deep .select-template-list-tab button.active{pointer-events:none}::ng-deep .select-template-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .select-template-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .select-template-list-body .search-block{position:relative}::ng-deep .select-template-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .select-template-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .select-template-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .select-template-list-body .body-top cs-multi-select{display:block;width:320px}::ng-deep .select-template-list-body .body-inner{height:calc(100% - 180px);width:calc(100% + 2rem);padding-right:2rem;overflow:hidden;overflow-y:auto;scrollbar-width:thin}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-track{background-color:#f1f1f1}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .select-template-list .preview-template-body{margin-top:3rem;height:calc(100% - 6rem)}::ng-deep .select-template-list .preview-template-body-inner{background:#fff;border-radius:8px 8px 0 0;border:1px solid #dbdbdb;width:50rem}::ng-deep .select-template-list .preview-template-body-inner app-view-policy{display:block;height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn{height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane{height:calc(100% - 30px)}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor .e-documenteditor-optionspane{height:100%}\n"] }]
35482
+ args: [{ selector: 'app-select-template-list', template: "<div\n class=\"select-template-list\"\n [class.animate]=\"animation\"\n [class.withPreview]=\"isPreview\"\n>\n <ng-container *ngIf=\"!isPreview\">\n <div\n class=\"select-template-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4\"\n >\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Template</div>\n </div>\n <div class=\"select-template-list-body\">\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <div class=\"select-template-list-tab vx-d-flex vx-align-center vx-mb-2\">\n <button\n (click)=\"switchTab('VCOMPLY')\"\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'VCOMPLY'\"\n >\n VCOMPLY TEMPLATES\n </button>\n <button\n (click)=\"switchTab('USER_CREATED')\"\n class=\"tab-btn vx-fs-11 vx-fw-500 vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4\"\n [class.active]=\"currentTab === 'USER_CREATED'\"\n >\n USER-CREATED TEMPLATES\n </button>\n </div>\n <div class=\"search-block vx-mb-2\">\n <i class=\"icons\">&#xe90b;</i>\n <input type=\"text\" [(ngModel)]=\"searchTemplate\" placeholder=\"Search\" />\n </div>\n <div *ngIf=\"categoryList?.length\" class=\"body-top vx-d-flex vx-align-center vx-justify-end vx-mb-2\">\n <cs-multi-select\n (searchText)=\"searchCategory = $event\"\n [placeholder]=\"'Select Category'\"\n [value]=\"selectedCategory\"\n (restoreSelectedData)=\"onRestoreSelectedData($event)\"\n (applyFilter)=\"onApplyFilter($event)\"\n >\n <ng-container\n *ngFor=\"\n let eachCategory of categoryList\n | SearchByKeys : ['name'] : searchCategory\n \"\n >\n <cs-multi-select-option\n [appTooltip]=\"eachCategory?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n [value]=\"eachCategory?.item_id\"\n (change)=\"onSelectCategory(eachCategory, $event)\"\n [tooltipMandatory]=\"true\"\n >\n {{ eachCategory?.name }}\n </cs-multi-select-option>\n </ng-container>\n </cs-multi-select>\n </div>\n <div class=\"body-inner vx-mb-1\">\n <ng-container *ngIf=\"!loader\">\n <ng-container\n *ngIf=\"\n templateList\n | SearchByKeys\n : ['name', 'categoryDetails']\n : searchTemplate as allTemplate\n \"\n >\n <app-template-list-table\n *ngIf=\"allTemplate.length\"\n [templateList]=\"allTemplate\"\n [loader]=\"loader\"\n [categoryList]=\"categoryList\"\n [selectedTemplate]=\"selectedTemplate[0]\"\n [feature]=\"feature\"\n (onSort)=\"sortBy($event)\"\n (onSelectTemplate)=\"onSelectTemplate($event)\"\n (onPreview)=\"onPreview($event)\"\n ></app-template-list-table>\n <app-no-data\n *ngIf=\"!allTemplate?.length\"\n [noDataImage]=\"NO_DATA_FOUND_IMAGE\"\n [noDataText]=\"NO_DATA_FOUND_MESSAGE\"\n ></app-no-data>\n </ng-container>\n </ng-container>\n </div>\n\n <app-floating-bar\n (closeEvent)=\"save()\"\n (closeList)=\"close()\"\n [isDisabled]=\"selectedTemplate?.length === 0\"\n [selectedData]=\"selectedTemplate\"\n [displayElementKey]=\"'name'\"\n [singularText]=\"'Template Selected'\"\n (deleteEvent)=\"deleteEvent()\"\n >\n </app-floating-bar>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isPreview\">\n <div\n class=\"select-template-list-head vx-d-flex vx-align-center vx-pl-4 vx-pr-4\"\n >\n <button\n (click)=\"onClosePreview()\"\n class=\"previewBtn vx-fs-14 vx-fw-500 vx-label-txt vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe91d;</i>Preview\n </button>\n <div\n class=\"template-name vx-fs-14 vx-ml-1\"\n [appTooltip]=\"previewTemplate?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ previewTemplate?.name }}\n </div>\n </div>\n <div class=\"preview-template-body vx-d-flex vx-justify-center\">\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <div *ngIf=\"!loader\" class=\"preview-template-body-inner\">\n <ngx-doc-viewer\n [url]=\"fileUrl\"\n viewer=\"office\"\n style=\"width: 100%; height: 100%; margin: 0\"\n disableContent=\"popout-hide\"\n >\n </ngx-doc-viewer>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .select-template-list{background:#fff;position:fixed;inset:0 500px 0 0;z-index:10}::ng-deep .select-template-list:before{background:#1e5dd3;content:\"\";position:absolute;top:0;left:0;right:0;width:100%;height:3px}::ng-deep .select-template-list:after{background:#f1f1f1;content:\"\";position:absolute;top:3px;right:0;width:1px;height:calc(100% - 3px)}::ng-deep .select-template-list.withPreview{background:#f2f2f5}::ng-deep .select-template-list-head{background:#fbfbfb;height:2.75rem;border-bottom:1px solid #f1f1f1}::ng-deep .select-template-list-head button.previewBtn{background:transparent;border-radius:0;border:none}::ng-deep .select-template-list-head .template-name{color:#787a8c;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 5rem)}::ng-deep .select-template-list-tab{border-bottom:1px solid #dbdbdb}::ng-deep .select-template-list-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.1875rem solid transparent;color:#565a6f;height:23px;margin-right:1.75rem!important}::ng-deep .select-template-list-tab button.active{pointer-events:none}::ng-deep .select-template-list-tab button.active.tab-btn{border-color:#1e5dd3;color:#1e5dd3}::ng-deep .select-template-list-body{background:#fff;height:calc(100vh - 2.75rem);padding:2rem}::ng-deep .select-template-list-body .search-block{position:relative}::ng-deep .select-template-list-body .search-block input{height:2.75rem;line-height:1.5rem;padding:.5rem 1rem .5rem 2.5rem;outline:none;border:1px solid #7475763f;border-radius:.25rem;width:100%;font-size:14px;color:#747576}::ng-deep .select-template-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .select-template-list-body .search-block i{position:absolute;left:1rem;top:1rem;pointer-events:none;color:#f1f1f1;font-size:12px}::ng-deep .select-template-list-body .body-top cs-multi-select{display:block;width:320px}::ng-deep .select-template-list-body .body-inner{height:calc(100% - 180px);width:calc(100% + 2rem);padding-right:2rem;overflow:hidden;overflow-y:auto;scrollbar-width:thin}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-track{background-color:#f1f1f1}::ng-deep .select-template-list-body .body-inner::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}::ng-deep .select-template-list .preview-template-body{margin-top:3rem;height:calc(100% - 6rem)}::ng-deep .select-template-list .preview-template-body-inner{background:#fff;border-radius:8px 8px 0 0;border:1px solid #dbdbdb;width:50rem}::ng-deep .select-template-list .preview-template-body-inner app-view-policy{display:block;height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn{height:100%}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane{height:calc(100% - 30px)}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor{height:100%!important;min-height:unset!important}::ng-deep .select-template-list .preview-template-body-inner app-view-policy ejs-documenteditorcontainer .e-de-ctn .e-de-ctnr-properties-pane .e-control.e-documenteditor .e-documenteditor-optionspane{height:100%}\n"] }]
35463
35483
  }], ctorParameters: function () { return [{ type: TemplateService }, { type: PolicyService }, { type: Configurations, decorators: [{
35464
35484
  type: Optional
35465
35485
  }] }]; }, propDecorators: { selectedCategoryId: [{
@@ -35729,7 +35749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
35729
35749
  }] } });
35730
35750
 
35731
35751
  const WORD_CONSTANTS = {
35732
- MS_WORD_OPTION: 'Create a Policy using MS Word',
35752
+ MS_WORD_OPTION: 'Create a Policy Using MS Word',
35733
35753
  createWordPolicy_snackbar_message: "Oops! Something went wrong and we were unable to complete this action. Let's give it another try, shall we?",
35734
35754
  };
35735
35755
  const WORD_PAYLOAD = {
@@ -35803,7 +35823,6 @@ class DocumentSectionComponent {
35803
35823
  this.policyName = '';
35804
35824
  this.organization_id = '';
35805
35825
  this.templateUrl = '';
35806
- this.isTemplateOpened = false;
35807
35826
  this.disconnectRefresh = new EventEmitter();
35808
35827
  this.editPolicy = new EventEmitter();
35809
35828
  this.openTemplate = new EventEmitter();
@@ -35819,13 +35838,9 @@ class DocumentSectionComponent {
35819
35838
  this.baseURL = 'https://dev.v-comply.com';
35820
35839
  }
35821
35840
  }
35822
- ngOnChanges(changes) {
35823
- if (changes?.templateView?.currentValue === false) {
35824
- this.selectedDocumentType = '';
35825
- }
35826
- }
35827
35841
  ngOnInit() {
35828
35842
  this.initialiseFeatureFlags();
35843
+ this.checkTemplateView();
35829
35844
  const data = JSON.parse(localStorage.getItem('lastFileNameAndType') ?? '"{}"');
35830
35845
  if (data.name !== null &&
35831
35846
  data.name !== undefined &&
@@ -35837,6 +35852,18 @@ class DocumentSectionComponent {
35837
35852
  localStorage.removeItem('lastFileNameAndType');
35838
35853
  }
35839
35854
  }
35855
+ checkTemplateView() {
35856
+ this.templateViewSubscription = this.policyService.templateView.subscribe((res) => {
35857
+ if (!res) {
35858
+ this.selectedDocumentType = '';
35859
+ }
35860
+ });
35861
+ }
35862
+ ngOnDestroy() {
35863
+ if (this.templateViewSubscription) {
35864
+ this.templateViewSubscription.unsubscribe();
35865
+ }
35866
+ }
35840
35867
  initialiseFeatureFlags() {
35841
35868
  this.ff_policy_ms_word_integration = this.feature.isFeatureEnabled('ff_policy_ms_word_integration');
35842
35869
  }
@@ -35892,8 +35919,9 @@ class DocumentSectionComponent {
35892
35919
  this.isUploading = false;
35893
35920
  }
35894
35921
  }, (err) => {
35895
- this.isUploading = false;
35896
35922
  this.snackBar.show("Oops! Something went wrong and we were unable to complete this action. Let's give it another try, shall we?", 'alert');
35923
+ this.isUploading = false;
35924
+ this.selectedDocumentType = '';
35897
35925
  });
35898
35926
  }
35899
35927
  }
@@ -35930,10 +35958,21 @@ class DocumentSectionComponent {
35930
35958
  }
35931
35959
  }
35932
35960
  }, (err) => {
35933
- this.isUploading = false;
35934
35961
  this.snackBar.show("Oops! Something went wrong and we were unable to complete this action. Let's give it another try, shall we?", 'alert');
35962
+ this.isUploading = false;
35963
+ this.selectedDocumentType = '';
35935
35964
  });
35936
35965
  }
35966
+ resetUploads() {
35967
+ this.selectedDocumentType = '';
35968
+ this.filename = '';
35969
+ this.fileType = '';
35970
+ this.pdf = false;
35971
+ this.doc = false;
35972
+ this.isUploading = false;
35973
+ this.isLoader = false;
35974
+ this.resetDocsError();
35975
+ }
35937
35976
  resetDocsError() {
35938
35977
  this.docxError = {
35939
35978
  visible: false,
@@ -35942,6 +35981,10 @@ class DocumentSectionComponent {
35942
35981
  }
35943
35982
  changeDocType(event) {
35944
35983
  this.resetDocsError();
35984
+ if (this.selectedDocumentType === event) {
35985
+ this.selectedDocumentType = '';
35986
+ return;
35987
+ }
35945
35988
  this.selectedDocumentType = event;
35946
35989
  if (event === 'template') {
35947
35990
  this.openTemplateList();
@@ -35999,11 +36042,11 @@ class DocumentSectionComponent {
35999
36042
  this.openTemplate.emit();
36000
36043
  }
36001
36044
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentSectionComponent, deps: [{ token: SnackBarService }, { token: PolicyService }, { token: PolicyAPIService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: i1$1.PlatformLocation }, { token: IframeService }], target: i0.ɵɵFactoryTarget.Component }); }
36002
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DocumentSectionComponent, selector: "lib-document-section", inputs: { selectedDocumentType: "selectedDocumentType", feature: "feature", templateView: "templateView", policyId: "policyId", policyName: "policyName", organization_id: "organization_id", member_obj_id: "member_obj_id", userInfo: "userInfo", templateUrl: "templateUrl", isTemplateOpened: "isTemplateOpened" }, outputs: { disconnectRefresh: "disconnectRefresh", editPolicy: "editPolicy", openTemplate: "openTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-section\" [class.grayscale]=\"isTemplateOpened\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 480.8 480.8\"\n style=\"enable-background: new 0 0 480.8 480.8\"\n xml:space=\"preserve\"\n >\n <path\n style=\"fill: #ffd517\"\n d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\n c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\"\n />\n <g>\n <path\n style=\"fill: #e5e5e5\"\n d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\"\n />\n <path\n style=\"fill: #e5e5e5\"\n d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\"\n />\n </g>\n <g>\n <path\n style=\"fill: #210b20\"\n d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\n c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\n s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\n c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\n c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\n c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\n c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\n c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\n C244.712,66.4,247.912,63.2,247.912,58.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\n c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\n c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\n l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\n l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\"\n />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either\n draft it from scratch using VComply's online editor or upload an\n existing DOCX or PDF file.\n </p>\n </div>\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'draft'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\"\n />\n <svg id=\"Draft\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20402\" data-name=\"Path 20402\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#565a6f\"/>\n <path id=\"Path_20403\" data-name=\"Path 20403\" d=\"M21.884,8.51,10.549,10.384,12.426,21.06l4.38-.61a.333.333,0,0,1,.326.435c-.051.219-.338.235-.514.267-1.474.266-3.009.388-4.491.631-.416-.032-.321-.718-.441-1l-3-.365c-.213-.12-.2-.273-.2-.492.019-.622.092-1.251.125-1.872.16-3,.316-6,.5-8.993A9.457,9.457,0,0,1,9.152,8.1a.369.369,0,0,1,.265-.3l8.519.681L22.2,7.8c.225.068.246.19.3.393.553,2.288.758,4.775,1.285,7.083.143.531-.507.731-.642.2ZM17.211,21.932a.563.563,0,0,0-.072.24,8.549,8.549,0,0,0,0,1.187c.019.217.088.393.328.421a9.138,9.138,0,0,0,1.448-.021.53.53,0,0,0,.122-.065l3.756-3.771L21,18.13Zm5.329-5.35c-.365.286-.7.757-1.061,1.062L23.3,19.437c.3-.35.777-.687,1.05-1.044.15-.2.174-.312.017-.516a13.851,13.851,0,0,0-1.327-1.327.393.393,0,0,0-.23-.1.476.476,0,0,0-.271.13\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\"><strong>Create</strong> a Policy</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n \n <label\n *ngIf=\"ff_policy_ms_word_integration\"\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'word'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\"\n />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\"/>\n <path id=\"Path_20405\" data-name=\"Path 20405\" d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">{{createWordPolicyText}}</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label\n class=\"document-box\"\n *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\"\n [class.error]=\"docxError?.visible\"\n >\n <input\n type=\"file\"\n accept=\".docx\"\n id=\"DOCfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #docxUploadButton\n />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\"/>\n <path id=\"Path_20405\" data-name=\"Path 20405\" d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\"\n >Upload a <strong>DOCX</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'docx' && filename\">{{\n filename\n }}</ng-container>\n </div>\n <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n {{ docxError?.message }}\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'docx' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label\n class=\"document-box\"\n *ngIf=\"showPdfBlock\"\n [class.active]=\"selectedDocumentType == 'pdf'\"\n >\n <input\n type=\"file\"\n accept=\".pdf\"\n id=\"PDFfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #pdfUploadButton\n />\n <svg id=\"PDF-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20408\" data-name=\"Path 20408\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#a82a1d\"/>\n <path id=\"Path_20409\" data-name=\"Path 20409\" d=\"M16.125,13.778A1.39,1.39,0,0,0,16.285,15a16.106,16.106,0,0,0,2.106,2.554c.312-.045.6-.047,1.2-.092a6.964,6.964,0,0,1,3.616.239,1.31,1.31,0,0,1,.784,1.361,1.176,1.176,0,0,1-1.075.981c-2.224.336-3.305-.9-4.579-1.746a2.094,2.094,0,0,0-.812.021,25.782,25.782,0,0,0-3.412.916c-.253.089-.338.3-.533.609a11.062,11.062,0,0,1-2.82,3.427,2.145,2.145,0,0,1-1.861.445c-1-.222-1.178-1.182-.5-1.942A9.452,9.452,0,0,1,10,20.462a14.714,14.714,0,0,1,2.418-1.109c.491-.461.556-.686.966-1.764.431-1.136.922-2.25,1.324-3.4a1.679,1.679,0,0,0-.035-1.062,7.7,7.7,0,0,1-.638-3.476,1.4,1.4,0,0,1,.959-1.393,1.279,1.279,0,0,1,1.464.8c.2.479.552,1.75-.331,4.728m-.377,1.377-1.418,3.422,3.353-.883-1.935-2.539m3.222,2.882A4.5,4.5,0,0,0,21.92,19.37c.377,0,.714-.131.733-.6.051-1.251-2.656-.864-3.682-.73m-6.96,2.037a9.788,9.788,0,0,0-2.975,1.8c-.218.171-.446.718-.282.984s.81.067,1-.12a9.29,9.29,0,0,0,2.253-2.664m3.246-7.243c-.045-.878.461-2.172.437-3.224-.008-.355-.051-.747-.5-.772-.364-.02-.534.476-.569.762a5.8,5.8,0,0,0,.636,3.234\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\"\n >Upload a <strong>PDF</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'pdf' && filename\">{{\n filename\n }}</ng-container>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'pdf' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType === 'template'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\"\n />\n <svg id=\"TMP-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20406\" data-name=\"Path 20406\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#34aa44\"/>\n <path id=\"Path_20410\" data-name=\"Path 20410\" d=\"M16,1.778V3.555H0V1.778A1.783,1.783,0,0,1,1.778,0H14.223A1.783,1.783,0,0,1,16,1.778M0,4.444H16v8.889a1.778,1.778,0,0,1-1.777,1.778H1.778A1.778,1.778,0,0,1,0,13.333ZM6.99,9.928A.891.891,0,0,0,6.1,9.039H3.642a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889H6.1a.891.891,0,0,0,.888-.889Zm6.306,0a.892.892,0,0,0-.889-.889H9.948a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889h2.459a.892.892,0,0,0,.889-.889ZM2.667,7.111A.889.889,0,0,0,3.556,8h8.889a.889.889,0,0,0,0-1.778H3.556a.889.889,0,0,0-.889.889\" transform=\"translate(8 7.999)\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">Draft Using a <strong>Template</strong></div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n <!-- End Select a template -->\n <app-loader-inline *ngIf=\"isLoader\"></app-loader-inline>\n </div>\n</div>\n<div class=\"bottom-button\" [class.grayscale]=\"isTemplateOpened\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"isTemplateOpened\"\n >\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button\n type=\"button\"\n (click)=\"editor(selectedDocumentType)\"\n class=\"next\"\n [class.disabled]=\"!selectedDocumentType || isTemplateOpened || isLoader\"\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%;overflow:hidden;overflow-y:scroll}@media screen and (max-width: 1365px){::ng-deep .document-section{align-items:unset}}::ng-deep .document-section.grayscale{filter:grayscale(1)!important;pointer-events:none!important}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#787a8c;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #CDCED6;border-radius:8px;width:100%;background:transparent;height:64px;padding:0 16px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;inset:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 64px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;font-weight:500;line-height:24px;color:#000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:270px;margin-right:25px}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:24px;left:0;right:0;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:16px;height:16px;position:absolute;right:8px;top:2px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:16px;height:16px;background:#ddf4e0;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:16px;position:relative;top:0;right:8px}::ng-deep .document-section-inner .document-box.active{background:#ddf4e0;border:1px solid #B7E2BD}::ng-deep .document-section-inner .document-box.active .document-box-icon{display:none}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}::ng-deep .document-section-inner .document-box-icon{color:#565a6f}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }] }); }
36045
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DocumentSectionComponent, selector: "lib-document-section", inputs: { selectedDocumentType: "selectedDocumentType", feature: "feature", templateView: "templateView", policyId: "policyId", policyName: "policyName", organization_id: "organization_id", member_obj_id: "member_obj_id", userInfo: "userInfo", templateUrl: "templateUrl" }, outputs: { disconnectRefresh: "disconnectRefresh", editPolicy: "editPolicy", openTemplate: "openTemplate" }, ngImport: i0, template: "<div class=\"document-section\" [class.grayscale]=\"templateView\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 480.8 480.8\"\n style=\"enable-background: new 0 0 480.8 480.8\"\n xml:space=\"preserve\"\n >\n <path\n style=\"fill: #ffd517\"\n d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\n c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\"\n />\n <g>\n <path\n style=\"fill: #e5e5e5\"\n d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\"\n />\n <path\n style=\"fill: #e5e5e5\"\n d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\"\n />\n </g>\n <g>\n <path\n style=\"fill: #210b20\"\n d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\n c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\n s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\n c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\n c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\n c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\n c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\n c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\n C244.712,66.4,247.912,63.2,247.912,58.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\n c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\n c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\n l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\n l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\"\n />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either draft it from scratch using VComply's online editor{{ ff_policy_ms_word_integration ? ' or Create a Policy Using MS Word' : '' }}{{ showDocxBlock ? ' or Upload an Existing DOCX file' : '' }}{{ showPdfBlock ? ' or Upload an Existing PDF file' : '' }} or Draft Using a Template.\n </p>\n </div>\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'draft'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (click)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\"\n />\n <svg id=\"Draft\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20402\" data-name=\"Path 20402\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#565a6f\"/>\n <path id=\"Path_20403\" data-name=\"Path 20403\" d=\"M21.884,8.51,10.549,10.384,12.426,21.06l4.38-.61a.333.333,0,0,1,.326.435c-.051.219-.338.235-.514.267-1.474.266-3.009.388-4.491.631-.416-.032-.321-.718-.441-1l-3-.365c-.213-.12-.2-.273-.2-.492.019-.622.092-1.251.125-1.872.16-3,.316-6,.5-8.993A9.457,9.457,0,0,1,9.152,8.1a.369.369,0,0,1,.265-.3l8.519.681L22.2,7.8c.225.068.246.19.3.393.553,2.288.758,4.775,1.285,7.083.143.531-.507.731-.642.2ZM17.211,21.932a.563.563,0,0,0-.072.24,8.549,8.549,0,0,0,0,1.187c.019.217.088.393.328.421a9.138,9.138,0,0,0,1.448-.021.53.53,0,0,0,.122-.065l3.756-3.771L21,18.13Zm5.329-5.35c-.365.286-.7.757-1.061,1.062L23.3,19.437c.3-.35.777-.687,1.05-1.044.15-.2.174-.312.017-.516a13.851,13.851,0,0,0-1.327-1.327.393.393,0,0,0-.23-.1.476.476,0,0,0-.271.13\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\"><strong>Create</strong> a Policy</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n \n <label\n *ngIf=\"ff_policy_ms_word_integration\"\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'word'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (click)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\"\n />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\"/>\n <path id=\"Path_20405\" data-name=\"Path 20405\" d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">{{createWordPolicyText}}</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label\n class=\"document-box\"\n *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\"\n [class.error]=\"docxError?.visible\"\n (click)=\"resetUploads()\"\n >\n <input\n type=\"file\"\n accept=\".docx\"\n id=\"DOCfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #docxUploadButton\n />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\"/>\n <path id=\"Path_20405\" data-name=\"Path 20405\" d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\"\n >Upload a <strong>DOCX</strong></ng-container\n >\n <span *ngIf=\"selectedDocumentType == 'docx' && filename\"\n [appTooltip]=\"filename\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"true\"\n >{{\n filename\n }}</span>\n </div>\n <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n {{ docxError?.message }}\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'docx' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label\n class=\"document-box\"\n *ngIf=\"showPdfBlock\"\n [class.active]=\"selectedDocumentType == 'pdf'\"\n (click)=\"resetUploads()\"\n >\n <input\n type=\"file\"\n accept=\".pdf\"\n id=\"PDFfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #pdfUploadButton\n />\n <svg id=\"PDF-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20408\" data-name=\"Path 20408\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#a82a1d\"/>\n <path id=\"Path_20409\" data-name=\"Path 20409\" d=\"M16.125,13.778A1.39,1.39,0,0,0,16.285,15a16.106,16.106,0,0,0,2.106,2.554c.312-.045.6-.047,1.2-.092a6.964,6.964,0,0,1,3.616.239,1.31,1.31,0,0,1,.784,1.361,1.176,1.176,0,0,1-1.075.981c-2.224.336-3.305-.9-4.579-1.746a2.094,2.094,0,0,0-.812.021,25.782,25.782,0,0,0-3.412.916c-.253.089-.338.3-.533.609a11.062,11.062,0,0,1-2.82,3.427,2.145,2.145,0,0,1-1.861.445c-1-.222-1.178-1.182-.5-1.942A9.452,9.452,0,0,1,10,20.462a14.714,14.714,0,0,1,2.418-1.109c.491-.461.556-.686.966-1.764.431-1.136.922-2.25,1.324-3.4a1.679,1.679,0,0,0-.035-1.062,7.7,7.7,0,0,1-.638-3.476,1.4,1.4,0,0,1,.959-1.393,1.279,1.279,0,0,1,1.464.8c.2.479.552,1.75-.331,4.728m-.377,1.377-1.418,3.422,3.353-.883-1.935-2.539m3.222,2.882A4.5,4.5,0,0,0,21.92,19.37c.377,0,.714-.131.733-.6.051-1.251-2.656-.864-3.682-.73m-6.96,2.037a9.788,9.788,0,0,0-2.975,1.8c-.218.171-.446.718-.282.984s.81.067,1-.12a9.29,9.29,0,0,0,2.253-2.664m3.246-7.243c-.045-.878.461-2.172.437-3.224-.008-.355-.051-.747-.5-.772-.364-.02-.534.476-.569.762a5.8,5.8,0,0,0,.636,3.234\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\"\n >Upload a <strong>PDF</strong></ng-container\n >\n <span *ngIf=\"selectedDocumentType == 'pdf' && filename\"\n [appTooltip]=\"filename\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"true\"\n >{{\n filename\n }}</span>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'pdf' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType === 'template'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (click)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\"\n />\n <svg id=\"TMP-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20406\" data-name=\"Path 20406\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#34aa44\"/>\n <path id=\"Path_20410\" data-name=\"Path 20410\" d=\"M16,1.778V3.555H0V1.778A1.783,1.783,0,0,1,1.778,0H14.223A1.783,1.783,0,0,1,16,1.778M0,4.444H16v8.889a1.778,1.778,0,0,1-1.777,1.778H1.778A1.778,1.778,0,0,1,0,13.333ZM6.99,9.928A.891.891,0,0,0,6.1,9.039H3.642a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889H6.1a.891.891,0,0,0,.888-.889Zm6.306,0a.892.892,0,0,0-.889-.889H9.948a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889h2.459a.892.892,0,0,0,.889-.889ZM2.667,7.111A.889.889,0,0,0,3.556,8h8.889a.889.889,0,0,0,0-1.778H3.556a.889.889,0,0,0-.889.889\" transform=\"translate(8 7.999)\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">Draft Using a <strong>Template</strong></div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n <!-- End Select a template -->\n <app-loader-inline *ngIf=\"isLoader\"></app-loader-inline>\n </div>\n</div>\n<div class=\"bottom-button\" [class.grayscale]=\"templateView\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"templateView\"\n >\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button\n type=\"button\"\n (click)=\"editor(selectedDocumentType)\"\n class=\"next\"\n [class.disabled]=\"!selectedDocumentType || templateView || isLoader\"\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%;overflow:hidden;overflow-y:scroll}@media screen and (max-width: 1365px){::ng-deep .document-section{align-items:unset}}::ng-deep .document-section.grayscale{filter:grayscale(1)!important;pointer-events:none!important}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#787a8c;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #CDCED6;border-radius:8px;width:100%;background:transparent;height:64px;padding:0 16px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;inset:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 64px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;font-weight:500;line-height:24px;color:#000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:270px;margin-right:25px}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:24px;left:0;right:0;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:16px;height:16px;position:absolute;right:8px;top:2px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:16px;height:16px;background:#ddf4e0;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:16px;position:relative;top:0;right:8px}::ng-deep .document-section-inner .document-box.active{background:#ddf4e0;border:1px solid #B7E2BD}::ng-deep .document-section-inner .document-box.active .document-box-icon{display:none}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}::ng-deep .document-section-inner .document-box-icon{color:#565a6f}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }] }); }
36003
36046
  }
36004
36047
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentSectionComponent, decorators: [{
36005
36048
  type: Component,
36006
- args: [{ selector: 'lib-document-section', template: "<div class=\"document-section\" [class.grayscale]=\"isTemplateOpened\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 480.8 480.8\"\n style=\"enable-background: new 0 0 480.8 480.8\"\n xml:space=\"preserve\"\n >\n <path\n style=\"fill: #ffd517\"\n d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\n c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\"\n />\n <g>\n <path\n style=\"fill: #e5e5e5\"\n d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\"\n />\n <path\n style=\"fill: #e5e5e5\"\n d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\"\n />\n </g>\n <g>\n <path\n style=\"fill: #210b20\"\n d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\n c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\n s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\n c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\n c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\n c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\n c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\n c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\n C244.712,66.4,247.912,63.2,247.912,58.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\n c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\n c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\n l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\n l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\"\n />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either\n draft it from scratch using VComply's online editor or upload an\n existing DOCX or PDF file.\n </p>\n </div>\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'draft'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\"\n />\n <svg id=\"Draft\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20402\" data-name=\"Path 20402\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#565a6f\"/>\n <path id=\"Path_20403\" data-name=\"Path 20403\" d=\"M21.884,8.51,10.549,10.384,12.426,21.06l4.38-.61a.333.333,0,0,1,.326.435c-.051.219-.338.235-.514.267-1.474.266-3.009.388-4.491.631-.416-.032-.321-.718-.441-1l-3-.365c-.213-.12-.2-.273-.2-.492.019-.622.092-1.251.125-1.872.16-3,.316-6,.5-8.993A9.457,9.457,0,0,1,9.152,8.1a.369.369,0,0,1,.265-.3l8.519.681L22.2,7.8c.225.068.246.19.3.393.553,2.288.758,4.775,1.285,7.083.143.531-.507.731-.642.2ZM17.211,21.932a.563.563,0,0,0-.072.24,8.549,8.549,0,0,0,0,1.187c.019.217.088.393.328.421a9.138,9.138,0,0,0,1.448-.021.53.53,0,0,0,.122-.065l3.756-3.771L21,18.13Zm5.329-5.35c-.365.286-.7.757-1.061,1.062L23.3,19.437c.3-.35.777-.687,1.05-1.044.15-.2.174-.312.017-.516a13.851,13.851,0,0,0-1.327-1.327.393.393,0,0,0-.23-.1.476.476,0,0,0-.271.13\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\"><strong>Create</strong> a Policy</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n \n <label\n *ngIf=\"ff_policy_ms_word_integration\"\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'word'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\"\n />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\"/>\n <path id=\"Path_20405\" data-name=\"Path 20405\" d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">{{createWordPolicyText}}</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label\n class=\"document-box\"\n *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\"\n [class.error]=\"docxError?.visible\"\n >\n <input\n type=\"file\"\n accept=\".docx\"\n id=\"DOCfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #docxUploadButton\n />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\"/>\n <path id=\"Path_20405\" data-name=\"Path 20405\" d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\"\n >Upload a <strong>DOCX</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'docx' && filename\">{{\n filename\n }}</ng-container>\n </div>\n <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n {{ docxError?.message }}\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'docx' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label\n class=\"document-box\"\n *ngIf=\"showPdfBlock\"\n [class.active]=\"selectedDocumentType == 'pdf'\"\n >\n <input\n type=\"file\"\n accept=\".pdf\"\n id=\"PDFfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #pdfUploadButton\n />\n <svg id=\"PDF-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20408\" data-name=\"Path 20408\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#a82a1d\"/>\n <path id=\"Path_20409\" data-name=\"Path 20409\" d=\"M16.125,13.778A1.39,1.39,0,0,0,16.285,15a16.106,16.106,0,0,0,2.106,2.554c.312-.045.6-.047,1.2-.092a6.964,6.964,0,0,1,3.616.239,1.31,1.31,0,0,1,.784,1.361,1.176,1.176,0,0,1-1.075.981c-2.224.336-3.305-.9-4.579-1.746a2.094,2.094,0,0,0-.812.021,25.782,25.782,0,0,0-3.412.916c-.253.089-.338.3-.533.609a11.062,11.062,0,0,1-2.82,3.427,2.145,2.145,0,0,1-1.861.445c-1-.222-1.178-1.182-.5-1.942A9.452,9.452,0,0,1,10,20.462a14.714,14.714,0,0,1,2.418-1.109c.491-.461.556-.686.966-1.764.431-1.136.922-2.25,1.324-3.4a1.679,1.679,0,0,0-.035-1.062,7.7,7.7,0,0,1-.638-3.476,1.4,1.4,0,0,1,.959-1.393,1.279,1.279,0,0,1,1.464.8c.2.479.552,1.75-.331,4.728m-.377,1.377-1.418,3.422,3.353-.883-1.935-2.539m3.222,2.882A4.5,4.5,0,0,0,21.92,19.37c.377,0,.714-.131.733-.6.051-1.251-2.656-.864-3.682-.73m-6.96,2.037a9.788,9.788,0,0,0-2.975,1.8c-.218.171-.446.718-.282.984s.81.067,1-.12a9.29,9.29,0,0,0,2.253-2.664m3.246-7.243c-.045-.878.461-2.172.437-3.224-.008-.355-.051-.747-.5-.772-.364-.02-.534.476-.569.762a5.8,5.8,0,0,0,.636,3.234\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\"\n >Upload a <strong>PDF</strong></ng-container\n >\n <ng-container *ngIf=\"selectedDocumentType == 'pdf' && filename\">{{\n filename\n }}</ng-container>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'pdf' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType === 'template'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (change)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\"\n />\n <svg id=\"TMP-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20406\" data-name=\"Path 20406\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#34aa44\"/>\n <path id=\"Path_20410\" data-name=\"Path 20410\" d=\"M16,1.778V3.555H0V1.778A1.783,1.783,0,0,1,1.778,0H14.223A1.783,1.783,0,0,1,16,1.778M0,4.444H16v8.889a1.778,1.778,0,0,1-1.777,1.778H1.778A1.778,1.778,0,0,1,0,13.333ZM6.99,9.928A.891.891,0,0,0,6.1,9.039H3.642a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889H6.1a.891.891,0,0,0,.888-.889Zm6.306,0a.892.892,0,0,0-.889-.889H9.948a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889h2.459a.892.892,0,0,0,.889-.889ZM2.667,7.111A.889.889,0,0,0,3.556,8h8.889a.889.889,0,0,0,0-1.778H3.556a.889.889,0,0,0-.889.889\" transform=\"translate(8 7.999)\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">Draft Using a <strong>Template</strong></div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n <!-- End Select a template -->\n <app-loader-inline *ngIf=\"isLoader\"></app-loader-inline>\n </div>\n</div>\n<div class=\"bottom-button\" [class.grayscale]=\"isTemplateOpened\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"isTemplateOpened\"\n >\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button\n type=\"button\"\n (click)=\"editor(selectedDocumentType)\"\n class=\"next\"\n [class.disabled]=\"!selectedDocumentType || isTemplateOpened || isLoader\"\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%;overflow:hidden;overflow-y:scroll}@media screen and (max-width: 1365px){::ng-deep .document-section{align-items:unset}}::ng-deep .document-section.grayscale{filter:grayscale(1)!important;pointer-events:none!important}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#787a8c;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #CDCED6;border-radius:8px;width:100%;background:transparent;height:64px;padding:0 16px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;inset:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 64px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;font-weight:500;line-height:24px;color:#000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:270px;margin-right:25px}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:24px;left:0;right:0;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:16px;height:16px;position:absolute;right:8px;top:2px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:16px;height:16px;background:#ddf4e0;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:16px;position:relative;top:0;right:8px}::ng-deep .document-section-inner .document-box.active{background:#ddf4e0;border:1px solid #B7E2BD}::ng-deep .document-section-inner .document-box.active .document-box-icon{display:none}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}::ng-deep .document-section-inner .document-box-icon{color:#565a6f}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"] }]
36049
+ args: [{ selector: 'lib-document-section', template: "<div class=\"document-section\" [class.grayscale]=\"templateView\">\n <div class=\"document-section-inner\">\n <div class=\"message-box\">\n <svg\n version=\"1.1\"\n id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 480.8 480.8\"\n style=\"enable-background: new 0 0 480.8 480.8\"\n xml:space=\"preserve\"\n >\n <path\n style=\"fill: #ffd517\"\n d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\n c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\"\n />\n <g>\n <path\n style=\"fill: #e5e5e5\"\n d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\"\n />\n <path\n style=\"fill: #e5e5e5\"\n d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\n h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\"\n />\n </g>\n <g>\n <path\n style=\"fill: #210b20\"\n d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\n c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\n s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\n c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\n c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\n c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\n c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\n c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\n c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\n C244.712,66.4,247.912,63.2,247.912,58.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\n c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\n c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\n l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\"\n />\n <path\n style=\"fill: #210b20\"\n d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\n l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\"\n />\n </g>\n </svg>\n <p>\n There are multiple ways to create a policy on VComply. You can either draft it from scratch using VComply's online editor{{ ff_policy_ms_word_integration ? ' or Create a Policy Using MS Word' : '' }}{{ showDocxBlock ? ' or Upload an Existing DOCX file' : '' }}{{ showPdfBlock ? ' or Upload an Existing PDF file' : '' }} or Draft Using a Template.\n </p>\n </div>\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'draft'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (click)=\"changeDocType('draft')\"\n [checked]=\"selectedDocumentType === 'draft'\"\n />\n <svg id=\"Draft\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20402\" data-name=\"Path 20402\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#565a6f\"/>\n <path id=\"Path_20403\" data-name=\"Path 20403\" d=\"M21.884,8.51,10.549,10.384,12.426,21.06l4.38-.61a.333.333,0,0,1,.326.435c-.051.219-.338.235-.514.267-1.474.266-3.009.388-4.491.631-.416-.032-.321-.718-.441-1l-3-.365c-.213-.12-.2-.273-.2-.492.019-.622.092-1.251.125-1.872.16-3,.316-6,.5-8.993A9.457,9.457,0,0,1,9.152,8.1a.369.369,0,0,1,.265-.3l8.519.681L22.2,7.8c.225.068.246.19.3.393.553,2.288.758,4.775,1.285,7.083.143.531-.507.731-.642.2ZM17.211,21.932a.563.563,0,0,0-.072.24,8.549,8.549,0,0,0,0,1.187c.019.217.088.393.328.421a9.138,9.138,0,0,0,1.448-.021.53.53,0,0,0,.122-.065l3.756-3.771L21,18.13Zm5.329-5.35c-.365.286-.7.757-1.061,1.062L23.3,19.437c.3-.35.777-.687,1.05-1.044.15-.2.174-.312.017-.516a13.851,13.851,0,0,0-1.327-1.327.393.393,0,0,0-.23-.1.476.476,0,0,0-.271.13\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\"><strong>Create</strong> a Policy</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n \n <label\n *ngIf=\"ff_policy_ms_word_integration\"\n class=\"document-box\"\n [class.active]=\"selectedDocumentType == 'word'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (click)=\"changeDocType('word')\"\n [checked]=\"selectedDocumentType === 'word'\"\n />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\"/>\n <path id=\"Path_20405\" data-name=\"Path 20405\" d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">{{createWordPolicyText}}</div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n\n\n\n <label\n class=\"document-box\"\n *ngIf=\"showDocxBlock\"\n [class.active]=\"selectedDocumentType == 'docx' && !docxError?.visible\"\n [class.error]=\"docxError?.visible\"\n (click)=\"resetUploads()\"\n >\n <input\n type=\"file\"\n accept=\".docx\"\n id=\"DOCfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #docxUploadButton\n />\n <svg id=\"Word-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20404\" data-name=\"Path 20404\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#1e5dd3\"/>\n <path id=\"Path_20405\" data-name=\"Path 20405\" d=\"M10.419,9.718l1.889,9.121L12.44,20l.132-.885,2.152-9.4,2.626.018,2.187,9.106.174,1.132a13.4,13.4,0,0,1,.174-1.352c.5-2.954,1.188-5.88,1.7-8.832l.04-.07H24L21.085,22.281l-2.818-.026L15.931,12.22l-.16,1.077-2.015,8.986-2.829-.028L8,9.718Z\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'docx' && filename)\"\n >Upload a <strong>DOCX</strong></ng-container\n >\n <span *ngIf=\"selectedDocumentType == 'docx' && filename\"\n [appTooltip]=\"filename\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"true\"\n >{{\n filename\n }}</span>\n </div>\n <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">\n {{ docxError?.message }}\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <i class=\"icons error-icon\" *ngIf=\"docxError?.visible\">&#xe914;</i>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'docx' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <label\n class=\"document-box\"\n *ngIf=\"showPdfBlock\"\n [class.active]=\"selectedDocumentType == 'pdf'\"\n (click)=\"resetUploads()\"\n >\n <input\n type=\"file\"\n accept=\".pdf\"\n id=\"PDFfile\"\n (change)=\"handleFileInput($event.target.files)\"\n onclick=\"event.stopPropagation();\"\n #pdfUploadButton\n />\n <svg id=\"PDF-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20408\" data-name=\"Path 20408\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#a82a1d\"/>\n <path id=\"Path_20409\" data-name=\"Path 20409\" d=\"M16.125,13.778A1.39,1.39,0,0,0,16.285,15a16.106,16.106,0,0,0,2.106,2.554c.312-.045.6-.047,1.2-.092a6.964,6.964,0,0,1,3.616.239,1.31,1.31,0,0,1,.784,1.361,1.176,1.176,0,0,1-1.075.981c-2.224.336-3.305-.9-4.579-1.746a2.094,2.094,0,0,0-.812.021,25.782,25.782,0,0,0-3.412.916c-.253.089-.338.3-.533.609a11.062,11.062,0,0,1-2.82,3.427,2.145,2.145,0,0,1-1.861.445c-1-.222-1.178-1.182-.5-1.942A9.452,9.452,0,0,1,10,20.462a14.714,14.714,0,0,1,2.418-1.109c.491-.461.556-.686.966-1.764.431-1.136.922-2.25,1.324-3.4a1.679,1.679,0,0,0-.035-1.062,7.7,7.7,0,0,1-.638-3.476,1.4,1.4,0,0,1,.959-1.393,1.279,1.279,0,0,1,1.464.8c.2.479.552,1.75-.331,4.728m-.377,1.377-1.418,3.422,3.353-.883-1.935-2.539m3.222,2.882A4.5,4.5,0,0,0,21.92,19.37c.377,0,.714-.131.733-.6.051-1.251-2.656-.864-3.682-.73m-6.96,2.037a9.788,9.788,0,0,0-2.975,1.8c-.218.171-.446.718-.282.984s.81.067,1-.12a9.29,9.29,0,0,0,2.253-2.664m3.246-7.243c-.045-.878.461-2.172.437-3.224-.008-.355-.051-.747-.5-.772-.364-.02-.534.476-.569.762a5.8,5.8,0,0,0,.636,3.234\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">\n <ng-container *ngIf=\"!(selectedDocumentType == 'pdf' && filename)\"\n >Upload a <strong>PDF</strong></ng-container\n >\n <span *ngIf=\"selectedDocumentType == 'pdf' && filename\"\n [appTooltip]=\"filename\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"true\"\n >{{\n filename\n }}</span>\n </div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea97;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n <div\n class=\"line-progress\"\n *ngIf=\"selectedDocumentType == 'pdf' && isUploading\"\n >\n <div class=\"line-progress-bar\"></div>\n </div>\n </label>\n <!-- Select a template -->\n <label\n class=\"document-box\"\n [class.active]=\"selectedDocumentType === 'template'\"\n >\n <input\n type=\"radio\"\n name=\"selectedDocumentType\"\n (click)=\"changeDocType('template')\"\n [checked]=\"selectedDocumentType === 'template'\"\n />\n <svg id=\"TMP-Icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">\n <path id=\"Path_20406\" data-name=\"Path 20406\" d=\"M28,32H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H28a4,4,0,0,1,4,4V28a4,4,0,0,1-4,4\" fill=\"#34aa44\"/>\n <path id=\"Path_20410\" data-name=\"Path 20410\" d=\"M16,1.778V3.555H0V1.778A1.783,1.783,0,0,1,1.778,0H14.223A1.783,1.783,0,0,1,16,1.778M0,4.444H16v8.889a1.778,1.778,0,0,1-1.777,1.778H1.778A1.778,1.778,0,0,1,0,13.333ZM6.99,9.928A.891.891,0,0,0,6.1,9.039H3.642a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889H6.1a.891.891,0,0,0,.888-.889Zm6.306,0a.892.892,0,0,0-.889-.889H9.948a.891.891,0,0,0-.888.889v2.456a.891.891,0,0,0,.888.889h2.459a.892.892,0,0,0,.889-.889ZM2.667,7.111A.889.889,0,0,0,3.556,8h8.889a.889.889,0,0,0,0-1.778H3.556a.889.889,0,0,0-.889.889\" transform=\"translate(8 7.999)\" fill=\"#fff\"/>\n </svg>\n \n <div class=\"label-right\">\n <div class=\"value\">Draft Using a <strong>Template</strong></div>\n <i class=\"icons document-box-icon vx-fs-16 vx-mr-2\">&#xea46;</i>\n <div class=\"check-circle\">\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n </div>\n </label>\n <!-- End Select a template -->\n <app-loader-inline *ngIf=\"isLoader\"></app-loader-inline>\n </div>\n</div>\n<div class=\"bottom-button\" [class.grayscale]=\"templateView\">\n <button\n type=\"button\"\n (click)=\"editPolicyEmit()\"\n class=\"back\"\n [class.disabled]=\"templateView\"\n >\n <i class=\"icons\">&#xe91d;</i> Back\n </button>\n <button\n type=\"button\"\n (click)=\"editor(selectedDocumentType)\"\n class=\"next\"\n [class.disabled]=\"!selectedDocumentType || templateView || isLoader\"\n >\n Next <i class=\"icons\">&#xe91e;</i>\n </button>\n</div>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%;overflow:hidden;overflow-y:scroll}@media screen and (max-width: 1365px){::ng-deep .document-section{align-items:unset}}::ng-deep .document-section.grayscale{filter:grayscale(1)!important;pointer-events:none!important}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#787a8c;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #CDCED6;border-radius:8px;width:100%;background:transparent;height:64px;padding:0 16px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;inset:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 64px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;font-weight:500;line-height:24px;color:#000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:270px;margin-right:25px}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:24px;left:0;right:0;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:16px;height:16px;position:absolute;right:8px;top:2px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:16px;height:16px;background:#ddf4e0;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:16px;position:relative;top:0;right:8px}::ng-deep .document-section-inner .document-box.active{background:#ddf4e0;border:1px solid #B7E2BD}::ng-deep .document-section-inner .document-box.active .document-box-icon{display:none}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}::ng-deep .document-section-inner .document-box-icon{color:#565a6f}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"] }]
36007
36050
  }], ctorParameters: function () { return [{ type: SnackBarService }, { type: PolicyService }, { type: PolicyAPIService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i1$1.PlatformLocation }, { type: IframeService }]; }, propDecorators: { selectedDocumentType: [{
36008
36051
  type: Input
36009
36052
  }], feature: [{
@@ -36022,8 +36065,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
36022
36065
  type: Input
36023
36066
  }], templateUrl: [{
36024
36067
  type: Input
36025
- }], isTemplateOpened: [{
36026
- type: Input
36027
36068
  }], disconnectRefresh: [{
36028
36069
  type: Output
36029
36070
  }], editPolicy: [{
@@ -37412,7 +37453,6 @@ class WorkflowPolicyComponent {
37412
37453
  this.noWorkflowSelected = false;
37413
37454
  this.templateView = false;
37414
37455
  this.templateUrl = '';
37415
- this.isTemplateClosed = true;
37416
37456
  this.policyForm = {
37417
37457
  policyName: '',
37418
37458
  policyNotes: '',
@@ -38756,6 +38796,7 @@ class WorkflowPolicyComponent {
38756
38796
  'Feb',
38757
38797
  'Mar',
38758
38798
  'Apr',
38799
+ 'May',
38759
38800
  'Jun',
38760
38801
  'Jul',
38761
38802
  'Aug',
@@ -39127,8 +39168,8 @@ class WorkflowPolicyComponent {
39127
39168
  }
39128
39169
  onTemplateSelect(event, isPreselected = false) {
39129
39170
  if (event?.length === 0) {
39130
- this.isTemplateClosed = false;
39131
39171
  this.templateView = false;
39172
+ this.policyService.templateView.next(false);
39132
39173
  return;
39133
39174
  }
39134
39175
  this.disconnectRefresh.emit(false);
@@ -39159,11 +39200,11 @@ class WorkflowPolicyComponent {
39159
39200
  this.iframeService.redirectIfInIframe(this.templateUrl, true);
39160
39201
  }
39161
39202
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowPolicyComponent, deps: [{ token: PolicyService }, { token: SnackBarService }, { token: UiKitService }, { token: AuthService$1 }, { token: ResponsibilityService }, { token: i3.Router }, { token: i3.ActivatedRoute }, { token: FrequencyService }, { token: i1$1.PlatformLocation }, { token: i0.ChangeDetectorRef }, { token: RestApiService }, { token: CommonService }, { token: OrganizationUserService }, { token: OrganizationCommonService }, { token: ComplianceCommonService }, { token: IframeService }], target: i0.ɵɵFactoryTarget.Component }); }
39162
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowPolicyComponent, selector: "app-workflow-policy", inputs: { mode: "mode", policyId: "policyId", feature: "feature", convertFileData: "convertFileData", selectedCategory: "selectedCategory", isSendForAttestation: "isSendForAttestation", templateId: "templateId" }, outputs: { pickerChanged: "pickerChanged", showConfirmationAlert: "showConfirmationAlert", populateOption: "populateOption", disconnectRefresh: "disconnectRefresh", shiftToEditMode: "shiftToEditMode" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "formatEvidence", first: true, predicate: ["formatEvidence"], descendants: true }, { propertyName: "datePickerPopUp", first: true, predicate: ["datePicker"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- <p>workflow-policy works!</p> -->\n\n<ng-container *ngIf=\"!showCreateDocuments\">\n <div class=\"workflow-policy\">\n <!-- Policy Name -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\n <img\n [src]=\"ASSETS.what\"\n alt=\"name\"\n *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\n />\n\n <svg\n *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">\n Policy Name <span class=\"required\">*</span>\n </label>\n <input\n type=\"text\"\n (keydown)=\"activeSelector = 'name'\"\n (focusin)=\"activateSelector('name', true)\"\n *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\n (focusout)=\"activateSelector('name', false)\"\n [ngModel]=\"policyForm.policyName\"\n (ngModelChange)=\"policyForm.policyName = changeName($event)\"\n placeholder=\"Name this policy\"\n />\n <div\n class=\"selected\"\n *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\n >\n <div class=\"chip-container\">\n <span class=\"value\">{{ policyForm.policyName }}</span>\n </div>\n <button\n class=\"edit\"\n (click)=\"activateSelector('name', true)\"\n type=\"button\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n\n <p\n *ngIf=\"submitted && !policyForm.policyName.trim()\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Please enter a name for this policy.\n </p>\n <vcomply-editor\n [(ngModel)]=\"policyForm.policyNotes\"\n [editorConfig]=\"description\"\n ></vcomply-editor>\n <!-- <app-cs-switch\n [(ngValue)]=\"policyForm.availableOnPortal\"\n (ngValueChange)=\"availabilityOnPortal($event)\"\n >\n Do you want this policy to be available on the portal?\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe932;</i\n >\n </app-cs-switch>\n <app-cs-switch\n *ngIf=\"policyForm.availableOnPortal\"\n [(ngValue)]=\"policyForm.acceptSuggestions\"\n >\n Accept suggestions\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe932;</i\n ></app-cs-switch> -->\n </div>\n </div>\n </div>\n\n <!-- Policy Category -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'category'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'category' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedCategories?.length == 0 ||\n activeSelector === 'category'\n \"\n [src]=\"ASSETS.case_category\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedCategories?.length > 0 &&\n activeSelector !== 'category'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\"\n >Policy Category <span class=\"required\">*</span>\n </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.selectedCategories?.length == 0\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('category', true)\"\n placeholder=\"Select a category for this policy.\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.selectedCategories?.length > 0\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"\n let category of policyForm?.selectedCategories?.slice(0, 1)\n \"\n >\n <i\n (click)=\"remove('category', category)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"category.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ category.item_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n *ngIf=\"policyForm?.selectedCategories?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"category.popover()\"\n placement=\"left\"\n >\n +{{ policyForm?.selectedCategories?.slice(1).length }}\n </button>\n </div>\n\n <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\n [class.plus]=\"policyForm?.selectedCategories?.length>2\">\n <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\n class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\n {{category.item_name}}</span>\n <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\n appPopover (click)=\"category.popover()\" placement=\"right\">+\n {{policyForm?.selectedCategories?.slice(2).length}}</button>\n </div> -->\n <button\n *ngIf=\"activeSelector !== 'category'\"\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('category', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #category [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let category of policyForm?.selectedCategories | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('category', category)\"\n >&#xe90d;</i\n >\n {{ category.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <p\n *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Please select the category for this policy.\n </p>\n </div>\n\n <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\n <ng-container *ngFor=\"let tag of policyForm?.customTags\">\n <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\n <input\n type=\"text\"\n [(ngModel)]=\"tag.value\"\n placeholder=\"{{ tag.tagname }}\"\n />\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Effective Date -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"false\">\n <img [src]=\"ASSETS.when\" alt=\"\" />\n\n <svg\n *ngIf=\"false\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Effective Date</label>\n <div class=\"date-time-picker\">\n <div class=\"picker-group\">\n <input\n type=\"text\"\n readonly\n placeholder=\"Select the effective date of the policy.\"\n [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\n (click)=\"openDatePicker()\"\n id=\"effective-date\"\n />\n <i class=\"icons\">&#xe92d;</i>\n <dp-date-picker\n #datePicker\n (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\n [config]=\"dateConfig\"\n [(ngModel)]=\"policyForm.policyDueDate\"\n >\n </dp-date-picker>\n <div\n class=\"vx-overlay\"\n (click)=\"closeDatePicker($event)\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Policy Owner -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'owners'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'owners' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\n <img\n *ngIf=\"!policyForm.policy_owners?.length\"\n [src]=\"ASSETS.im_creating\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm.policy_owners?.length\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\n </div>\n <div\n *ngIf=\"!policyForm.policy_owners?.length\"\n (click)=\"activateSelector('owners', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select owners for this policy.\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm.policy_owners?.length\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.policy_owners[0]?.member_name }}</span\n >\n\n <button\n *ngIf=\"policyForm?.policy_owners?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"policyUserPopover.popover()\"\n placement=\"left\"\n >\n + {{ policyForm?.policy_owners.length - 1 }}\n </button>\n </div>\n <div\n *ngIf=\"false\"\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\n >\n &\n </div>\n <div\n *ngIf=\"false\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >Samantha Jones</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"policyGroupPopover.popover()\"\n placement=\"right\"\n >\n +4\n </button>\n </div>\n <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let owner of policyForm?.policy_owners | slice : 1;\n let i = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"owner?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n (click)=\"remove('owners', owner, i + 1)\"\n class=\"icons\"\n >&#xe90d;</i\n >\n {{ owner?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"'Harshvardhan Kariwala'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Harshvardhan Kariwala\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <button\n (click)=\"activateSelector('owners', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <p\n *ngIf=\"submitted && !policyForm?.policy_owners?.length\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select owners for this policy.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Review -->\n <div\n class=\"form-group-row\"\n [class.active]=\"\n activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\n \"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\n <img *ngIf=\"!policyForm?.addReviewers\" src=\"ASSETS.reviewer\" alt=\"\" />\n\n <svg\n *ngIf=\"policyForm?.addReviewers\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">REVIEW</label>\n <div\n class=\"reviewSelection vx-p-3 vx-pb-0\"\n [class.disabled]=\"\n activeSelector && sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\n Does this policy need to be reviewed?\n </div>\n <app-cs-radio\n name=\"review-type\"\n [checked]=\"policyForm?.addReviewers\"\n (checkedEvent)=\"typeSelected(true)\"\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n YES\n </div></app-cs-radio\n >\n <app-cs-radio\n name=\"review-type\"\n [checked]=\"!policyForm?.addReviewers\"\n (checkedEvent)=\"typeSelected(false)\"\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n NO\n </div></app-cs-radio\n >\n </div>\n\n <ng-container *ngIf=\"policyForm?.addReviewers\">\n <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\n [appScrollInView]=\"scrollToBottom\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n sideSelectorElements.includes(activeSelector)\n \"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the person responsible for reviewing this policy\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\n >\n <i\n (click)=\"remove('reviewer', reviewer)\"\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ reviewer?.member_name }}</span\n >\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n *ngIf=\"activeSelector !== 'reviewer'\"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\n <div\n *ngIf=\"policyForm?.review_frequency_details == ''\"\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n >\n <div\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n When does this policy needs to be reviewed?\n </div>\n <div\n (click)=\"activateSelector('reviewerFrequency', true)\"\n class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\n >\n SET A FREQUENCY\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm?.review_frequency_details != ''\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\n >\n <div\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n [appTooltip]=\"reviewerFrequencyPlaceholder\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ reviewerFrequencyPlaceholder }}\n </div>\n <button\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length > 0 &&\n !policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the review schedule for this policy.\n </p>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- New Approval Workflow -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'approvers'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'approvers' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedApprovers?.length == 0 ||\n activeSelector === 'approvers'\n \"\n [src]=\"ASSETS.approval\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedApprovers?.length > 0 &&\n activeSelector !== 'approvers'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\"\n >APPROVAL <span class=\"required\">*</span></label\n >\n <button\n (click)=\"\n createApprovalWorkflow(); activateSelector('approvers', true)\n \"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\n >\n CREATE A NEW APPROVAL WORKFLOW\n </button>\n </div>\n <div\n *ngIf=\"\n selectedWorkflow?.length === 0 ||\n !selectedWorkflow[0]?.workflow_name\n \"\n (click)=\"\n clickApprovalWorkflow(true); activateSelector('approvers', true)\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the approval workflow for this policy\n </div>\n </div>\n <div\n *ngIf=\"\n selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\"\n >\n <div\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"removeWorkflow()\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ selectedWorkflow[0]?.workflow_name }}</span\n >\n </div>\n <button\n (click)=\"editWorkflow(selectedWorkflow[0])\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\n <div\n *ngFor=\"\n let approval of selectedWorkflow[0]?.approval_workflow;\n let approvalIndex = index\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"level-left vx-d-flex vx-align-center\">\n <div class=\"vx-d-block\">\n <div\n class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\n [appTooltip]=\"\n approval?.alias_name\n ? approval?.alias_name\n : approval?.level1\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{\n approval?.alias_name\n ? approval?.alias_name\n : approval?.level1\n }}\n </div>\n <div\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\n >\n {{\n approval?.type === \"ROUNDROBIN\"\n ? \"ROUND-ROBIN\"\n : approval?.type === \"ANYONE\"\n ? \"ANY ONE\"\n : approval?.type\n }}\n </div>\n </div>\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\n >\n <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n > -->\n <div\n *ngIf=\"\n approval?.type?.toLowerCase() === 'sequential' &&\n approval?.approvers?.length < 2\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >\n {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\n </div>\n <div\n *ngIf=\"\n approval?.approvers?.length > 1 &&\n approval?.type?.toLowerCase() === 'sequential'\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >\n 1\n </div>\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"approval?.approvers[0]?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ approval?.approvers[0]?.member_name }}</span\n >\n <button\n *ngIf=\"approval?.approvers?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"workflowPopover.popover()\"\n placement=\"right\"\n >\n +{{ approval?.approvers?.length - 1 }}\n </button>\n </div>\n <app-popover #workflowPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let approver of approval?.approvers | slice : 1;\n let approvalIndex = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"approver?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <!-- <i class=\"icons\">&#xe90d;</i> -->\n <span\n *ngIf=\"\n approval?.type?.toLowerCase() === 'sequential'\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >{{\n approvalIndex + 1 ===\n approval?.approvers?.length - 1\n ? \"Final\"\n : approvalIndex + 2\n }}</span\n >\n {{ approver?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <!-- <div class=\"vx-d-flex vx-align-center\">\n <button (click)=\"editLevelClicked(approval,approvalIndex)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n <button (click)=\"deleteLevel(approvalIndex)\"\n class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\n </button>\n </div> -->\n </div>\n </ng-container>\n <p\n *ngIf=\"\n submitted &&\n !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\n !policyApprovalFlag &&\n !policyForm?.selectedApprovers[0]?.approvers?.length\n \"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select or create an approval workflow for this policy.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Policy Access -->\n <div\n *ngIf=\"true\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'policyAccess'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'policyAccess' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"true\">\n <img\n *ngIf=\"\n !policyForm?.policy_access_owners?.length &&\n !policyForm?.policy_access_groups?.length &&\n !policyForm?.availableOnPortal\n \"\n [src]=\"ASSETS.lock_scope\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length ||\n policyForm?.availableOnPortal\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\n </div>\n <div\n *ngIf=\"\n !policyForm?.policy_access_owners?.length &&\n !policyForm?.policy_access_groups?.length &&\n !policyForm?.availableOnPortal\n \"\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Who should be able to view this policy?\n </div>\n </div>\n\n <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3\"\n *ngIf=\"\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length\n \"\n >\n <div\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div\n *ngIf=\"policyForm?.policy_access_owners?.length\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"\n remove(\n 'policyAccess',\n policyForm?.policy_access_owners[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.policy_access_owners[0]?.employee_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm?.policy_access_owners[0]?.employee_name\n }}</span\n >\n <button\n *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"policyAccessPopover.popover()\"\n placement=\"left\"\n >\n +{{ policyForm?.policy_access_owners.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.policy_access_owners.length > 0 &&\n policyForm?.policy_access_groups.length > 0\n \"\n >\n &\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.policy_access_groups.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"\n remove(\n 'accessGroup',\n policyForm?.policy_access_groups[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.policy_access_groups[0]?.group_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm?.policy_access_groups[0]?.group_name\n }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"accessGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.policy_access_groups.length > 1\"\n >\n +{{ policyForm?.policy_access_groups.length - 1 }}\n </button>\n </div>\n\n <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let user of policyForm?.policy_access_owners\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"user?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"remove('policyAccess', user)\"\n >&#xe90d;</i\n >\n {{ user?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #accessGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.policy_access_groups\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"remove('accessGroup', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <!-- <div class=\"vx-mt-4 vx-mb-2\">\n <app-cs-radio\n [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\n Everyone who has access to this Policy Category\n </div></app-cs-radio\n >\n <app-cs-radio\n [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\n class=\"vx-mt-1\"\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\n Select users/groups\n </div></app-cs-radio\n >\n </div> -->\n </div>\n </ng-container>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.availableOnPortal\"\n >\n <span class=\"vx-fs-13 vx-paragraph-txt\"\n >Visible to All Current & Future Users</span\n >\n\n <button\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"edit vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <div class=\"vx-mt-2\">\n <app-cs-switch\n *ngIf=\"\n policyForm.availableOnPortal ||\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length\n \"\n [(ngValue)]=\"policyForm.acceptSuggestions\"\n >ACCEPT SUGGESTIONS\n <i\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\n [appTooltip]=\"\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n \"\n placement=\"bottom-right\"\n delay=\"0\"\n type=\"white\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n </div>\n </div>\n </div>\n\n <!-- Attestations -->\n <div\n class=\"form-group-row\"\n [class.active]=\"false\"\n [class.disabled]=\"false\"\n *ngIf=\"false\"\n >\n <div class=\"left\" [class.checked]=\"false\">\n <img [src]=\"ASSETS.attestations\" alt=\"\" />\n\n <svg\n *ngIf=\"false\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">ATTESTATIONS</label>\n </div>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the persons required to attest to this Policy\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >Samantha Jones</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"policyAttestationPopover.popover()\"\n placement=\"left\"\n >\n +4\n </button>\n </div>\n <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"'Harshvardhan Kariwala'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Harshvardhan Kariwala\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <div class=\"vx-mt-2\">\n <app-cs-switch\n >REQUIRES E-SIGNATURE FOR ATTESTATION\n <i\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\n [appTooltip]=\"\n 'Requires e-signature for attestation info text here...'\n \"\n placement=\"bottom-right\"\n delay=\"0\"\n type=\"white\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n\n <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\n <div\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n What is the attestation schedule for this<br />policy?\n </div>\n <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\n SET A FREQUENCY\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\n Every Wednesday by 11:59 pm\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <label class=\"vx-control-panel vx-mt-2\"\n >ASSESSMENT OF UNDERSTANDING</label\n >\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\n of the policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Approval Workflow -->\n <div\n class=\"form-group-row\"\n *ngIf=\"false\"\n [class.active]=\"activeSelector === 'approvers'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'approvers' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedApprovers?.length == 0 ||\n activeSelector === 'approvers'\n \"\n [src]=\"ASSETS.approval\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedApprovers?.length > 0 &&\n activeSelector !== 'approvers'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div\n class=\"vx-form-group approval-workflow\"\n [class.disabled]=\"policyApprovalFlag !== 0\"\n >\n <label class=\"vx-control-panel\">\n Approval workflow <span class=\"required\">*</span>\n <button\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n class=\"button\"\n >\n Create a new Approval Workflow\n </button>\n </label>\n <div\n class=\"select\"\n [class.disabled]=\"approverWorkFlowList?.length == 0\"\n *ngIf=\"\n policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\n policyForm?.selectedApprovers.length == 0\n \"\n >\n <cs-select\n [ngModel]=\"selectedApprovalWorkflow\"\n (ngModelChange)=\"selectedWorkflowChange($event)\"\n [placeholder]=\"'Select approval workflow for this policy'\"\n name=\"selectedApprovalWorkflow\"\n [setMaxWidth]=\"true\"\n >\n <cs-option\n *ngFor=\"let data of approverWorkFlowList\"\n [value]=\"data\"\n >\n {{ data.workflow_name }}\n </cs-option>\n <cs-option\n [value]=\"-1\"\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n >Create a new approval workflow</cs-option\n >\n </cs-select>\n </div>\n <ng-container\n *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\n >\n <div\n class=\"selected\"\n *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\n >\n <div class=\"workflow-label\">\n <p class=\"title\">Level {{ i + 1 }}</p>\n <p class=\"description\">{{ level.name }}</p>\n </div>\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"chip-container\">\n <span\n class=\"chip\"\n *ngFor=\"\n let approver of level.approvers.slice(0, 1);\n let j = index\n \"\n ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\n >&#xe90d;</i\n >\n <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\n j + 1\n }}</span\n >{{ approver.member_name }}</span\n >\n\n <button\n class=\"count\"\n *ngIf=\"level.approvers?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"labelName.popover()\"\n placement=\"left\"\n >\n +\n\n {{ level.approvers.slice(1).length }}\n </button>\n <app-popover #labelName [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let approver of level.approvers | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"remove('approvers', approver, i)\"\n >&#xe90d;</i\n >\n <span\n class=\"step\"\n *ngIf=\"level.name == 'SEQUENTIAL'\"\n >\n {{\n j == level.approvers.slice(1).length - 1\n ? \"Final\"\n : j + 2\n }}\n </span>\n {{ approver.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"\n activateSelector('approvers', true, level.name);\n approversListIndex = i\n \"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n <button\n class=\"close-btn\"\n (click)=\"remove('workflowLevel', level, i)\"\n >\n <i class=\"icons\">&#xe90d;</i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <p\n *ngIf=\"\n submitted &&\n !policyForm?.selectedApprovers?.length &&\n !policyApprovalFlag\n \"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select or create an approval workflow for this policy.\n </p>\n\n <label\n class=\"vx-control-panel\"\n *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\n ><button\n class=\"button\"\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n >\n + Add More Levels\n </button></label\n >\n </div>\n </div>\n </div>\n\n <!-- Who / now Attestation -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'assignees'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'assignees' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedAssignees?.length == 0 ||\n activeSelector === 'assignees'\n \"\n [src]=\"ASSETS.case_assignees\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedAssignees?.length > 0 &&\n activeSelector !== 'assignees'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Attestation</label>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\"\n *ngIf=\"\n (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\n (policyForm?.selectedAssignees?.length == 0 &&\n groupEnabled &&\n policyForm?.selectedGroupAssignee.length == 0)\n \"\n (click)=\"activateSelector('assignees', true)\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the persons responsible for attesting this policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n *ngIf=\"\n policyForm?.selectedAssignees?.length > 0 ||\n policyForm?.selectedGroupAssignee?.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees?.slice(0, 1)\n \"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('assignees', assignee)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"assignee.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ assignee.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"assigneePopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.selectedAssignees?.length > 1\"\n >\n +{{ policyForm?.selectedAssignees?.slice(1).length }}\n </button>\n </div>\n <ng-container *ngIf=\"groupEnabled\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove('assignees', policyForm?.selectedAssignees[0])\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.selectedAssignees[0]?.employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"UserPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.selectedAssignees.length > 1\"\n >\n +{{ policyForm?.selectedAssignees.length - 1 }}\n </button>\n </div>\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.selectedAssignees.length > 0 &&\n policyForm?.selectedGroupAssignee.length > 0\n \"\n >\n &\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove(\n 'groupAssignees',\n policyForm?.selectedGroupAssignee[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.selectedGroupAssignee[0]?.group_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.selectedGroupAssignee[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"group.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\n >\n +{{ policyForm?.selectedGroupAssignee.length - 1 }}\n </button>\n </div>\n </ng-container>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('assignees', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <p\n *ngIf=\"\n submitted &&\n ((policyForm?.selectedAssignees?.length == 0 &&\n policyForm?.frequency_details &&\n !groupEnabled) ||\n (policyForm?.selectedAssignees?.length == 0 &&\n policyForm.selectedGroupAssignee.length == 0 &&\n policyForm?.frequency_details &&\n groupEnabled) ||\n (isSendForAttestation &&\n policyForm?.selectedAssignees?.length === 0))\n \"\n id=\"whovalidatemsg\"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the persons required to attest to this Policy.\n </p>\n <app-cs-switch\n [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\n [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\n class=\"who-toggle\"\n >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'If selected, the readers will be required to attest this policy using their electronic signature.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n <app-popover #assigneePopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\n >&#xe90d;</i\n >\n {{ assignee.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #UserPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\n >&#xe90d;</i\n >\n {{ assignee.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #group [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.selectedGroupAssignee | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\n >&#xe90d;</i\n >\n {{ data.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n\n <!-- overseer -->\n <app-popover #overseerPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let overseer of policyForm?.CCEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\n >&#xe90d;</i\n >\n {{ overseer?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.CCGroupEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <!-- overseer end -->\n\n <!-- overseer fail start -->\n <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let overseer of policyForm?.CCFailEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\n >&#xe90d;</i\n >\n {{ overseer?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.CCFailEmailGroup | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"remove('ccGroupFailEmail', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <!-- overseer fail end -->\n </div>\n </div>\n </div>\n\n <!-- When -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'frequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'frequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">When?</label>\n\n <div\n *ngIf=\"policyForm?.frequency_details == ''\"\n class=\"select button-sec\"\n >\n <div\n class=\"custom-input frequency-custom-input\"\n (click)=\"activateSelector('frequency', true)\"\n >\n {{ frequencyPlaceholder }}\n </div>\n\n <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n Set A frequency\n </button>\n </div>\n <!-- <div\n *ngIf=\"policyForm?.frequency_details != ''\"\n class=\"selected button-sec\"\n > -->\n <div\n *ngIf=\"policyForm?.frequency_details != ''\"\n class=\"selected button-sec selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"remove('frequency', rc)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"frequencyPlaceholder\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ frequencyPlaceholder }}</span\n >\n </div>\n <button\n *ngIf=\"activeSelector !== 'frequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n <!-- </div>\n <span class=\"chip\">{{ frequencyPlaceholder }}</span>\n <button\n *ngIf=\"activeSelector !== 'frequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button> -->\n </div>\n <p\n *ngIf=\"\n submitted &&\n ((policyForm?.selectedAssignees?.length > 0 &&\n !policyForm?.frequency_details &&\n !groupEnabled) ||\n ((policyForm?.selectedAssignees?.length > 0 ||\n policyForm?.selectedGroupAssignee?.length > 0) &&\n !policyForm?.frequency_details &&\n groupEnabled))\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select an attestation schedule for this policy.\n </p>\n\n <!-- <label class=\"vx-control-panel\">Effective Date</label>\n <div class=\"date-time-picker\">\n <div class=\"picker-group\">\n <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\n [value]=\"policyForm.policyDueDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\n <i class=\"icons\">&#xe92d;</i>\n <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\n [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n </dp-date-picker>\n <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Checkpoints / Assessment of Understanding -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"true\"\n [class.active]=\"activeSelector === 'checkpoints'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'checkpoints' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">\n Assessment of Understanding\n <!-- <button *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\n (click)=\"activateSelector('checkpoints', true)\"\n >\n <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\n <div class=\"custom-input\">\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\n of the policy.\n </div>\n </div>\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\n >\n <!-- <div class=\"chip-container\">\n <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\n\n <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\n\n <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\n\n </div> -->\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('checkpoints', policyForm?.checkpointDetails)\"\n >&#xe9ae;</i\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\">{{\n policyForm?.checkpointDetails?.length +\n (policyForm?.checkpointDetails?.length > 1\n ? \" Questions\"\n : \" Question\")\n }}</span>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('checkpoints', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\n {{ checkpoint?.question }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover> -->\n </div>\n </div>\n </div>\n\n <!-- Risk Classification -->\n <div\n class=\"form-group-row\"\n *ngIf=\"showRiskClassification && false\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\n <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!policyForm?.riskRating\" />\n\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n *ngIf=\"policyForm?.riskRating\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Risk Classification</label>\n <div class=\"classification\">\n <label\n class=\"low\"\n *ngFor=\"let class of riskClassification\"\n [ngClass]=\"[class.class]\"\n >\n <input\n type=\"radio\"\n name=\"classification\"\n [value]=\"class.value\"\n [checked]=\"policyForm?.riskRating === class.value\"\n [(ngModel)]=\"policyForm.riskRating\"\n />\n <span>{{ class.name }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Responsibility Center -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addResponsibilityCenters\"\n [class.active]=\"activeSelector === 'rc'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'rc' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\n <img\n *ngIf=\"\n policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\n \"\n [src]=\"ASSETS.responsibility_center\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Responsibility Center</label>\n <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\n <input\n type=\"text\"\n (click)=\"activateSelector('rc', true)\"\n placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\n readonly\n />\n </div>\n\n <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('rc', rc)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"rc.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rc.item_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rcPopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.selectedRCs?.length > 1\"\n >\n +{{ policyForm?.selectedRCs?.slice(1).length }}\n </button>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('rc', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #rcPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rc of policyForm?.selectedRCs | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n {{ rc.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n\n <!-- Version -->\n <div\n *ngIf=\"policyForm.addVersion\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.disabled]=\"\n activeSelector && sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\n <img\n [src]=\"ASSETS.associated_risks\"\n alt=\"name\"\n *ngIf=\"!policyForm.policy_version\"\n />\n\n <svg\n *ngIf=\"policyForm.policy_version\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">VERSION</label>\n <input\n [(ngModel)]=\"policyForm.policy_version\"\n (change)=\"onVersion($event)\"\n type=\"text\"\n placeholder=\"Specify the policy version.\"\n />\n <p\n *ngIf=\"!isVersionValid\"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n {{ versionErrorMessage }}\n </p>\n </div>\n </div>\n </div>\n\n <!-- Reviewer -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addReviewers && false\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedReviewers?.length == 0 ||\n activeSelector === 'reviewer'\n \"\n [src]=\"ASSETS.reviewer\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedReviewers?.length > 0 &&\n activeSelector !== 'reviewer'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Reviewer </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('reviewer', true)\"\n placeholder=\"Select the person responsible for reviewing this policy\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('reviewer', reviewer)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"reviewer.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ reviewer.member_name }}</span\n >\n </ng-container>\n </div>\n\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length == 0 &&\n policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select a reviewer for this policy.\n </p>\n\n <label class=\"vx-control-panel\">When? </label>\n\n <div\n *ngIf=\"policyForm?.review_frequency_details == ''\"\n class=\"select button-sec\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n [placeholder]=\"reviewerFrequencyPlaceholder\"\n readonly\n />\n <button\n (click)=\"activateSelector('reviewerFrequency', true)\"\n type=\"button\"\n >\n Set A frequency\n </button>\n </div>\n <div\n *ngIf=\"policyForm?.review_frequency_details != ''\"\n class=\"selected button-sec\"\n >\n <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\n <button\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length > 0 &&\n !policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the review schedule for this policy.\n </p>\n\n <app-format-and-evidence\n (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\n #formatEvidence\n [mode]=\"'policyReviewer'\"\n [organization_id]=\"organization_id\"\n [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\n >\n </app-format-and-evidence>\n </div>\n </div>\n </div>\n\n <!-- Overseer -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addOverseers\"\n [class.active]=\"\n activeSelector === 'ccEmail' || activeSelector === 'ccFail'\n \"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'ccEmail' &&\n activeSelector !== 'ccFail' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"\n policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\n \"\n >\n <img\n *ngIf=\"\n (policyForm?.CCFailEmail?.length == 0 &&\n policyForm?.CCEmail?.length == 0) ||\n activeSelector === 'ccEmail' ||\n activeSelector === 'ccFail'\n \"\n [src]=\"ASSETS.oversight\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n (policyForm?.CCFailEmail?.length > 0 ||\n policyForm?.CCEmail?.length > 0) &&\n activeSelector !== 'ccEmail' &&\n activeSelector !== 'ccFail'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Oversight</label>\n <div\n class=\"select\"\n *ngIf=\"\n policyForm?.CCEmail?.length == 0 &&\n policyForm?.CCGroupEmail.length == 0\n \"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('ccEmail', true)\"\n placeholder=\"Who should have oversight of this policy?\"\n readonly\n />\n </div>\n <div\n class=\"selected\"\n *ngIf=\"\n policyForm?.CCEmail?.length > 0 ||\n policyForm?.CCGroupEmail.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccEmail', ccEmail)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"ccEmail.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ ccEmail.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"ccEmailPopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\n >\n +{{ policyForm?.CCEmail?.slice(1).length }}\n </button>\n </div>\n\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCEmail[0].employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"overseerPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\n >\n +{{ policyForm?.CCEmail?.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.CCEmail.length > 0 &&\n policyForm?.CCGroupEmail?.length > 0\n \"\n >\n &\n </div>\n\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"overseerGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\n >\n +{{ policyForm?.CCGroupEmail?.length - 1 }}\n </button>\n </div>\n </div>\n\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('ccEmail', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n\n <div\n class=\"select\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length == 0 &&\n policyForm?.CCFailEmailGroup?.length == 0\n \"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('ccFail', true)\"\n placeholder=\"Who should be notified if the policy is not attested on time?\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length > 0 ||\n policyForm?.CCFailEmailGroup?.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccFail', ccFail)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"ccFail.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ ccFail.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"ccFailPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\n >\n +{{ policyForm?.CCFailEmail?.slice(1).length }}\n </button>\n </div>\n\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"overseerFailPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\n >\n +{{ policyForm?.CCFailEmail?.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length > 0 &&\n policyForm?.CCFailEmailGroup?.length > 0\n \"\n >\n &\n </div>\n\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"overseerFailGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\n >\n +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\n </button>\n </div>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('ccFail', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let ccEmail of policyForm?.CCEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\n >&#xe90d;</i\n >\n {{ ccEmail.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let ccFail of policyForm?.CCFailEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\n >&#xe90d;</i\n >\n {{ ccFail.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n\n <!-- Related Documents -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addAssociatedDocuments\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\">\n <img\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\n [src]=\"ASSETS.format_evidence\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\n <app-format-and-evidence\n (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\n [mode]=\"'policy'\"\n [organization_id]=\"organization_id\"\n [formatEvidanceData]=\"policyForm?.associatedDocuments\"\n ></app-format-and-evidence>\n </div>\n </div>\n </div>\n\n <!-- Link Programs & Responsibilities -->\n <div\n *ngIf=\"policyForm?.addLinkProgram\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'linkProgram'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'linkProgram' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"\n policyForm?.programSelectedValues?.program?.category_id\n \"\n >\n <img\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n [src]=\"ASSETS.link_items\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\"\n >LINK PROGRAMS & RESPONSIBILITIES</label\n >\n <div\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n (click)=\"activateSelector('linkProgram', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select Programs & responsibilities that are<br />associated with\n this policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"\n remove('linkProgram', policyForm?.programSelectedValues)\n \"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.programSelectedValues?.program?.name }}</span\n >\n <!-- <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"programResponsibilityPopover.popover()\"\n placement=\"left\"\n >\n +4\n </button> -->\n </div>\n <app-popover\n #programResponsibilityPopover\n [dontCloseonClick]=\"true\"\n >\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"\n 'Reporting information security weaknesses'\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Reporting information security weaknesses\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('linkProgram', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Link Assessment -->\n <div\n *ngIf=\"policyForm.addLinkAssessment\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'isAssessment'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'isAssessment' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\n <img\n *ngIf=\"!policyForm?.assessment?.length\"\n [src]=\"ASSETS.assessments\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.assessment?.length\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\n <div\n *ngIf=\"policyForm?.assessment?.length === 0\"\n (click)=\"activateSelector('isAssessment', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select assessments that are associated with this<br />policy.\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm?.assessment?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\n }}</span\n >\n </div>\n <app-popover\n #programResponsibilityPopover\n [dontCloseonClick]=\"true\"\n >\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"\n assessment?.assessmentDetails?.assessment_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n {{ assessment?.assessmentDetails?.assessment_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n (click)=\"activateSelector('isAssessment', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Link Related Polices -->\n\n <div\n *ngIf=\"policyForm.addLinkPolicies\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === CONSTANTS.LINK_POLICY\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'isLinkedPolices' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"SelectedListOfPolicies\">\n <img\n *ngIf=\"!SelectedListOfPolicies?.length\"\n [src]=\"LINKS.linkedPolicyImage\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"SelectedListOfPolicies?.length\"\n class=\"checkIcon\"\n [xmlns]=\"LINKS.checked\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">LINK RELATED POLICIES</label>\n <div\n *ngIf=\"SelectedListOfPolicies?.length === 0\"\n (click)=\"activateSelector('isLinkedPolices', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select policies that are associated with this policy.\n </div>\n </div>\n\n <div class=\"selected\" *ngIf=\"SelectedListOfPolicies?.length > 0\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let policy of SelectedListOfPolicies.slice(0, 1)\"\n >\n <i\n (click)=\"remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policy?.contract_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policy?.contract_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n *ngIf=\"SelectedListOfPolicies?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"relatedPolicy.popover()\"\n placement=\"left\"\n >\n +{{ SelectedListOfPolicies?.slice(1).length }}\n </button>\n </div>\n <button\n *ngIf=\"activeSelector !== CONSTANTS.LINK_POLICY\"\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector(CONSTANTS.LINK_POLICY, true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let policy of SelectedListOfPolicies | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"\n remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\n \"\n >&#xe90d;</i\n >\n {{ policy?.contract_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-cs-switch\n [(ngValue)]=\"policyForm.isPortalDisplayEnabled\"\n [class.disabled]=\"policyForm?.LinkedPolicies == 0\"\n class=\"who-toggle\"\n >DISPLAY ON THE POLICY PORTAL\n <i\n class=\"icons\"\n [appTooltip]=\"CONSTANTS.LINK_POLICY_HELP_TEXT\"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n </div>\n </div>\n </div>\n\n <app-checkbox-list\n [config]=\"categoryConfig\"\n [twoColumn]=\"false\"\n [itemsList]=\"categoryList\"\n [selectedItems]=\"policyForm.selectedCategories\"\n [identifierKey]=\"'_id'\"\n [displayKey]=\"'item_name'\"\n [tooltipKey]=\"'item_name'\"\n *ngIf=\"activeSelector === 'category'\"\n (saveList)=\"saveSelectedList('category', $event)\"\n (closeList)=\"disableSelector()\"\n [loaded]=\"!categoriesListLoaded\"\n >\n </app-checkbox-list>\n <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\n [itemsList]=\"\"\n [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\n *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\n (closeList)=\"fieldDeselector('ISSUE_CC')\">\n</app-checkbox-list> -->\n\n <app-responsibility-centers-list\n *ngIf=\"activeSelector === 'rc'\"\n [responsibilityCentersList]=\"rcList\"\n [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\n [rcIdKey]=\"'item_id'\"\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n (closeRcList)=\"disableSelector()\"\n [loaded]=\"rcListLoaded\"\n >\n </app-responsibility-centers-list>\n\n <app-link-related-policies\n *ngIf=\"activeSelector === CONSTANTS.LINK_POLICY\"\n [policyId]=\"policyId\"\n [mode]=\"mode\"\n [selectedPolicies]=\"SelectedListOfPolicies\"\n (closeLinkPolicyList)=\"disableSelector()\"\n (selectedList)=\"saveSelectedList(CONSTANTS.LINK_POLICY, $event)\"\n ></app-link-related-policies>\n\n <app-users-radio-list\n *ngIf=\"activeSelector === 'reviewer'\"\n [itemEmailKey]=\"'member_email'\"\n [usersList]=\"allReviewers\"\n [headerText]=\"'Select a Reviewer'\"\n [selectedUsers]=\"policyForm.selectedReviewers\"\n [userIdKey]=\"'member_id'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-users-radio-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\n [usersList]=\"overseersList\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [selectedUsers]=\"policyForm.CCEmail\"\n [userIdKey]=\"'employee_id'\"\n [itemNameKey]=\"'employee_name'\"\n (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-owner-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"overseersList\"\n [groupList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.CCEmail\"\n [selectedGroups]=\"policyForm.CCGroupEmail\"\n (save)=\"saveSelectedList('ccEmail', $event)\"\n (cancel)=\"disableSelector()\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\n [usersList]=\"overseersList\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [selectedUsers]=\"policyForm.CCFailEmail\"\n [userIdKey]=\"'employee_id'\"\n [itemNameKey]=\"'employee_name'\"\n (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-owner-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"overseersList\"\n [groupList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.CCFailEmail\"\n [selectedGroups]=\"policyForm.CCFailEmailGroup\"\n (save)=\"saveSelectedList('ccFail', $event)\"\n (cancel)=\"disableSelector()\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-group-users-list\n *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\n [usersList]=\"assigneesList\"\n [groupsList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.selectedAssignees\"\n [userIdKey]=\"'my_member_id'\"\n (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-group-users-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"ownerlist\"\n [groupList]=\"overseerGroupsList\"\n (save)=\"saveSelectedList('assignees', $event)\"\n (cancel)=\"disableSelector()\"\n [selectedGroups]=\"policyForm.selectedGroupAssignee\"\n [selectedUsers]=\"policyForm.selectedAssignees\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'approvers' && false\"\n [listHeading]=\"'Select Approvers'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"true\"\n [selectedUsers]=\"\n addMoreLevels\n ? []\n : policyForm.selectedApprovers[approversListIndex].approvers\n \"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [reviewerWorkflowType]=\"workflowType\"\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n [workflowList]=\"workflowList\"\n [workflowText]=\"'Approval Workflow'\"\n >\n </app-owner-list>\n\n <app-frequency-container\n *ngIf=\"activeSelector === 'frequency'\"\n [mode]=\"'policy'\"\n [frequencyDetails]=\"frequencyDetails\"\n (selectedFrequency)=\"frequencyData($event)\"\n [feature]=\"feature\"\n [pageType]=\"'policy'\"\n (closeFrequency)=\"disableSelector()\"\n ></app-frequency-container>\n\n <app-frequency-container\n *ngIf=\"activeSelector === 'reviewerFrequency'\"\n [mode]=\"'reviewerFrequency'\"\n [frequencyDetails]=\"reviewerFrequencyDetails\"\n (selectedFrequency)=\"reviewerFrequencyData($event)\"\n [feature]=\"feature\"\n [pageType]=\"'policy'\"\n (closeFrequency)=\"disableSelector()\"\n ></app-frequency-container>\n\n <vc-link-program\n *ngIf=\"activeSelector === 'linkProgram'\"\n (close)=\"disableSelector()\"\n [policy]=\"policyForm\"\n [selectedProgram]=\"policyForm?.programSelectedValues\"\n [mode]=\"mode\"\n [selectedLinkProgram]=\"selectedLinkProgram\"\n (changeTab)=\"changeTab('linkedPrograms')\"\n (updatedProgramDetails)=\"updatedProgramDetails($event)\"\n >\n </vc-link-program>\n\n <app-checkpoints-policy-container\n (closeCheckPoint)=\"disableSelector()\"\n [checkpointData]=\"policyForm?.checkpointDetails\"\n [requiredPoint]=\"policyForm?.passingMarks\"\n *ngIf=\"activeSelector === 'checkpoints'\"\n (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\n ></app-checkpoints-policy-container>\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <app-approval-workflow\n *ngIf=\"enableApprovalWorkflow\"\n [selectedCategory]=\"policyForm?.selectedCategories\"\n [approverWorkFlowList]=\"approverWorkFlowList\"\n [allApprovers]=\"allApprovers\"\n (listCancelClicked)=\"listCancelClicked($event)\"\n (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\n (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\n [editApprovalWorkflow]=\"editApprovalWorkflow\"\n [createApprovalClick]=\"createApprovalClick\"\n (closeCreateClicked)=\"closeClickedCreateForm()\"\n [editWorkflowLevel]=\"editWorkflowLevel\"\n ></app-approval-workflow>\n <!-- <app-select-approvers></app-select-approvers> -->\n\n <app-policy-access\n *ngIf=\"activeSelector === 'policyAccess'\"\n [policyAccessType]=\"policyForm?.policy_access_type\"\n (close)=\"disableSelector()\"\n [orgUsersList]=\"usersList\"\n [usersAccessList]=\"usersAccessList\"\n [groupList]=\"overseerGroupsList\"\n [groupsAccessList]=\"groupsAccessList\"\n [selectedUsers]=\"policyForm?.policy_access_owners\"\n [selectedGroups]=\"policyForm?.policy_access_groups\"\n [disabledIds]=\"usersAccessListIds\"\n [disabledGroupIds]=\"groupsAccessListIds\"\n [futureUsersWillSelect]=\"policyForm?.availableOnPortal\"\n (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\n (setPolicyAccessType)=\"policyForm.policy_access_type = $event\"\n >\n </app-policy-access>\n</ng-container>\n<ng-container *ngIf=\"showCreateDocuments\">\n <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\n [organization_id]=\"organization_id\"\n [member_obj_id]=\"member_obj_id\"\n [userInfo]=\"userInfo\"\n [policyId]=\"policyId\"\n [policyName]=\"policyForm.policyName\"\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n (editPolicy)=\"editPolicyFromDocuments()\"\n ></app-create-documents> -->\n <lib-document-section\n *ngIf=\"showCreateDocuments\"\n [templateView]=\"isTemplateClosed\"\n [organization_id]=\"organization_id\"\n [member_obj_id]=\"member_obj_id\"\n [userInfo]=\"userInfo\"\n [policyId]=\"policyId\"\n [feature]=\"feature\"\n [templateUrl]=\"templateUrl\"\n [isTemplateOpened]=\"templateView\"\n [policyName]=\"policyForm.policyName\"\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n (editPolicy)=\"editPolicyFromDocuments()\"\n (openTemplate)=\"templateView = true\"\n ></lib-document-section>\n</ng-container>\n\n<app-assessment-list\n *ngIf=\"activeSelector === 'isAssessment'\"\n [program_ids]=\"''\"\n [isEdit]=\"policyForm?.assessment?.length\"\n (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\n [selectedAssessment]=\"policyForm?.assessment[0]\"\n [mode]=\"'policy'\"\n (onAssessmentSelect)=\"\n onAssessmentSelect($event); saveSelectedList('isAssessment', false)\n \"\n></app-assessment-list>\n\n<app-owner-list\n *ngIf=\"activeSelector === 'approvers' && false\"\n [listHeading]=\"'Select Approvers'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"true\"\n [selectedUsers]=\"\n addMoreLevels\n ? []\n : policyForm.selectedApprovers[approversListIndex].approvers\n \"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [reviewerWorkflowType]=\"workflowType\"\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n [workflowList]=\"workflowList\"\n [workflowText]=\"'Approval Workflow'\"\n>\n</app-owner-list>\n\n<app-owner-list\n *ngIf=\"activeSelector === 'owners'\"\n [listHeading]=\"'Select Owner(s)'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"false\"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('owners', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [selectedUsers]=\"policyForm?.policy_owners ?? []\"\n>\n</app-owner-list>\n\n<app-select-template-list\n *ngIf=\"templateView\"\n [selectedCategoryId]=\"policyForm?.selectedCategories\"\n [feature]=\"feature\"\n (onTemplateSelect)=\"onTemplateSelect($event)\"\n></app-select-template-list>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}.who-toggle{margin-top:10px}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#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 #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#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:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#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[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset: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;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-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;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.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:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 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 input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#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;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#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 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#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 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!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 vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i4.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: i5.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText", "loaded"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GroupUsersListComponent, selector: "app-group-users-list", inputs: ["groupsEnabled", "usersList", "groupsList", "selectedUsers", "userIdKey", "groupIdKey", "openedFrom", "selectedGroups", "assigneeGroupsList", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "loader", "isDisabledSelected"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: SelectTemplateListComponent, selector: "app-select-template-list", inputs: ["selectedCategoryId", "feature"], outputs: ["onTemplateSelect"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "formatEvidanceData"], outputs: ["updateFiles"] }, { kind: "component", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn", "loaded"], outputs: ["closeList", "saveList"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: UserRadioListComponent, selector: "app-users-radio-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "headerText", "loaded"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: FrequencyContainerComponent, selector: "app-frequency-container", inputs: ["frequencyDetails", "mode", "feature", "pageType"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "component", type: CheckpointsPolicyContainerComponent, selector: "app-checkpoints-policy-container", inputs: ["requiredPoint", "checkpointData"], outputs: ["closeCheckPoint", "saveCheckPoint"] }, { kind: "component", type: DocumentSectionComponent, selector: "lib-document-section", inputs: ["selectedDocumentType", "feature", "templateView", "policyId", "policyName", "organization_id", "member_obj_id", "userInfo", "templateUrl", "isTemplateOpened"], outputs: ["disconnectRefresh", "editPolicy", "openTemplate"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: ApprovalWorkflowComponent, selector: "app-approval-workflow", inputs: ["approverWorkFlowList", "allApprovers", "selectedCategory", "editApprovalWorkflow", "createApprovalClick", "editWorkflowLevel"], outputs: ["selectedWorkflowNext", "listCancelClicked", "saveApprovalWorkflow", "closeCreateClicked"] }, { kind: "component", type: PolicyAccessComponent, selector: "app-policy-access", inputs: ["policyAccessType", "SelectedCategory", "orgUsersList", "groupList", "selectedUsers", "selectedGroups", "disabledIds", "usersAccessList", "groupsAccessList", "disabledGroupIds", "futureUsersWillSelect"], outputs: ["close", "saveCheckPoint", "setPolicyAccessType"] }, { kind: "component", type: LinkProgramComponent, selector: "vc-link-program", inputs: ["policy", "currentTab", "mode", "programsList", "selectedProgram", "selectedCategories", "selectedLinkProgram", "hideProgramsList"], outputs: ["changeTab", "updatedProgramDetails", "save", "close", "refreshLinkedPolicies"] }, { kind: "component", type: LinkRelatedPoliciesComponent, selector: "app-link-related-policies", inputs: ["selectedPolicies", "mode", "policyId"], outputs: ["closeLinkPolicyList", "selectedList"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
39203
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WorkflowPolicyComponent, selector: "app-workflow-policy", inputs: { mode: "mode", policyId: "policyId", feature: "feature", convertFileData: "convertFileData", selectedCategory: "selectedCategory", isSendForAttestation: "isSendForAttestation", templateId: "templateId" }, outputs: { pickerChanged: "pickerChanged", showConfirmationAlert: "showConfirmationAlert", populateOption: "populateOption", disconnectRefresh: "disconnectRefresh", shiftToEditMode: "shiftToEditMode" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "formatEvidence", first: true, predicate: ["formatEvidence"], descendants: true }, { propertyName: "datePickerPopUp", first: true, predicate: ["datePicker"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- <p>workflow-policy works!</p> -->\n\n<ng-container *ngIf=\"!showCreateDocuments\">\n <div class=\"workflow-policy\">\n <!-- Policy Name -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\n <img\n [src]=\"ASSETS.what\"\n alt=\"name\"\n *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\n />\n\n <svg\n *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">\n Policy Name <span class=\"required\">*</span>\n </label>\n <input\n type=\"text\"\n (keydown)=\"activeSelector = 'name'\"\n (focusin)=\"activateSelector('name', true)\"\n *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\n (focusout)=\"activateSelector('name', false)\"\n [ngModel]=\"policyForm.policyName\"\n (ngModelChange)=\"policyForm.policyName = changeName($event)\"\n placeholder=\"Name this policy\"\n />\n <div\n class=\"selected\"\n *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\n >\n <div class=\"chip-container\">\n <span class=\"value\">{{ policyForm.policyName }}</span>\n </div>\n <button\n class=\"edit\"\n (click)=\"activateSelector('name', true)\"\n type=\"button\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n\n <p\n *ngIf=\"submitted && !policyForm.policyName.trim()\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Please enter a name for this policy.\n </p>\n <vcomply-editor\n [(ngModel)]=\"policyForm.policyNotes\"\n [editorConfig]=\"description\"\n ></vcomply-editor>\n <!-- <app-cs-switch\n [(ngValue)]=\"policyForm.availableOnPortal\"\n (ngValueChange)=\"availabilityOnPortal($event)\"\n >\n Do you want this policy to be available on the portal?\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe932;</i\n >\n </app-cs-switch>\n <app-cs-switch\n *ngIf=\"policyForm.availableOnPortal\"\n [(ngValue)]=\"policyForm.acceptSuggestions\"\n >\n Accept suggestions\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe932;</i\n ></app-cs-switch> -->\n </div>\n </div>\n </div>\n\n <!-- Policy Category -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'category'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'category' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedCategories?.length == 0 ||\n activeSelector === 'category'\n \"\n [src]=\"ASSETS.case_category\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedCategories?.length > 0 &&\n activeSelector !== 'category'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\"\n >Policy Category <span class=\"required\">*</span>\n </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.selectedCategories?.length == 0\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('category', true)\"\n placeholder=\"Select a category for this policy.\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.selectedCategories?.length > 0\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"\n let category of policyForm?.selectedCategories?.slice(0, 1)\n \"\n >\n <i\n (click)=\"remove('category', category)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"category.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ category.item_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n *ngIf=\"policyForm?.selectedCategories?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"category.popover()\"\n placement=\"left\"\n >\n +{{ policyForm?.selectedCategories?.slice(1).length }}\n </button>\n </div>\n\n <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\n [class.plus]=\"policyForm?.selectedCategories?.length>2\">\n <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\n class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\n {{category.item_name}}</span>\n <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\n appPopover (click)=\"category.popover()\" placement=\"right\">+\n {{policyForm?.selectedCategories?.slice(2).length}}</button>\n </div> -->\n <button\n *ngIf=\"activeSelector !== 'category'\"\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('category', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #category [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let category of policyForm?.selectedCategories | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('category', category)\"\n >&#xe90d;</i\n >\n {{ category.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <p\n *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Please select the category for this policy.\n </p>\n </div>\n\n <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\n <ng-container *ngFor=\"let tag of policyForm?.customTags\">\n <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\n <input\n type=\"text\"\n [(ngModel)]=\"tag.value\"\n placeholder=\"{{ tag.tagname }}\"\n />\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Effective Date -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"false\">\n <img [src]=\"ASSETS.when\" alt=\"\" />\n\n <svg\n *ngIf=\"false\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Effective Date</label>\n <div class=\"date-time-picker\">\n <div class=\"picker-group\">\n <input\n type=\"text\"\n readonly\n placeholder=\"Select the effective date of the policy.\"\n [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\n (click)=\"openDatePicker()\"\n id=\"effective-date\"\n />\n <i class=\"icons\">&#xe92d;</i>\n <dp-date-picker\n #datePicker\n (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\n [config]=\"dateConfig\"\n [(ngModel)]=\"policyForm.policyDueDate\"\n >\n </dp-date-picker>\n <div\n class=\"vx-overlay\"\n (click)=\"closeDatePicker($event)\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Policy Owner -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'owners'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'owners' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\n <img\n *ngIf=\"!policyForm.policy_owners?.length\"\n [src]=\"ASSETS.im_creating\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm.policy_owners?.length\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\n </div>\n <div\n *ngIf=\"!policyForm.policy_owners?.length\"\n (click)=\"activateSelector('owners', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select owners for this policy.\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm.policy_owners?.length\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.policy_owners[0]?.member_name }}</span\n >\n\n <button\n *ngIf=\"policyForm?.policy_owners?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"policyUserPopover.popover()\"\n placement=\"left\"\n >\n + {{ policyForm?.policy_owners.length - 1 }}\n </button>\n </div>\n <div\n *ngIf=\"false\"\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\n >\n &\n </div>\n <div\n *ngIf=\"false\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >Samantha Jones</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"policyGroupPopover.popover()\"\n placement=\"right\"\n >\n +4\n </button>\n </div>\n <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let owner of policyForm?.policy_owners | slice : 1;\n let i = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"owner?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n (click)=\"remove('owners', owner, i + 1)\"\n class=\"icons\"\n >&#xe90d;</i\n >\n {{ owner?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"'Harshvardhan Kariwala'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Harshvardhan Kariwala\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <button\n (click)=\"activateSelector('owners', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <p\n *ngIf=\"submitted && !policyForm?.policy_owners?.length\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select owners for this policy.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Review -->\n <div\n class=\"form-group-row\"\n [class.active]=\"\n activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\n \"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\n <img *ngIf=\"!policyForm?.addReviewers\" src=\"ASSETS.reviewer\" alt=\"\" />\n\n <svg\n *ngIf=\"policyForm?.addReviewers\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">REVIEW</label>\n <div\n class=\"reviewSelection vx-p-3 vx-pb-0\"\n [class.disabled]=\"\n activeSelector && sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\n Does this policy need to be reviewed?\n </div>\n <app-cs-radio\n name=\"review-type\"\n [checked]=\"policyForm?.addReviewers\"\n (checkedEvent)=\"typeSelected(true)\"\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n YES\n </div></app-cs-radio\n >\n <app-cs-radio\n name=\"review-type\"\n [checked]=\"!policyForm?.addReviewers\"\n (checkedEvent)=\"typeSelected(false)\"\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n NO\n </div></app-cs-radio\n >\n </div>\n\n <ng-container *ngIf=\"policyForm?.addReviewers\">\n <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\n [appScrollInView]=\"scrollToBottom\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n sideSelectorElements.includes(activeSelector)\n \"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the person responsible for reviewing this policy\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\n >\n <i\n (click)=\"remove('reviewer', reviewer)\"\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ reviewer?.member_name }}</span\n >\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n *ngIf=\"activeSelector !== 'reviewer'\"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\n <div\n *ngIf=\"policyForm?.review_frequency_details == ''\"\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n >\n <div\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n When does this policy needs to be reviewed?\n </div>\n <div\n (click)=\"activateSelector('reviewerFrequency', true)\"\n class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\n >\n SET A FREQUENCY\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm?.review_frequency_details != ''\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\n >\n <div\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n [appTooltip]=\"reviewerFrequencyPlaceholder\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ reviewerFrequencyPlaceholder }}\n </div>\n <button\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length > 0 &&\n !policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the review schedule for this policy.\n </p>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- New Approval Workflow -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'approvers'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'approvers' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedApprovers?.length == 0 ||\n activeSelector === 'approvers'\n \"\n [src]=\"ASSETS.approval\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedApprovers?.length > 0 &&\n activeSelector !== 'approvers'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\"\n >APPROVAL <span class=\"required\">*</span></label\n >\n <button\n (click)=\"\n createApprovalWorkflow(); activateSelector('approvers', true)\n \"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\n >\n CREATE A NEW APPROVAL WORKFLOW\n </button>\n </div>\n <div\n *ngIf=\"\n selectedWorkflow?.length === 0 ||\n !selectedWorkflow[0]?.workflow_name\n \"\n (click)=\"\n clickApprovalWorkflow(true); activateSelector('approvers', true)\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the approval workflow for this policy\n </div>\n </div>\n <div\n *ngIf=\"\n selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\"\n >\n <div\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"removeWorkflow()\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ selectedWorkflow[0]?.workflow_name }}</span\n >\n </div>\n <button\n (click)=\"editWorkflow(selectedWorkflow[0])\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\n <div\n *ngFor=\"\n let approval of selectedWorkflow[0]?.approval_workflow;\n let approvalIndex = index\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"level-left vx-d-flex vx-align-center\">\n <div class=\"vx-d-block\">\n <div\n class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\n [appTooltip]=\"\n approval?.alias_name\n ? approval?.alias_name\n : approval?.level1\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{\n approval?.alias_name\n ? approval?.alias_name\n : approval?.level1\n }}\n </div>\n <div\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\n >\n {{\n approval?.type === \"ROUNDROBIN\"\n ? \"ROUND-ROBIN\"\n : approval?.type === \"ANYONE\"\n ? \"ANY ONE\"\n : approval?.type\n }}\n </div>\n </div>\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\n >\n <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n > -->\n <div\n *ngIf=\"\n approval?.type?.toLowerCase() === 'sequential' &&\n approval?.approvers?.length < 2\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >\n {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\n </div>\n <div\n *ngIf=\"\n approval?.approvers?.length > 1 &&\n approval?.type?.toLowerCase() === 'sequential'\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >\n 1\n </div>\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"approval?.approvers[0]?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ approval?.approvers[0]?.member_name }}</span\n >\n <button\n *ngIf=\"approval?.approvers?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"workflowPopover.popover()\"\n placement=\"right\"\n >\n +{{ approval?.approvers?.length - 1 }}\n </button>\n </div>\n <app-popover #workflowPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let approver of approval?.approvers | slice : 1;\n let approvalIndex = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"approver?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <!-- <i class=\"icons\">&#xe90d;</i> -->\n <span\n *ngIf=\"\n approval?.type?.toLowerCase() === 'sequential'\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >{{\n approvalIndex + 1 ===\n approval?.approvers?.length - 1\n ? \"Final\"\n : approvalIndex + 2\n }}</span\n >\n {{ approver?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <!-- <div class=\"vx-d-flex vx-align-center\">\n <button (click)=\"editLevelClicked(approval,approvalIndex)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n <button (click)=\"deleteLevel(approvalIndex)\"\n class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\n </button>\n </div> -->\n </div>\n </ng-container>\n <p\n *ngIf=\"\n submitted &&\n !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\n !policyApprovalFlag &&\n !policyForm?.selectedApprovers[0]?.approvers?.length\n \"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select or create an approval workflow for this policy.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Policy Access -->\n <div\n *ngIf=\"true\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'policyAccess'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'policyAccess' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"true\">\n <img\n *ngIf=\"\n !policyForm?.policy_access_owners?.length &&\n !policyForm?.policy_access_groups?.length &&\n !policyForm?.availableOnPortal\n \"\n [src]=\"ASSETS.lock_scope\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length ||\n policyForm?.availableOnPortal\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\n </div>\n <div\n *ngIf=\"\n !policyForm?.policy_access_owners?.length &&\n !policyForm?.policy_access_groups?.length &&\n !policyForm?.availableOnPortal\n \"\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Who should be able to view this policy?\n </div>\n </div>\n\n <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3\"\n *ngIf=\"\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length\n \"\n >\n <div\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div\n *ngIf=\"policyForm?.policy_access_owners?.length\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"\n remove(\n 'policyAccess',\n policyForm?.policy_access_owners[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.policy_access_owners[0]?.employee_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm?.policy_access_owners[0]?.employee_name\n }}</span\n >\n <button\n *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"policyAccessPopover.popover()\"\n placement=\"left\"\n >\n +{{ policyForm?.policy_access_owners.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.policy_access_owners.length > 0 &&\n policyForm?.policy_access_groups.length > 0\n \"\n >\n &\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.policy_access_groups.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"\n remove(\n 'accessGroup',\n policyForm?.policy_access_groups[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.policy_access_groups[0]?.group_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm?.policy_access_groups[0]?.group_name\n }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"accessGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.policy_access_groups.length > 1\"\n >\n +{{ policyForm?.policy_access_groups.length - 1 }}\n </button>\n </div>\n\n <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let user of policyForm?.policy_access_owners\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"user?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"remove('policyAccess', user)\"\n >&#xe90d;</i\n >\n {{ user?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #accessGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.policy_access_groups\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"remove('accessGroup', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <!-- <div class=\"vx-mt-4 vx-mb-2\">\n <app-cs-radio\n [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\n Everyone who has access to this Policy Category\n </div></app-cs-radio\n >\n <app-cs-radio\n [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\n class=\"vx-mt-1\"\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\n Select users/groups\n </div></app-cs-radio\n >\n </div> -->\n </div>\n </ng-container>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.availableOnPortal\"\n >\n <span class=\"vx-fs-13 vx-paragraph-txt\"\n >Visible to All Current & Future Users</span\n >\n\n <button\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"edit vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <div class=\"vx-mt-2\">\n <app-cs-switch\n *ngIf=\"\n policyForm.availableOnPortal ||\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length\n \"\n [(ngValue)]=\"policyForm.acceptSuggestions\"\n >ACCEPT SUGGESTIONS\n <i\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\n [appTooltip]=\"\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n \"\n placement=\"bottom-right\"\n delay=\"0\"\n type=\"white\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n </div>\n </div>\n </div>\n\n <!-- Attestations -->\n <div\n class=\"form-group-row\"\n [class.active]=\"false\"\n [class.disabled]=\"false\"\n *ngIf=\"false\"\n >\n <div class=\"left\" [class.checked]=\"false\">\n <img [src]=\"ASSETS.attestations\" alt=\"\" />\n\n <svg\n *ngIf=\"false\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">ATTESTATIONS</label>\n </div>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the persons required to attest to this Policy\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >Samantha Jones</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"policyAttestationPopover.popover()\"\n placement=\"left\"\n >\n +4\n </button>\n </div>\n <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"'Harshvardhan Kariwala'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Harshvardhan Kariwala\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <div class=\"vx-mt-2\">\n <app-cs-switch\n >REQUIRES E-SIGNATURE FOR ATTESTATION\n <i\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\n [appTooltip]=\"\n 'Requires e-signature for attestation info text here...'\n \"\n placement=\"bottom-right\"\n delay=\"0\"\n type=\"white\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n\n <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\n <div\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n What is the attestation schedule for this<br />policy?\n </div>\n <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\n SET A FREQUENCY\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\n Every Wednesday by 11:59 pm\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <label class=\"vx-control-panel vx-mt-2\"\n >ASSESSMENT OF UNDERSTANDING</label\n >\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\n of the policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Approval Workflow -->\n <div\n class=\"form-group-row\"\n *ngIf=\"false\"\n [class.active]=\"activeSelector === 'approvers'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'approvers' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedApprovers?.length == 0 ||\n activeSelector === 'approvers'\n \"\n [src]=\"ASSETS.approval\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedApprovers?.length > 0 &&\n activeSelector !== 'approvers'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div\n class=\"vx-form-group approval-workflow\"\n [class.disabled]=\"policyApprovalFlag !== 0\"\n >\n <label class=\"vx-control-panel\">\n Approval workflow <span class=\"required\">*</span>\n <button\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n class=\"button\"\n >\n Create a new Approval Workflow\n </button>\n </label>\n <div\n class=\"select\"\n [class.disabled]=\"approverWorkFlowList?.length == 0\"\n *ngIf=\"\n policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\n policyForm?.selectedApprovers.length == 0\n \"\n >\n <cs-select\n [ngModel]=\"selectedApprovalWorkflow\"\n (ngModelChange)=\"selectedWorkflowChange($event)\"\n [placeholder]=\"'Select approval workflow for this policy'\"\n name=\"selectedApprovalWorkflow\"\n [setMaxWidth]=\"true\"\n >\n <cs-option\n *ngFor=\"let data of approverWorkFlowList\"\n [value]=\"data\"\n >\n {{ data.workflow_name }}\n </cs-option>\n <cs-option\n [value]=\"-1\"\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n >Create a new approval workflow</cs-option\n >\n </cs-select>\n </div>\n <ng-container\n *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\n >\n <div\n class=\"selected\"\n *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\n >\n <div class=\"workflow-label\">\n <p class=\"title\">Level {{ i + 1 }}</p>\n <p class=\"description\">{{ level.name }}</p>\n </div>\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"chip-container\">\n <span\n class=\"chip\"\n *ngFor=\"\n let approver of level.approvers.slice(0, 1);\n let j = index\n \"\n ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\n >&#xe90d;</i\n >\n <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\n j + 1\n }}</span\n >{{ approver.member_name }}</span\n >\n\n <button\n class=\"count\"\n *ngIf=\"level.approvers?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"labelName.popover()\"\n placement=\"left\"\n >\n +\n\n {{ level.approvers.slice(1).length }}\n </button>\n <app-popover #labelName [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let approver of level.approvers | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"remove('approvers', approver, i)\"\n >&#xe90d;</i\n >\n <span\n class=\"step\"\n *ngIf=\"level.name == 'SEQUENTIAL'\"\n >\n {{\n j == level.approvers.slice(1).length - 1\n ? \"Final\"\n : j + 2\n }}\n </span>\n {{ approver.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"\n activateSelector('approvers', true, level.name);\n approversListIndex = i\n \"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n <button\n class=\"close-btn\"\n (click)=\"remove('workflowLevel', level, i)\"\n >\n <i class=\"icons\">&#xe90d;</i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <p\n *ngIf=\"\n submitted &&\n !policyForm?.selectedApprovers?.length &&\n !policyApprovalFlag\n \"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select or create an approval workflow for this policy.\n </p>\n\n <label\n class=\"vx-control-panel\"\n *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\n ><button\n class=\"button\"\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n >\n + Add More Levels\n </button></label\n >\n </div>\n </div>\n </div>\n\n <!-- Who / now Attestation -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'assignees'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'assignees' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedAssignees?.length == 0 ||\n activeSelector === 'assignees'\n \"\n [src]=\"ASSETS.case_assignees\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedAssignees?.length > 0 &&\n activeSelector !== 'assignees'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Attestation</label>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\"\n *ngIf=\"\n (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\n (policyForm?.selectedAssignees?.length == 0 &&\n groupEnabled &&\n policyForm?.selectedGroupAssignee.length == 0)\n \"\n (click)=\"activateSelector('assignees', true)\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the persons responsible for attesting this policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n *ngIf=\"\n policyForm?.selectedAssignees?.length > 0 ||\n policyForm?.selectedGroupAssignee?.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees?.slice(0, 1)\n \"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('assignees', assignee)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"assignee.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ assignee.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"assigneePopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.selectedAssignees?.length > 1\"\n >\n +{{ policyForm?.selectedAssignees?.slice(1).length }}\n </button>\n </div>\n <ng-container *ngIf=\"groupEnabled\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove('assignees', policyForm?.selectedAssignees[0])\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.selectedAssignees[0]?.employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"UserPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.selectedAssignees.length > 1\"\n >\n +{{ policyForm?.selectedAssignees.length - 1 }}\n </button>\n </div>\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.selectedAssignees.length > 0 &&\n policyForm?.selectedGroupAssignee.length > 0\n \"\n >\n &\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove(\n 'groupAssignees',\n policyForm?.selectedGroupAssignee[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.selectedGroupAssignee[0]?.group_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.selectedGroupAssignee[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"group.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\n >\n +{{ policyForm?.selectedGroupAssignee.length - 1 }}\n </button>\n </div>\n </ng-container>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('assignees', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <p\n *ngIf=\"\n submitted &&\n ((policyForm?.selectedAssignees?.length == 0 &&\n policyForm?.frequency_details &&\n !groupEnabled) ||\n (policyForm?.selectedAssignees?.length == 0 &&\n policyForm.selectedGroupAssignee.length == 0 &&\n policyForm?.frequency_details &&\n groupEnabled) ||\n (isSendForAttestation &&\n policyForm?.selectedAssignees?.length === 0))\n \"\n id=\"whovalidatemsg\"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the persons required to attest to this Policy.\n </p>\n <app-cs-switch\n [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\n [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\n class=\"who-toggle\"\n >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'If selected, the readers will be required to attest this policy using their electronic signature.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n <app-popover #assigneePopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\n >&#xe90d;</i\n >\n {{ assignee.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #UserPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\n >&#xe90d;</i\n >\n {{ assignee.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #group [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.selectedGroupAssignee | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\n >&#xe90d;</i\n >\n {{ data.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n\n <!-- overseer -->\n <app-popover #overseerPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let overseer of policyForm?.CCEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\n >&#xe90d;</i\n >\n {{ overseer?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.CCGroupEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <!-- overseer end -->\n\n <!-- overseer fail start -->\n <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let overseer of policyForm?.CCFailEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\n >&#xe90d;</i\n >\n {{ overseer?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.CCFailEmailGroup | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"remove('ccGroupFailEmail', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <!-- overseer fail end -->\n </div>\n </div>\n </div>\n\n <!-- When -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'frequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'frequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">When?</label>\n\n <div\n *ngIf=\"policyForm?.frequency_details == ''\"\n class=\"select button-sec\"\n >\n <div\n class=\"custom-input frequency-custom-input\"\n (click)=\"activateSelector('frequency', true)\"\n >\n {{ frequencyPlaceholder }}\n </div>\n\n <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n Set A frequency\n </button>\n </div>\n <!-- <div\n *ngIf=\"policyForm?.frequency_details != ''\"\n class=\"selected button-sec\"\n > -->\n <div\n *ngIf=\"policyForm?.frequency_details != ''\"\n class=\"selected button-sec selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"remove('frequency', rc)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"frequencyPlaceholder\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ frequencyPlaceholder }}</span\n >\n </div>\n <button\n *ngIf=\"activeSelector !== 'frequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n <!-- </div>\n <span class=\"chip\">{{ frequencyPlaceholder }}</span>\n <button\n *ngIf=\"activeSelector !== 'frequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button> -->\n </div>\n <p\n *ngIf=\"\n submitted &&\n ((policyForm?.selectedAssignees?.length > 0 &&\n !policyForm?.frequency_details &&\n !groupEnabled) ||\n ((policyForm?.selectedAssignees?.length > 0 ||\n policyForm?.selectedGroupAssignee?.length > 0) &&\n !policyForm?.frequency_details &&\n groupEnabled))\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select an attestation schedule for this policy.\n </p>\n\n <!-- <label class=\"vx-control-panel\">Effective Date</label>\n <div class=\"date-time-picker\">\n <div class=\"picker-group\">\n <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\n [value]=\"policyForm.policyDueDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\n <i class=\"icons\">&#xe92d;</i>\n <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\n [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n </dp-date-picker>\n <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Checkpoints / Assessment of Understanding -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"true\"\n [class.active]=\"activeSelector === 'checkpoints'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'checkpoints' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">\n Assessment of Understanding\n <!-- <button *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\n (click)=\"activateSelector('checkpoints', true)\"\n >\n <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\n <div class=\"custom-input\">\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\n of the policy.\n </div>\n </div>\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\n >\n <!-- <div class=\"chip-container\">\n <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\n\n <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\n\n <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\n\n </div> -->\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('checkpoints', policyForm?.checkpointDetails)\"\n >&#xe9ae;</i\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\">{{\n policyForm?.checkpointDetails?.length +\n (policyForm?.checkpointDetails?.length > 1\n ? \" Questions\"\n : \" Question\")\n }}</span>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('checkpoints', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\n {{ checkpoint?.question }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover> -->\n </div>\n </div>\n </div>\n\n <!-- Risk Classification -->\n <div\n class=\"form-group-row\"\n *ngIf=\"showRiskClassification && false\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\n <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!policyForm?.riskRating\" />\n\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n *ngIf=\"policyForm?.riskRating\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Risk Classification</label>\n <div class=\"classification\">\n <label\n class=\"low\"\n *ngFor=\"let class of riskClassification\"\n [ngClass]=\"[class.class]\"\n >\n <input\n type=\"radio\"\n name=\"classification\"\n [value]=\"class.value\"\n [checked]=\"policyForm?.riskRating === class.value\"\n [(ngModel)]=\"policyForm.riskRating\"\n />\n <span>{{ class.name }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Responsibility Center -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addResponsibilityCenters\"\n [class.active]=\"activeSelector === 'rc'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'rc' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\n <img\n *ngIf=\"\n policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\n \"\n [src]=\"ASSETS.responsibility_center\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Responsibility Center</label>\n <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\n <input\n type=\"text\"\n (click)=\"activateSelector('rc', true)\"\n placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\n readonly\n />\n </div>\n\n <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('rc', rc)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"rc.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rc.item_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rcPopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.selectedRCs?.length > 1\"\n >\n +{{ policyForm?.selectedRCs?.slice(1).length }}\n </button>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('rc', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #rcPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rc of policyForm?.selectedRCs | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n {{ rc.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n\n <!-- Version -->\n <div\n *ngIf=\"policyForm.addVersion\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.disabled]=\"\n activeSelector && sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\n <img\n [src]=\"ASSETS.associated_risks\"\n alt=\"name\"\n *ngIf=\"!policyForm.policy_version\"\n />\n\n <svg\n *ngIf=\"policyForm.policy_version\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">VERSION</label>\n <input\n [(ngModel)]=\"policyForm.policy_version\"\n (change)=\"onVersion($event)\"\n type=\"text\"\n placeholder=\"Specify the policy version.\"\n />\n <p\n *ngIf=\"!isVersionValid\"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n {{ versionErrorMessage }}\n </p>\n </div>\n </div>\n </div>\n\n <!-- Reviewer -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addReviewers && false\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedReviewers?.length == 0 ||\n activeSelector === 'reviewer'\n \"\n [src]=\"ASSETS.reviewer\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedReviewers?.length > 0 &&\n activeSelector !== 'reviewer'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Reviewer </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('reviewer', true)\"\n placeholder=\"Select the person responsible for reviewing this policy\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('reviewer', reviewer)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"reviewer.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ reviewer.member_name }}</span\n >\n </ng-container>\n </div>\n\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length == 0 &&\n policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select a reviewer for this policy.\n </p>\n\n <label class=\"vx-control-panel\">When? </label>\n\n <div\n *ngIf=\"policyForm?.review_frequency_details == ''\"\n class=\"select button-sec\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n [placeholder]=\"reviewerFrequencyPlaceholder\"\n readonly\n />\n <button\n (click)=\"activateSelector('reviewerFrequency', true)\"\n type=\"button\"\n >\n Set A frequency\n </button>\n </div>\n <div\n *ngIf=\"policyForm?.review_frequency_details != ''\"\n class=\"selected button-sec\"\n >\n <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\n <button\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length > 0 &&\n !policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the review schedule for this policy.\n </p>\n\n <app-format-and-evidence\n (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\n #formatEvidence\n [mode]=\"'policyReviewer'\"\n [organization_id]=\"organization_id\"\n [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\n >\n </app-format-and-evidence>\n </div>\n </div>\n </div>\n\n <!-- Overseer -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addOverseers\"\n [class.active]=\"\n activeSelector === 'ccEmail' || activeSelector === 'ccFail'\n \"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'ccEmail' &&\n activeSelector !== 'ccFail' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"\n policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\n \"\n >\n <img\n *ngIf=\"\n (policyForm?.CCFailEmail?.length == 0 &&\n policyForm?.CCEmail?.length == 0) ||\n activeSelector === 'ccEmail' ||\n activeSelector === 'ccFail'\n \"\n [src]=\"ASSETS.oversight\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n (policyForm?.CCFailEmail?.length > 0 ||\n policyForm?.CCEmail?.length > 0) &&\n activeSelector !== 'ccEmail' &&\n activeSelector !== 'ccFail'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Oversight</label>\n <div\n class=\"select\"\n *ngIf=\"\n policyForm?.CCEmail?.length == 0 &&\n policyForm?.CCGroupEmail.length == 0\n \"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('ccEmail', true)\"\n placeholder=\"Who should have oversight of this policy?\"\n readonly\n />\n </div>\n <div\n class=\"selected\"\n *ngIf=\"\n policyForm?.CCEmail?.length > 0 ||\n policyForm?.CCGroupEmail.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccEmail', ccEmail)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"ccEmail.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ ccEmail.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"ccEmailPopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\n >\n +{{ policyForm?.CCEmail?.slice(1).length }}\n </button>\n </div>\n\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCEmail[0].employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"overseerPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\n >\n +{{ policyForm?.CCEmail?.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.CCEmail.length > 0 &&\n policyForm?.CCGroupEmail?.length > 0\n \"\n >\n &\n </div>\n\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"overseerGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\n >\n +{{ policyForm?.CCGroupEmail?.length - 1 }}\n </button>\n </div>\n </div>\n\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('ccEmail', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n\n <div\n class=\"select\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length == 0 &&\n policyForm?.CCFailEmailGroup?.length == 0\n \"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('ccFail', true)\"\n placeholder=\"Who should be notified if the policy is not attested on time?\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length > 0 ||\n policyForm?.CCFailEmailGroup?.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccFail', ccFail)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"ccFail.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ ccFail.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"ccFailPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\n >\n +{{ policyForm?.CCFailEmail?.slice(1).length }}\n </button>\n </div>\n\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"overseerFailPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\n >\n +{{ policyForm?.CCFailEmail?.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length > 0 &&\n policyForm?.CCFailEmailGroup?.length > 0\n \"\n >\n &\n </div>\n\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"overseerFailGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\n >\n +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\n </button>\n </div>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('ccFail', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let ccEmail of policyForm?.CCEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\n >&#xe90d;</i\n >\n {{ ccEmail.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let ccFail of policyForm?.CCFailEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\n >&#xe90d;</i\n >\n {{ ccFail.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n\n <!-- Related Documents -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addAssociatedDocuments\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\">\n <img\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\n [src]=\"ASSETS.format_evidence\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\n <app-format-and-evidence\n (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\n [mode]=\"'policy'\"\n [organization_id]=\"organization_id\"\n [formatEvidanceData]=\"policyForm?.associatedDocuments\"\n ></app-format-and-evidence>\n </div>\n </div>\n </div>\n\n <!-- Link Programs & Responsibilities -->\n <div\n *ngIf=\"policyForm?.addLinkProgram\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'linkProgram'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'linkProgram' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"\n policyForm?.programSelectedValues?.program?.category_id\n \"\n >\n <img\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n [src]=\"ASSETS.link_items\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\"\n >LINK PROGRAMS & RESPONSIBILITIES</label\n >\n <div\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n (click)=\"activateSelector('linkProgram', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select Programs & responsibilities that are<br />associated with\n this policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"\n remove('linkProgram', policyForm?.programSelectedValues)\n \"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.programSelectedValues?.program?.name }}</span\n >\n <!-- <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"programResponsibilityPopover.popover()\"\n placement=\"left\"\n >\n +4\n </button> -->\n </div>\n <app-popover\n #programResponsibilityPopover\n [dontCloseonClick]=\"true\"\n >\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"\n 'Reporting information security weaknesses'\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Reporting information security weaknesses\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('linkProgram', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Link Assessment -->\n <div\n *ngIf=\"policyForm.addLinkAssessment\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'isAssessment'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'isAssessment' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\n <img\n *ngIf=\"!policyForm?.assessment?.length\"\n [src]=\"ASSETS.assessments\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.assessment?.length\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\n <div\n *ngIf=\"policyForm?.assessment?.length === 0\"\n (click)=\"activateSelector('isAssessment', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select assessments that are associated with this<br />policy.\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm?.assessment?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\n }}</span\n >\n </div>\n <app-popover\n #programResponsibilityPopover\n [dontCloseonClick]=\"true\"\n >\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"\n assessment?.assessmentDetails?.assessment_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n {{ assessment?.assessmentDetails?.assessment_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n (click)=\"activateSelector('isAssessment', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Link Related Polices -->\n\n <div\n *ngIf=\"policyForm.addLinkPolicies\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === CONSTANTS.LINK_POLICY\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'isLinkedPolices' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"SelectedListOfPolicies\">\n <img\n *ngIf=\"!SelectedListOfPolicies?.length\"\n [src]=\"LINKS.linkedPolicyImage\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"SelectedListOfPolicies?.length\"\n class=\"checkIcon\"\n [xmlns]=\"LINKS.checked\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">LINK RELATED POLICIES</label>\n <div\n *ngIf=\"SelectedListOfPolicies?.length === 0\"\n (click)=\"activateSelector('isLinkedPolices', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select policies that are associated with this policy.\n </div>\n </div>\n\n <div class=\"selected\" *ngIf=\"SelectedListOfPolicies?.length > 0\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let policy of SelectedListOfPolicies.slice(0, 1)\"\n >\n <i\n (click)=\"remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policy?.contract_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policy?.contract_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n *ngIf=\"SelectedListOfPolicies?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"relatedPolicy.popover()\"\n placement=\"left\"\n >\n +{{ SelectedListOfPolicies?.slice(1).length }}\n </button>\n </div>\n <button\n *ngIf=\"activeSelector !== CONSTANTS.LINK_POLICY\"\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector(CONSTANTS.LINK_POLICY, true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let policy of SelectedListOfPolicies | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"\n remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\n \"\n >&#xe90d;</i\n >\n {{ policy?.contract_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-cs-switch\n [(ngValue)]=\"policyForm.isPortalDisplayEnabled\"\n [class.disabled]=\"policyForm?.LinkedPolicies == 0\"\n class=\"who-toggle\"\n >DISPLAY ON THE POLICY PORTAL\n <i\n class=\"icons\"\n [appTooltip]=\"CONSTANTS.LINK_POLICY_HELP_TEXT\"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n </div>\n </div>\n </div>\n\n <app-checkbox-list\n [config]=\"categoryConfig\"\n [twoColumn]=\"false\"\n [itemsList]=\"categoryList\"\n [selectedItems]=\"policyForm.selectedCategories\"\n [identifierKey]=\"'_id'\"\n [displayKey]=\"'item_name'\"\n [tooltipKey]=\"'item_name'\"\n *ngIf=\"activeSelector === 'category'\"\n (saveList)=\"saveSelectedList('category', $event)\"\n (closeList)=\"disableSelector()\"\n [loaded]=\"!categoriesListLoaded\"\n >\n </app-checkbox-list>\n <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\n [itemsList]=\"\"\n [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\n *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\n (closeList)=\"fieldDeselector('ISSUE_CC')\">\n</app-checkbox-list> -->\n\n <app-responsibility-centers-list\n *ngIf=\"activeSelector === 'rc'\"\n [responsibilityCentersList]=\"rcList\"\n [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\n [rcIdKey]=\"'item_id'\"\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n (closeRcList)=\"disableSelector()\"\n [loaded]=\"rcListLoaded\"\n >\n </app-responsibility-centers-list>\n\n <app-link-related-policies\n *ngIf=\"activeSelector === CONSTANTS.LINK_POLICY\"\n [policyId]=\"policyId\"\n [mode]=\"mode\"\n [selectedPolicies]=\"SelectedListOfPolicies\"\n (closeLinkPolicyList)=\"disableSelector()\"\n (selectedList)=\"saveSelectedList(CONSTANTS.LINK_POLICY, $event)\"\n ></app-link-related-policies>\n\n <app-users-radio-list\n *ngIf=\"activeSelector === 'reviewer'\"\n [itemEmailKey]=\"'member_email'\"\n [usersList]=\"allReviewers\"\n [headerText]=\"'Select a Reviewer'\"\n [selectedUsers]=\"policyForm.selectedReviewers\"\n [userIdKey]=\"'member_id'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-users-radio-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\n [usersList]=\"overseersList\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [selectedUsers]=\"policyForm.CCEmail\"\n [userIdKey]=\"'employee_id'\"\n [itemNameKey]=\"'employee_name'\"\n (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-owner-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"overseersList\"\n [groupList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.CCEmail\"\n [selectedGroups]=\"policyForm.CCGroupEmail\"\n (save)=\"saveSelectedList('ccEmail', $event)\"\n (cancel)=\"disableSelector()\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\n [usersList]=\"overseersList\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [selectedUsers]=\"policyForm.CCFailEmail\"\n [userIdKey]=\"'employee_id'\"\n [itemNameKey]=\"'employee_name'\"\n (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-owner-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"overseersList\"\n [groupList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.CCFailEmail\"\n [selectedGroups]=\"policyForm.CCFailEmailGroup\"\n (save)=\"saveSelectedList('ccFail', $event)\"\n (cancel)=\"disableSelector()\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-group-users-list\n *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\n [usersList]=\"assigneesList\"\n [groupsList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.selectedAssignees\"\n [userIdKey]=\"'my_member_id'\"\n (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-group-users-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"ownerlist\"\n [groupList]=\"overseerGroupsList\"\n (save)=\"saveSelectedList('assignees', $event)\"\n (cancel)=\"disableSelector()\"\n [selectedGroups]=\"policyForm.selectedGroupAssignee\"\n [selectedUsers]=\"policyForm.selectedAssignees\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'approvers' && false\"\n [listHeading]=\"'Select Approvers'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"true\"\n [selectedUsers]=\"\n addMoreLevels\n ? []\n : policyForm.selectedApprovers[approversListIndex].approvers\n \"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [reviewerWorkflowType]=\"workflowType\"\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n [workflowList]=\"workflowList\"\n [workflowText]=\"'Approval Workflow'\"\n >\n </app-owner-list>\n\n <app-frequency-container\n *ngIf=\"activeSelector === 'frequency'\"\n [mode]=\"'policy'\"\n [frequencyDetails]=\"frequencyDetails\"\n (selectedFrequency)=\"frequencyData($event)\"\n [feature]=\"feature\"\n [pageType]=\"'policy'\"\n (closeFrequency)=\"disableSelector()\"\n ></app-frequency-container>\n\n <app-frequency-container\n *ngIf=\"activeSelector === 'reviewerFrequency'\"\n [mode]=\"'reviewerFrequency'\"\n [frequencyDetails]=\"reviewerFrequencyDetails\"\n (selectedFrequency)=\"reviewerFrequencyData($event)\"\n [feature]=\"feature\"\n [pageType]=\"'policy'\"\n (closeFrequency)=\"disableSelector()\"\n ></app-frequency-container>\n\n <vc-link-program\n *ngIf=\"activeSelector === 'linkProgram'\"\n (close)=\"disableSelector()\"\n [policy]=\"policyForm\"\n [selectedProgram]=\"policyForm?.programSelectedValues\"\n [mode]=\"mode\"\n [selectedLinkProgram]=\"selectedLinkProgram\"\n (changeTab)=\"changeTab('linkedPrograms')\"\n (updatedProgramDetails)=\"updatedProgramDetails($event)\"\n >\n </vc-link-program>\n\n <app-checkpoints-policy-container\n (closeCheckPoint)=\"disableSelector()\"\n [checkpointData]=\"policyForm?.checkpointDetails\"\n [requiredPoint]=\"policyForm?.passingMarks\"\n *ngIf=\"activeSelector === 'checkpoints'\"\n (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\n ></app-checkpoints-policy-container>\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <app-approval-workflow\n *ngIf=\"enableApprovalWorkflow\"\n [selectedCategory]=\"policyForm?.selectedCategories\"\n [approverWorkFlowList]=\"approverWorkFlowList\"\n [allApprovers]=\"allApprovers\"\n (listCancelClicked)=\"listCancelClicked($event)\"\n (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\n (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\n [editApprovalWorkflow]=\"editApprovalWorkflow\"\n [createApprovalClick]=\"createApprovalClick\"\n (closeCreateClicked)=\"closeClickedCreateForm()\"\n [editWorkflowLevel]=\"editWorkflowLevel\"\n ></app-approval-workflow>\n <!-- <app-select-approvers></app-select-approvers> -->\n\n <app-policy-access\n *ngIf=\"activeSelector === 'policyAccess'\"\n [policyAccessType]=\"policyForm?.policy_access_type\"\n (close)=\"disableSelector()\"\n [orgUsersList]=\"usersList\"\n [usersAccessList]=\"usersAccessList\"\n [groupList]=\"overseerGroupsList\"\n [groupsAccessList]=\"groupsAccessList\"\n [selectedUsers]=\"policyForm?.policy_access_owners\"\n [selectedGroups]=\"policyForm?.policy_access_groups\"\n [disabledIds]=\"usersAccessListIds\"\n [disabledGroupIds]=\"groupsAccessListIds\"\n [futureUsersWillSelect]=\"policyForm?.availableOnPortal\"\n (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\n (setPolicyAccessType)=\"policyForm.policy_access_type = $event\"\n >\n </app-policy-access>\n</ng-container>\n<ng-container *ngIf=\"showCreateDocuments\">\n <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\n [organization_id]=\"organization_id\"\n [member_obj_id]=\"member_obj_id\"\n [userInfo]=\"userInfo\"\n [policyId]=\"policyId\"\n [policyName]=\"policyForm.policyName\"\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n (editPolicy)=\"editPolicyFromDocuments()\"\n ></app-create-documents> -->\n <lib-document-section\n *ngIf=\"showCreateDocuments\"\n [templateView]=\"templateView\"\n [organization_id]=\"organization_id\"\n [member_obj_id]=\"member_obj_id\"\n [userInfo]=\"userInfo\"\n [policyId]=\"policyId\"\n [feature]=\"feature\"\n [templateUrl]=\"templateUrl\"\n [policyName]=\"policyForm.policyName\"\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n (editPolicy)=\"editPolicyFromDocuments()\"\n (openTemplate)=\"templateView = true\"\n ></lib-document-section>\n</ng-container>\n\n<app-assessment-list\n *ngIf=\"activeSelector === 'isAssessment'\"\n [program_ids]=\"''\"\n [isEdit]=\"policyForm?.assessment?.length\"\n (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\n [selectedAssessment]=\"policyForm?.assessment[0]\"\n [mode]=\"'policy'\"\n (onAssessmentSelect)=\"\n onAssessmentSelect($event); saveSelectedList('isAssessment', false)\n \"\n></app-assessment-list>\n\n<app-owner-list\n *ngIf=\"activeSelector === 'approvers' && false\"\n [listHeading]=\"'Select Approvers'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"true\"\n [selectedUsers]=\"\n addMoreLevels\n ? []\n : policyForm.selectedApprovers[approversListIndex].approvers\n \"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [reviewerWorkflowType]=\"workflowType\"\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n [workflowList]=\"workflowList\"\n [workflowText]=\"'Approval Workflow'\"\n>\n</app-owner-list>\n\n<app-owner-list\n *ngIf=\"activeSelector === 'owners'\"\n [listHeading]=\"'Select Owner(s)'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"false\"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('owners', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [selectedUsers]=\"policyForm?.policy_owners ?? []\"\n>\n</app-owner-list>\n\n<app-select-template-list\n *ngIf=\"templateView\"\n [selectedCategoryId]=\"policyForm?.selectedCategories\"\n [feature]=\"feature\"\n (onTemplateSelect)=\"onTemplateSelect($event)\"\n></app-select-template-list>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}.who-toggle{margin-top:10px}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#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 #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#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:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#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[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset: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;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-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;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.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:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 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 input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#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;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#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 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#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 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!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 vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"], dependencies: [{ kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i4.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CsRadioComponent, selector: "app-cs-radio", inputs: ["disabled", "readonly", "name", "checked", "value", "oneLine"], outputs: ["checkedEvent"] }, { kind: "component", type: CsSwitchComponent, selector: "app-cs-switch", inputs: ["disabled", "ngValue", "value", "tooltipMessage", "position"], outputs: ["ngValueChange"] }, { kind: "directive", type: ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CsSelectComponent, selector: "cs-select", inputs: ["dropdownLabel", "dropdownSubLabel", "isRequired", "placeholder", "setMaxWidth"], outputs: ["valueChanged"] }, { kind: "component", type: CsOptionComponent, selector: "cs-option", inputs: ["value", "color", "backgroundColor", "optionTooltip"] }, { kind: "component", type: i5.DatePickerComponent, selector: "dp-date-picker", inputs: ["config", "mode", "placeholder", "disabled", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: LoaderInlineComponent, selector: "app-loader-inline" }, { kind: "component", type: UserGroupListComponent, selector: "user-group-list", inputs: ["groupEnabled", "panelTitle", "singleSelect", "selectedReviewer", "featureflag", "reviewerWorkflowType", "mode", "fieldType", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds", "FromProgram", "userListInfo", "groupListInfo", "fromApprovalWorkflow", "approvalType", "showFutureUsersSwitch", "futureUsersWillSelect", "isAllDisabled", "isGroupTabShow", "disabledIds", "nonRemovableUserIds", "allUserSelectedDisabled", "nonRemovableGroupIds", "loading", "userlist", "selectedUsers", "defaultSelectedUsers", "userType", "groupList", "selectedGroups"], outputs: ["save", "cancel", "reviewerWorkflowTypeChange", "fetchUserData"] }, { kind: "component", type: ResponsibilityCentersListComponent, selector: "app-responsibility-centers-list", inputs: ["responsibilityCentersList", "selectedResponsibilityCenters", "rcIdKey", "radioSelection", "pluralText", "singularText", "loaded"], outputs: ["saveSelectedList", "closeRcList"] }, { kind: "component", type: GroupUsersListComponent, selector: "app-group-users-list", inputs: ["groupsEnabled", "usersList", "groupsList", "selectedUsers", "userIdKey", "groupIdKey", "openedFrom", "selectedGroups", "assigneeGroupsList", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "loader", "isDisabledSelected"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: SelectTemplateListComponent, selector: "app-select-template-list", inputs: ["selectedCategoryId", "feature"], outputs: ["onTemplateSelect"] }, { kind: "component", type: FormatAndEvidenceComponent, selector: "app-format-and-evidence", inputs: ["mode", "categories", "organization_id", "formatEvidanceData"], outputs: ["updateFiles"] }, { kind: "component", type: CheckboxListComponent, selector: "app-checkbox-list", inputs: ["itemsList", "selectedItems", "identifierKey", "displayKey", "tooltipKey", "config", "twoColumn", "loaded"], outputs: ["closeList", "saveList"] }, { kind: "component", type: OwnerListComponent, selector: "app-owner-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "showWorkflow", "listHeading", "searchPlaceholder", "pluralText", "singularText", "reviewerWorkflowType", "mode", "noDataText", "workflowList", "workflowText", "disabledIds", "nonRemovableUsersList", "fromResponsibility", "assignorId", "assigneeIds", "reviewerIds", "overseerIds"], outputs: ["saveSelectedList", "closeUsersList", "reviewerWorkflowTypeChange"] }, { kind: "component", type: UserRadioListComponent, selector: "app-users-radio-list", inputs: ["usersList", "selectedUsers", "userIdKey", "itemNameKey", "itemEmailKey", "disabledId", "fromResponsibility", "reviewerIds", "overseerIds", "assignorId", "headerText", "loaded"], outputs: ["saveSelectedList", "closeUsersList"] }, { kind: "component", type: FrequencyContainerComponent, selector: "app-frequency-container", inputs: ["frequencyDetails", "mode", "feature", "pageType"], outputs: ["selectedFrequency", "closeFrequency"] }, { kind: "component", type: CheckpointsPolicyContainerComponent, selector: "app-checkpoints-policy-container", inputs: ["requiredPoint", "checkpointData"], outputs: ["closeCheckPoint", "saveCheckPoint"] }, { kind: "component", type: DocumentSectionComponent, selector: "lib-document-section", inputs: ["selectedDocumentType", "feature", "templateView", "policyId", "policyName", "organization_id", "member_obj_id", "userInfo", "templateUrl"], outputs: ["disconnectRefresh", "editPolicy", "openTemplate"] }, { kind: "component", type: AssessmentListComponent, selector: "app-assessment-list", inputs: ["isEdit", "mode", "selectedAssessment", "selectedAssessmentData", "program_ids"], outputs: ["onAssessmentSelect", "cancelAssessment"] }, { kind: "component", type: ApprovalWorkflowComponent, selector: "app-approval-workflow", inputs: ["approverWorkFlowList", "allApprovers", "selectedCategory", "editApprovalWorkflow", "createApprovalClick", "editWorkflowLevel"], outputs: ["selectedWorkflowNext", "listCancelClicked", "saveApprovalWorkflow", "closeCreateClicked"] }, { kind: "component", type: PolicyAccessComponent, selector: "app-policy-access", inputs: ["policyAccessType", "SelectedCategory", "orgUsersList", "groupList", "selectedUsers", "selectedGroups", "disabledIds", "usersAccessList", "groupsAccessList", "disabledGroupIds", "futureUsersWillSelect"], outputs: ["close", "saveCheckPoint", "setPolicyAccessType"] }, { kind: "component", type: LinkProgramComponent, selector: "vc-link-program", inputs: ["policy", "currentTab", "mode", "programsList", "selectedProgram", "selectedCategories", "selectedLinkProgram", "hideProgramsList"], outputs: ["changeTab", "updatedProgramDetails", "save", "close", "refreshLinkedPolicies"] }, { kind: "component", type: LinkRelatedPoliciesComponent, selector: "app-link-related-policies", inputs: ["selectedPolicies", "mode", "policyId"], outputs: ["closeLinkPolicyList", "selectedList"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
39163
39204
  }
39164
39205
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WorkflowPolicyComponent, decorators: [{
39165
39206
  type: Component,
39166
- args: [{ selector: 'app-workflow-policy', template: "<!-- <p>workflow-policy works!</p> -->\n\n<ng-container *ngIf=\"!showCreateDocuments\">\n <div class=\"workflow-policy\">\n <!-- Policy Name -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\n <img\n [src]=\"ASSETS.what\"\n alt=\"name\"\n *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\n />\n\n <svg\n *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">\n Policy Name <span class=\"required\">*</span>\n </label>\n <input\n type=\"text\"\n (keydown)=\"activeSelector = 'name'\"\n (focusin)=\"activateSelector('name', true)\"\n *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\n (focusout)=\"activateSelector('name', false)\"\n [ngModel]=\"policyForm.policyName\"\n (ngModelChange)=\"policyForm.policyName = changeName($event)\"\n placeholder=\"Name this policy\"\n />\n <div\n class=\"selected\"\n *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\n >\n <div class=\"chip-container\">\n <span class=\"value\">{{ policyForm.policyName }}</span>\n </div>\n <button\n class=\"edit\"\n (click)=\"activateSelector('name', true)\"\n type=\"button\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n\n <p\n *ngIf=\"submitted && !policyForm.policyName.trim()\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Please enter a name for this policy.\n </p>\n <vcomply-editor\n [(ngModel)]=\"policyForm.policyNotes\"\n [editorConfig]=\"description\"\n ></vcomply-editor>\n <!-- <app-cs-switch\n [(ngValue)]=\"policyForm.availableOnPortal\"\n (ngValueChange)=\"availabilityOnPortal($event)\"\n >\n Do you want this policy to be available on the portal?\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe932;</i\n >\n </app-cs-switch>\n <app-cs-switch\n *ngIf=\"policyForm.availableOnPortal\"\n [(ngValue)]=\"policyForm.acceptSuggestions\"\n >\n Accept suggestions\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe932;</i\n ></app-cs-switch> -->\n </div>\n </div>\n </div>\n\n <!-- Policy Category -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'category'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'category' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedCategories?.length == 0 ||\n activeSelector === 'category'\n \"\n [src]=\"ASSETS.case_category\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedCategories?.length > 0 &&\n activeSelector !== 'category'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\"\n >Policy Category <span class=\"required\">*</span>\n </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.selectedCategories?.length == 0\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('category', true)\"\n placeholder=\"Select a category for this policy.\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.selectedCategories?.length > 0\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"\n let category of policyForm?.selectedCategories?.slice(0, 1)\n \"\n >\n <i\n (click)=\"remove('category', category)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"category.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ category.item_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n *ngIf=\"policyForm?.selectedCategories?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"category.popover()\"\n placement=\"left\"\n >\n +{{ policyForm?.selectedCategories?.slice(1).length }}\n </button>\n </div>\n\n <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\n [class.plus]=\"policyForm?.selectedCategories?.length>2\">\n <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\n class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\n {{category.item_name}}</span>\n <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\n appPopover (click)=\"category.popover()\" placement=\"right\">+\n {{policyForm?.selectedCategories?.slice(2).length}}</button>\n </div> -->\n <button\n *ngIf=\"activeSelector !== 'category'\"\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('category', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #category [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let category of policyForm?.selectedCategories | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('category', category)\"\n >&#xe90d;</i\n >\n {{ category.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <p\n *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Please select the category for this policy.\n </p>\n </div>\n\n <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\n <ng-container *ngFor=\"let tag of policyForm?.customTags\">\n <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\n <input\n type=\"text\"\n [(ngModel)]=\"tag.value\"\n placeholder=\"{{ tag.tagname }}\"\n />\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Effective Date -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"false\">\n <img [src]=\"ASSETS.when\" alt=\"\" />\n\n <svg\n *ngIf=\"false\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Effective Date</label>\n <div class=\"date-time-picker\">\n <div class=\"picker-group\">\n <input\n type=\"text\"\n readonly\n placeholder=\"Select the effective date of the policy.\"\n [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\n (click)=\"openDatePicker()\"\n id=\"effective-date\"\n />\n <i class=\"icons\">&#xe92d;</i>\n <dp-date-picker\n #datePicker\n (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\n [config]=\"dateConfig\"\n [(ngModel)]=\"policyForm.policyDueDate\"\n >\n </dp-date-picker>\n <div\n class=\"vx-overlay\"\n (click)=\"closeDatePicker($event)\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Policy Owner -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'owners'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'owners' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\n <img\n *ngIf=\"!policyForm.policy_owners?.length\"\n [src]=\"ASSETS.im_creating\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm.policy_owners?.length\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\n </div>\n <div\n *ngIf=\"!policyForm.policy_owners?.length\"\n (click)=\"activateSelector('owners', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select owners for this policy.\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm.policy_owners?.length\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.policy_owners[0]?.member_name }}</span\n >\n\n <button\n *ngIf=\"policyForm?.policy_owners?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"policyUserPopover.popover()\"\n placement=\"left\"\n >\n + {{ policyForm?.policy_owners.length - 1 }}\n </button>\n </div>\n <div\n *ngIf=\"false\"\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\n >\n &\n </div>\n <div\n *ngIf=\"false\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >Samantha Jones</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"policyGroupPopover.popover()\"\n placement=\"right\"\n >\n +4\n </button>\n </div>\n <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let owner of policyForm?.policy_owners | slice : 1;\n let i = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"owner?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n (click)=\"remove('owners', owner, i + 1)\"\n class=\"icons\"\n >&#xe90d;</i\n >\n {{ owner?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"'Harshvardhan Kariwala'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Harshvardhan Kariwala\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <button\n (click)=\"activateSelector('owners', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <p\n *ngIf=\"submitted && !policyForm?.policy_owners?.length\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select owners for this policy.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Review -->\n <div\n class=\"form-group-row\"\n [class.active]=\"\n activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\n \"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\n <img *ngIf=\"!policyForm?.addReviewers\" src=\"ASSETS.reviewer\" alt=\"\" />\n\n <svg\n *ngIf=\"policyForm?.addReviewers\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">REVIEW</label>\n <div\n class=\"reviewSelection vx-p-3 vx-pb-0\"\n [class.disabled]=\"\n activeSelector && sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\n Does this policy need to be reviewed?\n </div>\n <app-cs-radio\n name=\"review-type\"\n [checked]=\"policyForm?.addReviewers\"\n (checkedEvent)=\"typeSelected(true)\"\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n YES\n </div></app-cs-radio\n >\n <app-cs-radio\n name=\"review-type\"\n [checked]=\"!policyForm?.addReviewers\"\n (checkedEvent)=\"typeSelected(false)\"\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n NO\n </div></app-cs-radio\n >\n </div>\n\n <ng-container *ngIf=\"policyForm?.addReviewers\">\n <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\n [appScrollInView]=\"scrollToBottom\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n sideSelectorElements.includes(activeSelector)\n \"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the person responsible for reviewing this policy\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\n >\n <i\n (click)=\"remove('reviewer', reviewer)\"\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ reviewer?.member_name }}</span\n >\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n *ngIf=\"activeSelector !== 'reviewer'\"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\n <div\n *ngIf=\"policyForm?.review_frequency_details == ''\"\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n >\n <div\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n When does this policy needs to be reviewed?\n </div>\n <div\n (click)=\"activateSelector('reviewerFrequency', true)\"\n class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\n >\n SET A FREQUENCY\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm?.review_frequency_details != ''\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\n >\n <div\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n [appTooltip]=\"reviewerFrequencyPlaceholder\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ reviewerFrequencyPlaceholder }}\n </div>\n <button\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length > 0 &&\n !policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the review schedule for this policy.\n </p>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- New Approval Workflow -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'approvers'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'approvers' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedApprovers?.length == 0 ||\n activeSelector === 'approvers'\n \"\n [src]=\"ASSETS.approval\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedApprovers?.length > 0 &&\n activeSelector !== 'approvers'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\"\n >APPROVAL <span class=\"required\">*</span></label\n >\n <button\n (click)=\"\n createApprovalWorkflow(); activateSelector('approvers', true)\n \"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\n >\n CREATE A NEW APPROVAL WORKFLOW\n </button>\n </div>\n <div\n *ngIf=\"\n selectedWorkflow?.length === 0 ||\n !selectedWorkflow[0]?.workflow_name\n \"\n (click)=\"\n clickApprovalWorkflow(true); activateSelector('approvers', true)\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the approval workflow for this policy\n </div>\n </div>\n <div\n *ngIf=\"\n selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\"\n >\n <div\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"removeWorkflow()\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ selectedWorkflow[0]?.workflow_name }}</span\n >\n </div>\n <button\n (click)=\"editWorkflow(selectedWorkflow[0])\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\n <div\n *ngFor=\"\n let approval of selectedWorkflow[0]?.approval_workflow;\n let approvalIndex = index\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"level-left vx-d-flex vx-align-center\">\n <div class=\"vx-d-block\">\n <div\n class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\n [appTooltip]=\"\n approval?.alias_name\n ? approval?.alias_name\n : approval?.level1\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{\n approval?.alias_name\n ? approval?.alias_name\n : approval?.level1\n }}\n </div>\n <div\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\n >\n {{\n approval?.type === \"ROUNDROBIN\"\n ? \"ROUND-ROBIN\"\n : approval?.type === \"ANYONE\"\n ? \"ANY ONE\"\n : approval?.type\n }}\n </div>\n </div>\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\n >\n <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n > -->\n <div\n *ngIf=\"\n approval?.type?.toLowerCase() === 'sequential' &&\n approval?.approvers?.length < 2\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >\n {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\n </div>\n <div\n *ngIf=\"\n approval?.approvers?.length > 1 &&\n approval?.type?.toLowerCase() === 'sequential'\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >\n 1\n </div>\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"approval?.approvers[0]?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ approval?.approvers[0]?.member_name }}</span\n >\n <button\n *ngIf=\"approval?.approvers?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"workflowPopover.popover()\"\n placement=\"right\"\n >\n +{{ approval?.approvers?.length - 1 }}\n </button>\n </div>\n <app-popover #workflowPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let approver of approval?.approvers | slice : 1;\n let approvalIndex = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"approver?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <!-- <i class=\"icons\">&#xe90d;</i> -->\n <span\n *ngIf=\"\n approval?.type?.toLowerCase() === 'sequential'\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >{{\n approvalIndex + 1 ===\n approval?.approvers?.length - 1\n ? \"Final\"\n : approvalIndex + 2\n }}</span\n >\n {{ approver?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <!-- <div class=\"vx-d-flex vx-align-center\">\n <button (click)=\"editLevelClicked(approval,approvalIndex)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n <button (click)=\"deleteLevel(approvalIndex)\"\n class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\n </button>\n </div> -->\n </div>\n </ng-container>\n <p\n *ngIf=\"\n submitted &&\n !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\n !policyApprovalFlag &&\n !policyForm?.selectedApprovers[0]?.approvers?.length\n \"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select or create an approval workflow for this policy.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Policy Access -->\n <div\n *ngIf=\"true\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'policyAccess'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'policyAccess' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"true\">\n <img\n *ngIf=\"\n !policyForm?.policy_access_owners?.length &&\n !policyForm?.policy_access_groups?.length &&\n !policyForm?.availableOnPortal\n \"\n [src]=\"ASSETS.lock_scope\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length ||\n policyForm?.availableOnPortal\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\n </div>\n <div\n *ngIf=\"\n !policyForm?.policy_access_owners?.length &&\n !policyForm?.policy_access_groups?.length &&\n !policyForm?.availableOnPortal\n \"\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Who should be able to view this policy?\n </div>\n </div>\n\n <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3\"\n *ngIf=\"\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length\n \"\n >\n <div\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div\n *ngIf=\"policyForm?.policy_access_owners?.length\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"\n remove(\n 'policyAccess',\n policyForm?.policy_access_owners[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.policy_access_owners[0]?.employee_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm?.policy_access_owners[0]?.employee_name\n }}</span\n >\n <button\n *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"policyAccessPopover.popover()\"\n placement=\"left\"\n >\n +{{ policyForm?.policy_access_owners.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.policy_access_owners.length > 0 &&\n policyForm?.policy_access_groups.length > 0\n \"\n >\n &\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.policy_access_groups.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"\n remove(\n 'accessGroup',\n policyForm?.policy_access_groups[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.policy_access_groups[0]?.group_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm?.policy_access_groups[0]?.group_name\n }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"accessGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.policy_access_groups.length > 1\"\n >\n +{{ policyForm?.policy_access_groups.length - 1 }}\n </button>\n </div>\n\n <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let user of policyForm?.policy_access_owners\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"user?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"remove('policyAccess', user)\"\n >&#xe90d;</i\n >\n {{ user?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #accessGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.policy_access_groups\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"remove('accessGroup', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <!-- <div class=\"vx-mt-4 vx-mb-2\">\n <app-cs-radio\n [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\n Everyone who has access to this Policy Category\n </div></app-cs-radio\n >\n <app-cs-radio\n [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\n class=\"vx-mt-1\"\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\n Select users/groups\n </div></app-cs-radio\n >\n </div> -->\n </div>\n </ng-container>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.availableOnPortal\"\n >\n <span class=\"vx-fs-13 vx-paragraph-txt\"\n >Visible to All Current & Future Users</span\n >\n\n <button\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"edit vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <div class=\"vx-mt-2\">\n <app-cs-switch\n *ngIf=\"\n policyForm.availableOnPortal ||\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length\n \"\n [(ngValue)]=\"policyForm.acceptSuggestions\"\n >ACCEPT SUGGESTIONS\n <i\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\n [appTooltip]=\"\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n \"\n placement=\"bottom-right\"\n delay=\"0\"\n type=\"white\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n </div>\n </div>\n </div>\n\n <!-- Attestations -->\n <div\n class=\"form-group-row\"\n [class.active]=\"false\"\n [class.disabled]=\"false\"\n *ngIf=\"false\"\n >\n <div class=\"left\" [class.checked]=\"false\">\n <img [src]=\"ASSETS.attestations\" alt=\"\" />\n\n <svg\n *ngIf=\"false\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">ATTESTATIONS</label>\n </div>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the persons required to attest to this Policy\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >Samantha Jones</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"policyAttestationPopover.popover()\"\n placement=\"left\"\n >\n +4\n </button>\n </div>\n <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"'Harshvardhan Kariwala'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Harshvardhan Kariwala\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <div class=\"vx-mt-2\">\n <app-cs-switch\n >REQUIRES E-SIGNATURE FOR ATTESTATION\n <i\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\n [appTooltip]=\"\n 'Requires e-signature for attestation info text here...'\n \"\n placement=\"bottom-right\"\n delay=\"0\"\n type=\"white\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n\n <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\n <div\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n What is the attestation schedule for this<br />policy?\n </div>\n <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\n SET A FREQUENCY\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\n Every Wednesday by 11:59 pm\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <label class=\"vx-control-panel vx-mt-2\"\n >ASSESSMENT OF UNDERSTANDING</label\n >\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\n of the policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Approval Workflow -->\n <div\n class=\"form-group-row\"\n *ngIf=\"false\"\n [class.active]=\"activeSelector === 'approvers'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'approvers' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedApprovers?.length == 0 ||\n activeSelector === 'approvers'\n \"\n [src]=\"ASSETS.approval\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedApprovers?.length > 0 &&\n activeSelector !== 'approvers'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div\n class=\"vx-form-group approval-workflow\"\n [class.disabled]=\"policyApprovalFlag !== 0\"\n >\n <label class=\"vx-control-panel\">\n Approval workflow <span class=\"required\">*</span>\n <button\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n class=\"button\"\n >\n Create a new Approval Workflow\n </button>\n </label>\n <div\n class=\"select\"\n [class.disabled]=\"approverWorkFlowList?.length == 0\"\n *ngIf=\"\n policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\n policyForm?.selectedApprovers.length == 0\n \"\n >\n <cs-select\n [ngModel]=\"selectedApprovalWorkflow\"\n (ngModelChange)=\"selectedWorkflowChange($event)\"\n [placeholder]=\"'Select approval workflow for this policy'\"\n name=\"selectedApprovalWorkflow\"\n [setMaxWidth]=\"true\"\n >\n <cs-option\n *ngFor=\"let data of approverWorkFlowList\"\n [value]=\"data\"\n >\n {{ data.workflow_name }}\n </cs-option>\n <cs-option\n [value]=\"-1\"\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n >Create a new approval workflow</cs-option\n >\n </cs-select>\n </div>\n <ng-container\n *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\n >\n <div\n class=\"selected\"\n *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\n >\n <div class=\"workflow-label\">\n <p class=\"title\">Level {{ i + 1 }}</p>\n <p class=\"description\">{{ level.name }}</p>\n </div>\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"chip-container\">\n <span\n class=\"chip\"\n *ngFor=\"\n let approver of level.approvers.slice(0, 1);\n let j = index\n \"\n ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\n >&#xe90d;</i\n >\n <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\n j + 1\n }}</span\n >{{ approver.member_name }}</span\n >\n\n <button\n class=\"count\"\n *ngIf=\"level.approvers?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"labelName.popover()\"\n placement=\"left\"\n >\n +\n\n {{ level.approvers.slice(1).length }}\n </button>\n <app-popover #labelName [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let approver of level.approvers | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"remove('approvers', approver, i)\"\n >&#xe90d;</i\n >\n <span\n class=\"step\"\n *ngIf=\"level.name == 'SEQUENTIAL'\"\n >\n {{\n j == level.approvers.slice(1).length - 1\n ? \"Final\"\n : j + 2\n }}\n </span>\n {{ approver.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"\n activateSelector('approvers', true, level.name);\n approversListIndex = i\n \"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n <button\n class=\"close-btn\"\n (click)=\"remove('workflowLevel', level, i)\"\n >\n <i class=\"icons\">&#xe90d;</i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <p\n *ngIf=\"\n submitted &&\n !policyForm?.selectedApprovers?.length &&\n !policyApprovalFlag\n \"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select or create an approval workflow for this policy.\n </p>\n\n <label\n class=\"vx-control-panel\"\n *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\n ><button\n class=\"button\"\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n >\n + Add More Levels\n </button></label\n >\n </div>\n </div>\n </div>\n\n <!-- Who / now Attestation -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'assignees'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'assignees' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedAssignees?.length == 0 ||\n activeSelector === 'assignees'\n \"\n [src]=\"ASSETS.case_assignees\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedAssignees?.length > 0 &&\n activeSelector !== 'assignees'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Attestation</label>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\"\n *ngIf=\"\n (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\n (policyForm?.selectedAssignees?.length == 0 &&\n groupEnabled &&\n policyForm?.selectedGroupAssignee.length == 0)\n \"\n (click)=\"activateSelector('assignees', true)\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the persons responsible for attesting this policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n *ngIf=\"\n policyForm?.selectedAssignees?.length > 0 ||\n policyForm?.selectedGroupAssignee?.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees?.slice(0, 1)\n \"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('assignees', assignee)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"assignee.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ assignee.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"assigneePopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.selectedAssignees?.length > 1\"\n >\n +{{ policyForm?.selectedAssignees?.slice(1).length }}\n </button>\n </div>\n <ng-container *ngIf=\"groupEnabled\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove('assignees', policyForm?.selectedAssignees[0])\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.selectedAssignees[0]?.employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"UserPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.selectedAssignees.length > 1\"\n >\n +{{ policyForm?.selectedAssignees.length - 1 }}\n </button>\n </div>\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.selectedAssignees.length > 0 &&\n policyForm?.selectedGroupAssignee.length > 0\n \"\n >\n &\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove(\n 'groupAssignees',\n policyForm?.selectedGroupAssignee[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.selectedGroupAssignee[0]?.group_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.selectedGroupAssignee[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"group.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\n >\n +{{ policyForm?.selectedGroupAssignee.length - 1 }}\n </button>\n </div>\n </ng-container>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('assignees', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <p\n *ngIf=\"\n submitted &&\n ((policyForm?.selectedAssignees?.length == 0 &&\n policyForm?.frequency_details &&\n !groupEnabled) ||\n (policyForm?.selectedAssignees?.length == 0 &&\n policyForm.selectedGroupAssignee.length == 0 &&\n policyForm?.frequency_details &&\n groupEnabled) ||\n (isSendForAttestation &&\n policyForm?.selectedAssignees?.length === 0))\n \"\n id=\"whovalidatemsg\"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the persons required to attest to this Policy.\n </p>\n <app-cs-switch\n [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\n [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\n class=\"who-toggle\"\n >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'If selected, the readers will be required to attest this policy using their electronic signature.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n <app-popover #assigneePopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\n >&#xe90d;</i\n >\n {{ assignee.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #UserPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\n >&#xe90d;</i\n >\n {{ assignee.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #group [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.selectedGroupAssignee | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\n >&#xe90d;</i\n >\n {{ data.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n\n <!-- overseer -->\n <app-popover #overseerPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let overseer of policyForm?.CCEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\n >&#xe90d;</i\n >\n {{ overseer?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.CCGroupEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <!-- overseer end -->\n\n <!-- overseer fail start -->\n <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let overseer of policyForm?.CCFailEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\n >&#xe90d;</i\n >\n {{ overseer?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.CCFailEmailGroup | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"remove('ccGroupFailEmail', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <!-- overseer fail end -->\n </div>\n </div>\n </div>\n\n <!-- When -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'frequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'frequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">When?</label>\n\n <div\n *ngIf=\"policyForm?.frequency_details == ''\"\n class=\"select button-sec\"\n >\n <div\n class=\"custom-input frequency-custom-input\"\n (click)=\"activateSelector('frequency', true)\"\n >\n {{ frequencyPlaceholder }}\n </div>\n\n <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n Set A frequency\n </button>\n </div>\n <!-- <div\n *ngIf=\"policyForm?.frequency_details != ''\"\n class=\"selected button-sec\"\n > -->\n <div\n *ngIf=\"policyForm?.frequency_details != ''\"\n class=\"selected button-sec selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"remove('frequency', rc)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"frequencyPlaceholder\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ frequencyPlaceholder }}</span\n >\n </div>\n <button\n *ngIf=\"activeSelector !== 'frequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n <!-- </div>\n <span class=\"chip\">{{ frequencyPlaceholder }}</span>\n <button\n *ngIf=\"activeSelector !== 'frequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button> -->\n </div>\n <p\n *ngIf=\"\n submitted &&\n ((policyForm?.selectedAssignees?.length > 0 &&\n !policyForm?.frequency_details &&\n !groupEnabled) ||\n ((policyForm?.selectedAssignees?.length > 0 ||\n policyForm?.selectedGroupAssignee?.length > 0) &&\n !policyForm?.frequency_details &&\n groupEnabled))\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select an attestation schedule for this policy.\n </p>\n\n <!-- <label class=\"vx-control-panel\">Effective Date</label>\n <div class=\"date-time-picker\">\n <div class=\"picker-group\">\n <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\n [value]=\"policyForm.policyDueDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\n <i class=\"icons\">&#xe92d;</i>\n <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\n [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n </dp-date-picker>\n <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Checkpoints / Assessment of Understanding -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"true\"\n [class.active]=\"activeSelector === 'checkpoints'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'checkpoints' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">\n Assessment of Understanding\n <!-- <button *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\n (click)=\"activateSelector('checkpoints', true)\"\n >\n <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\n <div class=\"custom-input\">\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\n of the policy.\n </div>\n </div>\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\n >\n <!-- <div class=\"chip-container\">\n <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\n\n <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\n\n <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\n\n </div> -->\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('checkpoints', policyForm?.checkpointDetails)\"\n >&#xe9ae;</i\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\">{{\n policyForm?.checkpointDetails?.length +\n (policyForm?.checkpointDetails?.length > 1\n ? \" Questions\"\n : \" Question\")\n }}</span>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('checkpoints', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\n {{ checkpoint?.question }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover> -->\n </div>\n </div>\n </div>\n\n <!-- Risk Classification -->\n <div\n class=\"form-group-row\"\n *ngIf=\"showRiskClassification && false\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\n <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!policyForm?.riskRating\" />\n\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n *ngIf=\"policyForm?.riskRating\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Risk Classification</label>\n <div class=\"classification\">\n <label\n class=\"low\"\n *ngFor=\"let class of riskClassification\"\n [ngClass]=\"[class.class]\"\n >\n <input\n type=\"radio\"\n name=\"classification\"\n [value]=\"class.value\"\n [checked]=\"policyForm?.riskRating === class.value\"\n [(ngModel)]=\"policyForm.riskRating\"\n />\n <span>{{ class.name }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Responsibility Center -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addResponsibilityCenters\"\n [class.active]=\"activeSelector === 'rc'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'rc' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\n <img\n *ngIf=\"\n policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\n \"\n [src]=\"ASSETS.responsibility_center\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Responsibility Center</label>\n <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\n <input\n type=\"text\"\n (click)=\"activateSelector('rc', true)\"\n placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\n readonly\n />\n </div>\n\n <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('rc', rc)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"rc.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rc.item_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rcPopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.selectedRCs?.length > 1\"\n >\n +{{ policyForm?.selectedRCs?.slice(1).length }}\n </button>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('rc', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #rcPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rc of policyForm?.selectedRCs | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n {{ rc.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n\n <!-- Version -->\n <div\n *ngIf=\"policyForm.addVersion\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.disabled]=\"\n activeSelector && sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\n <img\n [src]=\"ASSETS.associated_risks\"\n alt=\"name\"\n *ngIf=\"!policyForm.policy_version\"\n />\n\n <svg\n *ngIf=\"policyForm.policy_version\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">VERSION</label>\n <input\n [(ngModel)]=\"policyForm.policy_version\"\n (change)=\"onVersion($event)\"\n type=\"text\"\n placeholder=\"Specify the policy version.\"\n />\n <p\n *ngIf=\"!isVersionValid\"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n {{ versionErrorMessage }}\n </p>\n </div>\n </div>\n </div>\n\n <!-- Reviewer -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addReviewers && false\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedReviewers?.length == 0 ||\n activeSelector === 'reviewer'\n \"\n [src]=\"ASSETS.reviewer\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedReviewers?.length > 0 &&\n activeSelector !== 'reviewer'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Reviewer </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('reviewer', true)\"\n placeholder=\"Select the person responsible for reviewing this policy\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('reviewer', reviewer)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"reviewer.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ reviewer.member_name }}</span\n >\n </ng-container>\n </div>\n\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length == 0 &&\n policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select a reviewer for this policy.\n </p>\n\n <label class=\"vx-control-panel\">When? </label>\n\n <div\n *ngIf=\"policyForm?.review_frequency_details == ''\"\n class=\"select button-sec\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n [placeholder]=\"reviewerFrequencyPlaceholder\"\n readonly\n />\n <button\n (click)=\"activateSelector('reviewerFrequency', true)\"\n type=\"button\"\n >\n Set A frequency\n </button>\n </div>\n <div\n *ngIf=\"policyForm?.review_frequency_details != ''\"\n class=\"selected button-sec\"\n >\n <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\n <button\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length > 0 &&\n !policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the review schedule for this policy.\n </p>\n\n <app-format-and-evidence\n (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\n #formatEvidence\n [mode]=\"'policyReviewer'\"\n [organization_id]=\"organization_id\"\n [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\n >\n </app-format-and-evidence>\n </div>\n </div>\n </div>\n\n <!-- Overseer -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addOverseers\"\n [class.active]=\"\n activeSelector === 'ccEmail' || activeSelector === 'ccFail'\n \"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'ccEmail' &&\n activeSelector !== 'ccFail' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"\n policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\n \"\n >\n <img\n *ngIf=\"\n (policyForm?.CCFailEmail?.length == 0 &&\n policyForm?.CCEmail?.length == 0) ||\n activeSelector === 'ccEmail' ||\n activeSelector === 'ccFail'\n \"\n [src]=\"ASSETS.oversight\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n (policyForm?.CCFailEmail?.length > 0 ||\n policyForm?.CCEmail?.length > 0) &&\n activeSelector !== 'ccEmail' &&\n activeSelector !== 'ccFail'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Oversight</label>\n <div\n class=\"select\"\n *ngIf=\"\n policyForm?.CCEmail?.length == 0 &&\n policyForm?.CCGroupEmail.length == 0\n \"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('ccEmail', true)\"\n placeholder=\"Who should have oversight of this policy?\"\n readonly\n />\n </div>\n <div\n class=\"selected\"\n *ngIf=\"\n policyForm?.CCEmail?.length > 0 ||\n policyForm?.CCGroupEmail.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccEmail', ccEmail)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"ccEmail.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ ccEmail.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"ccEmailPopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\n >\n +{{ policyForm?.CCEmail?.slice(1).length }}\n </button>\n </div>\n\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCEmail[0].employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"overseerPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\n >\n +{{ policyForm?.CCEmail?.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.CCEmail.length > 0 &&\n policyForm?.CCGroupEmail?.length > 0\n \"\n >\n &\n </div>\n\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"overseerGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\n >\n +{{ policyForm?.CCGroupEmail?.length - 1 }}\n </button>\n </div>\n </div>\n\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('ccEmail', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n\n <div\n class=\"select\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length == 0 &&\n policyForm?.CCFailEmailGroup?.length == 0\n \"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('ccFail', true)\"\n placeholder=\"Who should be notified if the policy is not attested on time?\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length > 0 ||\n policyForm?.CCFailEmailGroup?.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccFail', ccFail)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"ccFail.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ ccFail.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"ccFailPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\n >\n +{{ policyForm?.CCFailEmail?.slice(1).length }}\n </button>\n </div>\n\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"overseerFailPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\n >\n +{{ policyForm?.CCFailEmail?.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length > 0 &&\n policyForm?.CCFailEmailGroup?.length > 0\n \"\n >\n &\n </div>\n\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"overseerFailGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\n >\n +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\n </button>\n </div>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('ccFail', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let ccEmail of policyForm?.CCEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\n >&#xe90d;</i\n >\n {{ ccEmail.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let ccFail of policyForm?.CCFailEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\n >&#xe90d;</i\n >\n {{ ccFail.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n\n <!-- Related Documents -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addAssociatedDocuments\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\">\n <img\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\n [src]=\"ASSETS.format_evidence\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\n <app-format-and-evidence\n (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\n [mode]=\"'policy'\"\n [organization_id]=\"organization_id\"\n [formatEvidanceData]=\"policyForm?.associatedDocuments\"\n ></app-format-and-evidence>\n </div>\n </div>\n </div>\n\n <!-- Link Programs & Responsibilities -->\n <div\n *ngIf=\"policyForm?.addLinkProgram\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'linkProgram'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'linkProgram' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"\n policyForm?.programSelectedValues?.program?.category_id\n \"\n >\n <img\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n [src]=\"ASSETS.link_items\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\"\n >LINK PROGRAMS & RESPONSIBILITIES</label\n >\n <div\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n (click)=\"activateSelector('linkProgram', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select Programs & responsibilities that are<br />associated with\n this policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"\n remove('linkProgram', policyForm?.programSelectedValues)\n \"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.programSelectedValues?.program?.name }}</span\n >\n <!-- <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"programResponsibilityPopover.popover()\"\n placement=\"left\"\n >\n +4\n </button> -->\n </div>\n <app-popover\n #programResponsibilityPopover\n [dontCloseonClick]=\"true\"\n >\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"\n 'Reporting information security weaknesses'\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Reporting information security weaknesses\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('linkProgram', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Link Assessment -->\n <div\n *ngIf=\"policyForm.addLinkAssessment\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'isAssessment'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'isAssessment' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\n <img\n *ngIf=\"!policyForm?.assessment?.length\"\n [src]=\"ASSETS.assessments\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.assessment?.length\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\n <div\n *ngIf=\"policyForm?.assessment?.length === 0\"\n (click)=\"activateSelector('isAssessment', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select assessments that are associated with this<br />policy.\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm?.assessment?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\n }}</span\n >\n </div>\n <app-popover\n #programResponsibilityPopover\n [dontCloseonClick]=\"true\"\n >\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"\n assessment?.assessmentDetails?.assessment_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n {{ assessment?.assessmentDetails?.assessment_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n (click)=\"activateSelector('isAssessment', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Link Related Polices -->\n\n <div\n *ngIf=\"policyForm.addLinkPolicies\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === CONSTANTS.LINK_POLICY\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'isLinkedPolices' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"SelectedListOfPolicies\">\n <img\n *ngIf=\"!SelectedListOfPolicies?.length\"\n [src]=\"LINKS.linkedPolicyImage\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"SelectedListOfPolicies?.length\"\n class=\"checkIcon\"\n [xmlns]=\"LINKS.checked\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">LINK RELATED POLICIES</label>\n <div\n *ngIf=\"SelectedListOfPolicies?.length === 0\"\n (click)=\"activateSelector('isLinkedPolices', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select policies that are associated with this policy.\n </div>\n </div>\n\n <div class=\"selected\" *ngIf=\"SelectedListOfPolicies?.length > 0\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let policy of SelectedListOfPolicies.slice(0, 1)\"\n >\n <i\n (click)=\"remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policy?.contract_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policy?.contract_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n *ngIf=\"SelectedListOfPolicies?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"relatedPolicy.popover()\"\n placement=\"left\"\n >\n +{{ SelectedListOfPolicies?.slice(1).length }}\n </button>\n </div>\n <button\n *ngIf=\"activeSelector !== CONSTANTS.LINK_POLICY\"\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector(CONSTANTS.LINK_POLICY, true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let policy of SelectedListOfPolicies | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"\n remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\n \"\n >&#xe90d;</i\n >\n {{ policy?.contract_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-cs-switch\n [(ngValue)]=\"policyForm.isPortalDisplayEnabled\"\n [class.disabled]=\"policyForm?.LinkedPolicies == 0\"\n class=\"who-toggle\"\n >DISPLAY ON THE POLICY PORTAL\n <i\n class=\"icons\"\n [appTooltip]=\"CONSTANTS.LINK_POLICY_HELP_TEXT\"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n </div>\n </div>\n </div>\n\n <app-checkbox-list\n [config]=\"categoryConfig\"\n [twoColumn]=\"false\"\n [itemsList]=\"categoryList\"\n [selectedItems]=\"policyForm.selectedCategories\"\n [identifierKey]=\"'_id'\"\n [displayKey]=\"'item_name'\"\n [tooltipKey]=\"'item_name'\"\n *ngIf=\"activeSelector === 'category'\"\n (saveList)=\"saveSelectedList('category', $event)\"\n (closeList)=\"disableSelector()\"\n [loaded]=\"!categoriesListLoaded\"\n >\n </app-checkbox-list>\n <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\n [itemsList]=\"\"\n [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\n *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\n (closeList)=\"fieldDeselector('ISSUE_CC')\">\n</app-checkbox-list> -->\n\n <app-responsibility-centers-list\n *ngIf=\"activeSelector === 'rc'\"\n [responsibilityCentersList]=\"rcList\"\n [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\n [rcIdKey]=\"'item_id'\"\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n (closeRcList)=\"disableSelector()\"\n [loaded]=\"rcListLoaded\"\n >\n </app-responsibility-centers-list>\n\n <app-link-related-policies\n *ngIf=\"activeSelector === CONSTANTS.LINK_POLICY\"\n [policyId]=\"policyId\"\n [mode]=\"mode\"\n [selectedPolicies]=\"SelectedListOfPolicies\"\n (closeLinkPolicyList)=\"disableSelector()\"\n (selectedList)=\"saveSelectedList(CONSTANTS.LINK_POLICY, $event)\"\n ></app-link-related-policies>\n\n <app-users-radio-list\n *ngIf=\"activeSelector === 'reviewer'\"\n [itemEmailKey]=\"'member_email'\"\n [usersList]=\"allReviewers\"\n [headerText]=\"'Select a Reviewer'\"\n [selectedUsers]=\"policyForm.selectedReviewers\"\n [userIdKey]=\"'member_id'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-users-radio-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\n [usersList]=\"overseersList\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [selectedUsers]=\"policyForm.CCEmail\"\n [userIdKey]=\"'employee_id'\"\n [itemNameKey]=\"'employee_name'\"\n (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-owner-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"overseersList\"\n [groupList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.CCEmail\"\n [selectedGroups]=\"policyForm.CCGroupEmail\"\n (save)=\"saveSelectedList('ccEmail', $event)\"\n (cancel)=\"disableSelector()\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\n [usersList]=\"overseersList\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [selectedUsers]=\"policyForm.CCFailEmail\"\n [userIdKey]=\"'employee_id'\"\n [itemNameKey]=\"'employee_name'\"\n (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-owner-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"overseersList\"\n [groupList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.CCFailEmail\"\n [selectedGroups]=\"policyForm.CCFailEmailGroup\"\n (save)=\"saveSelectedList('ccFail', $event)\"\n (cancel)=\"disableSelector()\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-group-users-list\n *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\n [usersList]=\"assigneesList\"\n [groupsList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.selectedAssignees\"\n [userIdKey]=\"'my_member_id'\"\n (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-group-users-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"ownerlist\"\n [groupList]=\"overseerGroupsList\"\n (save)=\"saveSelectedList('assignees', $event)\"\n (cancel)=\"disableSelector()\"\n [selectedGroups]=\"policyForm.selectedGroupAssignee\"\n [selectedUsers]=\"policyForm.selectedAssignees\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'approvers' && false\"\n [listHeading]=\"'Select Approvers'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"true\"\n [selectedUsers]=\"\n addMoreLevels\n ? []\n : policyForm.selectedApprovers[approversListIndex].approvers\n \"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [reviewerWorkflowType]=\"workflowType\"\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n [workflowList]=\"workflowList\"\n [workflowText]=\"'Approval Workflow'\"\n >\n </app-owner-list>\n\n <app-frequency-container\n *ngIf=\"activeSelector === 'frequency'\"\n [mode]=\"'policy'\"\n [frequencyDetails]=\"frequencyDetails\"\n (selectedFrequency)=\"frequencyData($event)\"\n [feature]=\"feature\"\n [pageType]=\"'policy'\"\n (closeFrequency)=\"disableSelector()\"\n ></app-frequency-container>\n\n <app-frequency-container\n *ngIf=\"activeSelector === 'reviewerFrequency'\"\n [mode]=\"'reviewerFrequency'\"\n [frequencyDetails]=\"reviewerFrequencyDetails\"\n (selectedFrequency)=\"reviewerFrequencyData($event)\"\n [feature]=\"feature\"\n [pageType]=\"'policy'\"\n (closeFrequency)=\"disableSelector()\"\n ></app-frequency-container>\n\n <vc-link-program\n *ngIf=\"activeSelector === 'linkProgram'\"\n (close)=\"disableSelector()\"\n [policy]=\"policyForm\"\n [selectedProgram]=\"policyForm?.programSelectedValues\"\n [mode]=\"mode\"\n [selectedLinkProgram]=\"selectedLinkProgram\"\n (changeTab)=\"changeTab('linkedPrograms')\"\n (updatedProgramDetails)=\"updatedProgramDetails($event)\"\n >\n </vc-link-program>\n\n <app-checkpoints-policy-container\n (closeCheckPoint)=\"disableSelector()\"\n [checkpointData]=\"policyForm?.checkpointDetails\"\n [requiredPoint]=\"policyForm?.passingMarks\"\n *ngIf=\"activeSelector === 'checkpoints'\"\n (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\n ></app-checkpoints-policy-container>\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <app-approval-workflow\n *ngIf=\"enableApprovalWorkflow\"\n [selectedCategory]=\"policyForm?.selectedCategories\"\n [approverWorkFlowList]=\"approverWorkFlowList\"\n [allApprovers]=\"allApprovers\"\n (listCancelClicked)=\"listCancelClicked($event)\"\n (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\n (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\n [editApprovalWorkflow]=\"editApprovalWorkflow\"\n [createApprovalClick]=\"createApprovalClick\"\n (closeCreateClicked)=\"closeClickedCreateForm()\"\n [editWorkflowLevel]=\"editWorkflowLevel\"\n ></app-approval-workflow>\n <!-- <app-select-approvers></app-select-approvers> -->\n\n <app-policy-access\n *ngIf=\"activeSelector === 'policyAccess'\"\n [policyAccessType]=\"policyForm?.policy_access_type\"\n (close)=\"disableSelector()\"\n [orgUsersList]=\"usersList\"\n [usersAccessList]=\"usersAccessList\"\n [groupList]=\"overseerGroupsList\"\n [groupsAccessList]=\"groupsAccessList\"\n [selectedUsers]=\"policyForm?.policy_access_owners\"\n [selectedGroups]=\"policyForm?.policy_access_groups\"\n [disabledIds]=\"usersAccessListIds\"\n [disabledGroupIds]=\"groupsAccessListIds\"\n [futureUsersWillSelect]=\"policyForm?.availableOnPortal\"\n (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\n (setPolicyAccessType)=\"policyForm.policy_access_type = $event\"\n >\n </app-policy-access>\n</ng-container>\n<ng-container *ngIf=\"showCreateDocuments\">\n <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\n [organization_id]=\"organization_id\"\n [member_obj_id]=\"member_obj_id\"\n [userInfo]=\"userInfo\"\n [policyId]=\"policyId\"\n [policyName]=\"policyForm.policyName\"\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n (editPolicy)=\"editPolicyFromDocuments()\"\n ></app-create-documents> -->\n <lib-document-section\n *ngIf=\"showCreateDocuments\"\n [templateView]=\"isTemplateClosed\"\n [organization_id]=\"organization_id\"\n [member_obj_id]=\"member_obj_id\"\n [userInfo]=\"userInfo\"\n [policyId]=\"policyId\"\n [feature]=\"feature\"\n [templateUrl]=\"templateUrl\"\n [isTemplateOpened]=\"templateView\"\n [policyName]=\"policyForm.policyName\"\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n (editPolicy)=\"editPolicyFromDocuments()\"\n (openTemplate)=\"templateView = true\"\n ></lib-document-section>\n</ng-container>\n\n<app-assessment-list\n *ngIf=\"activeSelector === 'isAssessment'\"\n [program_ids]=\"''\"\n [isEdit]=\"policyForm?.assessment?.length\"\n (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\n [selectedAssessment]=\"policyForm?.assessment[0]\"\n [mode]=\"'policy'\"\n (onAssessmentSelect)=\"\n onAssessmentSelect($event); saveSelectedList('isAssessment', false)\n \"\n></app-assessment-list>\n\n<app-owner-list\n *ngIf=\"activeSelector === 'approvers' && false\"\n [listHeading]=\"'Select Approvers'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"true\"\n [selectedUsers]=\"\n addMoreLevels\n ? []\n : policyForm.selectedApprovers[approversListIndex].approvers\n \"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [reviewerWorkflowType]=\"workflowType\"\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n [workflowList]=\"workflowList\"\n [workflowText]=\"'Approval Workflow'\"\n>\n</app-owner-list>\n\n<app-owner-list\n *ngIf=\"activeSelector === 'owners'\"\n [listHeading]=\"'Select Owner(s)'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"false\"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('owners', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [selectedUsers]=\"policyForm?.policy_owners ?? []\"\n>\n</app-owner-list>\n\n<app-select-template-list\n *ngIf=\"templateView\"\n [selectedCategoryId]=\"policyForm?.selectedCategories\"\n [feature]=\"feature\"\n (onTemplateSelect)=\"onTemplateSelect($event)\"\n></app-select-template-list>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}.who-toggle{margin-top:10px}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#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 #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#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:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#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[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset: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;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-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;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.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:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 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 input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#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;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#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 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#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 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!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 vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
39207
+ args: [{ selector: 'app-workflow-policy', template: "<!-- <p>workflow-policy works!</p> -->\n\n<ng-container *ngIf=\"!showCreateDocuments\">\n <div class=\"workflow-policy\">\n <!-- Policy Name -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.policyName\">\n <img\n [src]=\"ASSETS.what\"\n alt=\"name\"\n *ngIf=\"!policyForm?.policyName || activeSelector === 'name'\"\n />\n\n <svg\n *ngIf=\"policyForm?.policyName && activeSelector !== 'name'\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">\n Policy Name <span class=\"required\">*</span>\n </label>\n <input\n type=\"text\"\n (keydown)=\"activeSelector = 'name'\"\n (focusin)=\"activateSelector('name', true)\"\n *ngIf=\"policyForm.policyName == '' || activeSelector === 'name'\"\n (focusout)=\"activateSelector('name', false)\"\n [ngModel]=\"policyForm.policyName\"\n (ngModelChange)=\"policyForm.policyName = changeName($event)\"\n placeholder=\"Name this policy\"\n />\n <div\n class=\"selected\"\n *ngIf=\"policyForm.policyName.length && activeSelector !== 'name'\"\n >\n <div class=\"chip-container\">\n <span class=\"value\">{{ policyForm.policyName }}</span>\n </div>\n <button\n class=\"edit\"\n (click)=\"activateSelector('name', true)\"\n type=\"button\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n\n <p\n *ngIf=\"submitted && !policyForm.policyName.trim()\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Please enter a name for this policy.\n </p>\n <vcomply-editor\n [(ngModel)]=\"policyForm.policyNotes\"\n [editorConfig]=\"description\"\n ></vcomply-editor>\n <!-- <app-cs-switch\n [(ngValue)]=\"policyForm.availableOnPortal\"\n (ngValueChange)=\"availabilityOnPortal($event)\"\n >\n Do you want this policy to be available on the portal?\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'The policies that you intend to make accessible to the entire organization can be added to the policy portal. It is like a shared catalog of all active & updated policies that any logged in user can read/download for reference.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe932;</i\n >\n </app-cs-switch>\n <app-cs-switch\n *ngIf=\"policyForm.availableOnPortal\"\n [(ngValue)]=\"policyForm.acceptSuggestions\"\n >\n Accept suggestions\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe932;</i\n ></app-cs-switch> -->\n </div>\n </div>\n </div>\n\n <!-- Policy Category -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'category'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'category' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedCategories?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedCategories?.length == 0 ||\n activeSelector === 'category'\n \"\n [src]=\"ASSETS.case_category\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedCategories?.length > 0 &&\n activeSelector !== 'category'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\"\n >Policy Category <span class=\"required\">*</span>\n </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.selectedCategories?.length == 0\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('category', true)\"\n placeholder=\"Select a category for this policy.\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.selectedCategories?.length > 0\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"\n let category of policyForm?.selectedCategories?.slice(0, 1)\n \"\n >\n <i\n (click)=\"remove('category', category)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"category.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ category.item_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n *ngIf=\"policyForm?.selectedCategories?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"category.popover()\"\n placement=\"left\"\n >\n +{{ policyForm?.selectedCategories?.slice(1).length }}\n </button>\n </div>\n\n <!-- <div class=\"chip-container\" [class.more-one]=\"policyForm?.selectedCategories?.length>1\"\n [class.plus]=\"policyForm?.selectedCategories?.length>2\">\n <span class=\"chip\" *ngFor=\"let category of policyForm?.selectedCategories?.slice(0,2)\"><i\n class=\"icons\" (click)=\"remove('category',category)\">&#xe90d;</i>\n {{category.item_name}}</span>\n <button class=\"count\" *ngIf=\"policyForm?.selectedCategories?.length > 2\" type=\"button\"\n appPopover (click)=\"category.popover()\" placement=\"right\">+\n {{policyForm?.selectedCategories?.slice(2).length}}</button>\n </div> -->\n <button\n *ngIf=\"activeSelector !== 'category'\"\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('category', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #category [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let category of policyForm?.selectedCategories | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('category', category)\"\n >&#xe90d;</i\n >\n {{ category.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <p\n *ngIf=\"submitted && policyForm?.selectedCategories?.length == 0\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Please select the category for this policy.\n </p>\n </div>\n\n <div class=\"vx-form-group\" *ngIf=\"policyForm?.customTags?.length > 0\">\n <ng-container *ngFor=\"let tag of policyForm?.customTags\">\n <label class=\"vx-control-panel vx-mt-2\">{{ tag.tagname }}</label>\n <input\n type=\"text\"\n [(ngModel)]=\"tag.value\"\n placeholder=\"{{ tag.tagname }}\"\n />\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- Effective Date -->\n <div\n class=\"form-group-row\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"false\">\n <img [src]=\"ASSETS.when\" alt=\"\" />\n\n <svg\n *ngIf=\"false\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Effective Date</label>\n <div class=\"date-time-picker\">\n <div class=\"picker-group\">\n <input\n type=\"text\"\n readonly\n placeholder=\"Select the effective date of the policy.\"\n [value]=\"policyForm.policyDueDate | date : 'dd MMM yyyy'\"\n (click)=\"openDatePicker()\"\n id=\"effective-date\"\n />\n <i class=\"icons\">&#xe92d;</i>\n <dp-date-picker\n #datePicker\n (onSelect)=\"datePickerOverlay = false; closeDatePicker($event)\"\n [config]=\"dateConfig\"\n [(ngModel)]=\"policyForm.policyDueDate\"\n >\n </dp-date-picker>\n <div\n class=\"vx-overlay\"\n (click)=\"closeDatePicker($event)\"\n *ngIf=\"datePickerOverlay\"\n ></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Policy Owner -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'owners'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'owners' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm.policy_owners?.length\">\n <img\n *ngIf=\"!policyForm.policy_owners?.length\"\n [src]=\"ASSETS.im_creating\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm.policy_owners?.length\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">POLICY OWNER(S)</label>\n </div>\n <div\n *ngIf=\"!policyForm.policy_owners?.length\"\n (click)=\"activateSelector('owners', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select owners for this policy.\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm.policy_owners?.length\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"remove('owners', policyForm?.policy_owners[0], 0)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.policy_owners[0]?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.policy_owners[0]?.member_name }}</span\n >\n\n <button\n *ngIf=\"policyForm?.policy_owners?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"policyUserPopover.popover()\"\n placement=\"left\"\n >\n + {{ policyForm?.policy_owners.length - 1 }}\n </button>\n </div>\n <div\n *ngIf=\"false\"\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-1 vx-mr-1\"\n >\n &\n </div>\n <div\n *ngIf=\"false\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >Samantha Jones</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"policyGroupPopover.popover()\"\n placement=\"right\"\n >\n +4\n </button>\n </div>\n <app-popover #policyUserPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let owner of policyForm?.policy_owners | slice : 1;\n let i = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"owner?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n (click)=\"remove('owners', owner, i + 1)\"\n class=\"icons\"\n >&#xe90d;</i\n >\n {{ owner?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #policyGroupPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"'Harshvardhan Kariwala'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Harshvardhan Kariwala\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <button\n (click)=\"activateSelector('owners', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <p\n *ngIf=\"submitted && !policyForm?.policy_owners?.length\"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select owners for this policy.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Review -->\n <div\n class=\"form-group-row\"\n [class.active]=\"\n activeSelector === 'reviewer' || activeSelector === 'reviewerFrequency'\n \"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.addReviewers\">\n <img *ngIf=\"!policyForm?.addReviewers\" src=\"ASSETS.reviewer\" alt=\"\" />\n\n <svg\n *ngIf=\"policyForm?.addReviewers\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">REVIEW</label>\n <div\n class=\"reviewSelection vx-p-3 vx-pb-0\"\n [class.disabled]=\"\n activeSelector && sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mb-1\">\n Does this policy need to be reviewed?\n </div>\n <app-cs-radio\n name=\"review-type\"\n [checked]=\"policyForm?.addReviewers\"\n (checkedEvent)=\"typeSelected(true)\"\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n YES\n </div></app-cs-radio\n >\n <app-cs-radio\n name=\"review-type\"\n [checked]=\"!policyForm?.addReviewers\"\n (checkedEvent)=\"typeSelected(false)\"\n ><div class=\"vx-fs-11 vx-fw-500 vx-paragraph-txt vx-mr-3\">\n NO\n </div></app-cs-radio\n >\n </div>\n\n <ng-container *ngIf=\"policyForm?.addReviewers\">\n <label class=\"vx-control-panel vx-mt-2\">REVIEWER</label>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\n [appScrollInView]=\"scrollToBottom\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n sideSelectorElements.includes(activeSelector)\n \"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <div\n class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n Select the person responsible for reviewing this policy\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\n >\n <i\n (click)=\"remove('reviewer', reviewer)\"\n class=\"icons cross vx-fs-12 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ reviewer?.member_name }}</span\n >\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n *ngIf=\"activeSelector !== 'reviewer'\"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <label class=\"vx-control-panel vx-mt-3\">REVIEW FREQUENCY</label>\n <div\n *ngIf=\"policyForm?.review_frequency_details == ''\"\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n >\n <div\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n When does this policy needs to be reviewed?\n </div>\n <div\n (click)=\"activateSelector('reviewerFrequency', true)\"\n class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\"\n >\n SET A FREQUENCY\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm?.review_frequency_details != ''\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n [class.active]=\"activeSelector === 'reviewerFrequency'\"\n >\n <div\n class=\"selectBoxText vx-fs-13 vx-paragraph-txt\"\n [appTooltip]=\"reviewerFrequencyPlaceholder\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{ reviewerFrequencyPlaceholder }}\n </div>\n <button\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length > 0 &&\n !policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the review schedule for this policy.\n </p>\n </ng-container>\n </div>\n </div>\n </div>\n\n <!-- New Approval Workflow -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'approvers'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'approvers' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedApprovers?.length == 0 ||\n activeSelector === 'approvers'\n \"\n [src]=\"ASSETS.approval\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedApprovers?.length > 0 &&\n activeSelector !== 'approvers'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\" [class.disabled]=\"policyApprovalFlag !== 0\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\"\n >APPROVAL <span class=\"required\">*</span></label\n >\n <button\n (click)=\"\n createApprovalWorkflow(); activateSelector('approvers', true)\n \"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n class=\"createNewBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0\"\n >\n CREATE A NEW APPROVAL WORKFLOW\n </button>\n </div>\n <div\n *ngIf=\"\n selectedWorkflow?.length === 0 ||\n !selectedWorkflow[0]?.workflow_name\n \"\n (click)=\"\n clickApprovalWorkflow(true); activateSelector('approvers', true)\n \"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the approval workflow for this policy\n </div>\n </div>\n <div\n *ngIf=\"\n selectedWorkflow?.length > 0 && selectedWorkflow[0]?.workflow_name\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-mb-2\"\n >\n <div\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"removeWorkflow()\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"selectedWorkflow[0]?.workflow_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ selectedWorkflow[0]?.workflow_name }}</span\n >\n </div>\n <button\n (click)=\"editWorkflow(selectedWorkflow[0])\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n <ng-container *ngIf=\"selectedWorkflow?.length > 0\">\n <div\n *ngFor=\"\n let approval of selectedWorkflow[0]?.approval_workflow;\n let approvalIndex = index\n \"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"level-left vx-d-flex vx-align-center\">\n <div class=\"vx-d-block\">\n <div\n class=\"level-name vx-fs-9 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-lh-3\"\n [appTooltip]=\"\n approval?.alias_name\n ? approval?.alias_name\n : approval?.level1\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n {{\n approval?.alias_name\n ? approval?.alias_name\n : approval?.level1\n }}\n </div>\n <div\n class=\"vx-fs-9 vx-fw-500 vx-label-txt vx-tt-uppercase vx-lh-3\"\n >\n {{\n approval?.type === \"ROUNDROBIN\"\n ? \"ROUND-ROBIN\"\n : approval?.type === \"ANYONE\"\n ? \"ANY ONE\"\n : approval?.type\n }}\n </div>\n </div>\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2 vx-ml-2\"\n >\n <!-- <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n > -->\n <div\n *ngIf=\"\n approval?.type?.toLowerCase() === 'sequential' &&\n approval?.approvers?.length < 2\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >\n {{ 1 == approval?.approvers?.length ? \"Final\" : 1 }}\n </div>\n <div\n *ngIf=\"\n approval?.approvers?.length > 1 &&\n approval?.type?.toLowerCase() === 'sequential'\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >\n 1\n </div>\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"approval?.approvers[0]?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ approval?.approvers[0]?.member_name }}</span\n >\n <button\n *ngIf=\"approval?.approvers?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"workflowPopover.popover()\"\n placement=\"right\"\n >\n +{{ approval?.approvers?.length - 1 }}\n </button>\n </div>\n <app-popover #workflowPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let approver of approval?.approvers | slice : 1;\n let approvalIndex = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"approver?.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <!-- <i class=\"icons\">&#xe90d;</i> -->\n <span\n *ngIf=\"\n approval?.type?.toLowerCase() === 'sequential'\n \"\n class=\"workflowLavel vx-fs-11 vx-fw-500 vx-pl-1 vx-pr-1 vx-lh-4 vx-mr-1 vx-text-center\"\n >{{\n approvalIndex + 1 ===\n approval?.approvers?.length - 1\n ? \"Final\"\n : approvalIndex + 2\n }}</span\n >\n {{ approver?.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <!-- <div class=\"vx-d-flex vx-align-center\">\n <button (click)=\"editLevelClicked(approval,approvalIndex)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n <button (click)=\"deleteLevel(approvalIndex)\"\n class=\"deleteBtn vx-fs-11 vx-fw-600 vx-tt-uppercase vx-p-0 vx-m-0 vx-ml-4 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe9ae;</i> DELETE\n </button>\n </div> -->\n </div>\n </ng-container>\n <p\n *ngIf=\"\n submitted &&\n !policyForm?.selectedApprovers[0]?.approval_workflow?.length &&\n !policyApprovalFlag &&\n !policyForm?.selectedApprovers[0]?.approvers?.length\n \"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select or create an approval workflow for this policy.\n </p>\n </div>\n </div>\n </div>\n\n <!-- Policy Access -->\n <div\n *ngIf=\"true\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'policyAccess'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'policyAccess' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"true\">\n <img\n *ngIf=\"\n !policyForm?.policy_access_owners?.length &&\n !policyForm?.policy_access_groups?.length &&\n !policyForm?.availableOnPortal\n \"\n [src]=\"ASSETS.lock_scope\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length ||\n policyForm?.availableOnPortal\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">POLICY PORTAL ACCESS</label>\n </div>\n <div\n *ngIf=\"\n !policyForm?.policy_access_owners?.length &&\n !policyForm?.policy_access_groups?.length &&\n !policyForm?.availableOnPortal\n \"\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"!policyForm?.selectedCategories?.length\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Who should be able to view this policy?\n </div>\n </div>\n\n <ng-container *ngIf=\"!policyForm?.availableOnPortal\">\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3\"\n *ngIf=\"\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length\n \"\n >\n <div\n class=\"vx-d-flex vx-align-center vx-justify-between vx-mt-2 vx-mb-2\"\n >\n <div class=\"vx-d-flex vx-align-center\">\n <div\n *ngIf=\"policyForm?.policy_access_owners?.length\"\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"\n remove(\n 'policyAccess',\n policyForm?.policy_access_owners[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.policy_access_owners[0]?.employee_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm?.policy_access_owners[0]?.employee_name\n }}</span\n >\n <button\n *ngIf=\"policyForm?.policy_access_owners?.length > 1\"\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"policyAccessPopover.popover()\"\n placement=\"left\"\n >\n +{{ policyForm?.policy_access_owners.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.policy_access_owners.length > 0 &&\n policyForm?.policy_access_groups.length > 0\n \"\n >\n &\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.policy_access_groups.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"\n remove(\n 'accessGroup',\n policyForm?.policy_access_groups[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.policy_access_groups[0]?.group_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm?.policy_access_groups[0]?.group_name\n }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"accessGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.policy_access_groups.length > 1\"\n >\n +{{ policyForm?.policy_access_groups.length - 1 }}\n </button>\n </div>\n\n <app-popover #policyAccessPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let user of policyForm?.policy_access_owners\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"user?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i\n class=\"icons\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"remove('policyAccess', user)\"\n >&#xe90d;</i\n >\n {{ user?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #accessGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.policy_access_groups\n | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n *ngIf=\"policyForm?.policy_access_type === 1\"\n (click)=\"remove('accessGroup', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n\n <button\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <!-- <div class=\"vx-mt-4 vx-mb-2\">\n <app-cs-radio\n [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 0\" (checkedEvent)=\"setAccessField(0)\"\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\n Everyone who has access to this Policy Category\n </div></app-cs-radio\n >\n <app-cs-radio\n [name]=\"'policyFormAccessType'\" [checked]=\"policyForm?.policy_access_type === 1\" (checkedEvent)=\"setAccessField(1)\"\n class=\"vx-mt-1\"\n ><div class=\"vx-fs-12 vx-paragraph-txt\">\n Select users/groups\n </div></app-cs-radio\n >\n </div> -->\n </div>\n </ng-container>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.availableOnPortal\"\n >\n <span class=\"vx-fs-13 vx-paragraph-txt\"\n >Visible to All Current & Future Users</span\n >\n\n <button\n (click)=\"activateSelector('policyAccess', true)\"\n class=\"edit vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <div class=\"vx-mt-2\">\n <app-cs-switch\n *ngIf=\"\n policyForm.availableOnPortal ||\n policyForm?.policy_access_owners?.length ||\n policyForm?.policy_access_groups?.length\n \"\n [(ngValue)]=\"policyForm.acceptSuggestions\"\n >ACCEPT SUGGESTIONS\n <i\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\n [appTooltip]=\"\n 'If enabled, users can provide improvement suggestions to the policies that are listed on the Policy Portal.'\n \"\n placement=\"bottom-right\"\n delay=\"0\"\n type=\"white\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n </div>\n </div>\n </div>\n\n <!-- Attestations -->\n <div\n class=\"form-group-row\"\n [class.active]=\"false\"\n [class.disabled]=\"false\"\n *ngIf=\"false\"\n >\n <div class=\"left\" [class.checked]=\"false\">\n <img [src]=\"ASSETS.attestations\" alt=\"\" />\n\n <svg\n *ngIf=\"false\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n <label class=\"vx-control-panel\">ATTESTATIONS</label>\n </div>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the persons required to attest to this Policy\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"'Samantha Jones'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >Samantha Jones</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"policyAttestationPopover.popover()\"\n placement=\"left\"\n >\n +4\n </button>\n </div>\n <app-popover #policyAttestationPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"'Harshvardhan Kariwala'\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Harshvardhan Kariwala\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <div class=\"vx-mt-2\">\n <app-cs-switch\n >REQUIRES E-SIGNATURE FOR ATTESTATION\n <i\n class=\"icons vx-fs-12 vx-txt-blue vx-ml-1 vx-mr-2\"\n [appTooltip]=\"\n 'Requires e-signature for attestation info text here...'\n \"\n placement=\"bottom-right\"\n delay=\"0\"\n type=\"white\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n\n <label class=\"vx-control-panel vx-mt-2\">WHEN?</label>\n <div\n class=\"selectButton vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"selectButtonPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\"\n >\n What is the attestation schedule for this<br />policy?\n </div>\n <div class=\"vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase\">\n SET A FREQUENCY\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div class=\"selectBoxText vx-fs-13 vx-paragraph-txt\">\n Every Wednesday by 11:59 pm\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <label class=\"vx-control-panel vx-mt-2\"\n >ASSESSMENT OF UNDERSTANDING</label\n >\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\n of the policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\">5 Questions</span>\n </div>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Approval Workflow -->\n <div\n class=\"form-group-row\"\n *ngIf=\"false\"\n [class.active]=\"activeSelector === 'approvers'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'approvers' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedApprovers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedApprovers?.length == 0 ||\n activeSelector === 'approvers'\n \"\n [src]=\"ASSETS.approval\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedApprovers?.length > 0 &&\n activeSelector !== 'approvers'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div\n class=\"vx-form-group approval-workflow\"\n [class.disabled]=\"policyApprovalFlag !== 0\"\n >\n <label class=\"vx-control-panel\">\n Approval workflow <span class=\"required\">*</span>\n <button\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n class=\"button\"\n >\n Create a new Approval Workflow\n </button>\n </label>\n <div\n class=\"select\"\n [class.disabled]=\"approverWorkFlowList?.length == 0\"\n *ngIf=\"\n policyForm?.selectedApprovers[0]?.approvers?.length == 0 ||\n policyForm?.selectedApprovers.length == 0\n \"\n >\n <cs-select\n [ngModel]=\"selectedApprovalWorkflow\"\n (ngModelChange)=\"selectedWorkflowChange($event)\"\n [placeholder]=\"'Select approval workflow for this policy'\"\n name=\"selectedApprovalWorkflow\"\n [setMaxWidth]=\"true\"\n >\n <cs-option\n *ngFor=\"let data of approverWorkFlowList\"\n [value]=\"data\"\n >\n {{ data.workflow_name }}\n </cs-option>\n <cs-option\n [value]=\"-1\"\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n >Create a new approval workflow</cs-option\n >\n </cs-select>\n </div>\n <ng-container\n *ngIf=\"policyForm?.selectedApprovers[0]?.approvers?.length > 0\"\n >\n <div\n class=\"selected\"\n *ngFor=\"let level of policyForm?.selectedApprovers; let i = index\"\n >\n <div class=\"workflow-label\">\n <p class=\"title\">Level {{ i + 1 }}</p>\n <p class=\"description\">{{ level.name }}</p>\n </div>\n <div class=\"vx-d-flex vx-align-center\">\n <div class=\"chip-container\">\n <span\n class=\"chip\"\n *ngFor=\"\n let approver of level.approvers.slice(0, 1);\n let j = index\n \"\n ><i class=\"icons\" (click)=\"remove('approvers', approver, i)\"\n >&#xe90d;</i\n >\n <span class=\"step\" *ngIf=\"level.name == 'SEQUENTIAL'\">{{\n j + 1\n }}</span\n >{{ approver.member_name }}</span\n >\n\n <button\n class=\"count\"\n *ngIf=\"level.approvers?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"labelName.popover()\"\n placement=\"left\"\n >\n +\n\n {{ level.approvers.slice(1).length }}\n </button>\n <app-popover #labelName [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let approver of level.approvers | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"remove('approvers', approver, i)\"\n >&#xe90d;</i\n >\n <span\n class=\"step\"\n *ngIf=\"level.name == 'SEQUENTIAL'\"\n >\n {{\n j == level.approvers.slice(1).length - 1\n ? \"Final\"\n : j + 2\n }}\n </span>\n {{ approver.member_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"\n activateSelector('approvers', true, level.name);\n approversListIndex = i\n \"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n <button\n class=\"close-btn\"\n (click)=\"remove('workflowLevel', level, i)\"\n >\n <i class=\"icons\">&#xe90d;</i>\n </button>\n </div>\n </div>\n </ng-container>\n\n <p\n *ngIf=\"\n submitted &&\n !policyForm?.selectedApprovers?.length &&\n !policyApprovalFlag\n \"\n [appScrollInView]=\"true\"\n class=\"error-message\"\n >\n Select or create an approval workflow for this policy.\n </p>\n\n <label\n class=\"vx-control-panel\"\n *ngIf=\"policyForm.selectedApprovers[0]?.approvers?.length > 0\"\n ><button\n class=\"button\"\n (click)=\"\n activateSelector('approvers', true);\n addMoreLevels = true;\n workflowType = 'SEQUENTIAL'\n \"\n >\n + Add More Levels\n </button></label\n >\n </div>\n </div>\n </div>\n\n <!-- Who / now Attestation -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'assignees'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'assignees' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedAssignees?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedAssignees?.length == 0 ||\n activeSelector === 'assignees'\n \"\n [src]=\"ASSETS.case_assignees\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedAssignees?.length > 0 &&\n activeSelector !== 'assignees'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Attestation</label>\n <div\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center vx-mb-2\"\n *ngIf=\"\n (policyForm?.selectedAssignees?.length == 0 && !groupEnabled) ||\n (policyForm?.selectedAssignees?.length == 0 &&\n groupEnabled &&\n policyForm?.selectedGroupAssignee.length == 0)\n \"\n (click)=\"activateSelector('assignees', true)\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select the persons responsible for attesting this policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between vx-mb-2\"\n *ngIf=\"\n policyForm?.selectedAssignees?.length > 0 ||\n policyForm?.selectedGroupAssignee?.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees?.slice(0, 1)\n \"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('assignees', assignee)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"assignee.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ assignee.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"assigneePopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.selectedAssignees?.length > 1\"\n >\n +{{ policyForm?.selectedAssignees?.slice(1).length }}\n </button>\n </div>\n <ng-container *ngIf=\"groupEnabled\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.selectedAssignees.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove('assignees', policyForm?.selectedAssignees[0])\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.selectedAssignees[0]?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.selectedAssignees[0]?.employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"UserPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.selectedAssignees.length > 1\"\n >\n +{{ policyForm?.selectedAssignees.length - 1 }}\n </button>\n </div>\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.selectedAssignees.length > 0 &&\n policyForm?.selectedGroupAssignee.length > 0\n \"\n >\n &\n </div>\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove(\n 'groupAssignees',\n policyForm?.selectedGroupAssignee[0]\n )\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm?.selectedGroupAssignee[0]?.group_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.selectedGroupAssignee[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"group.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.selectedGroupAssignee.length > 1\"\n >\n +{{ policyForm?.selectedGroupAssignee.length - 1 }}\n </button>\n </div>\n </ng-container>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('assignees', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n\n <p\n *ngIf=\"\n submitted &&\n ((policyForm?.selectedAssignees?.length == 0 &&\n policyForm?.frequency_details &&\n !groupEnabled) ||\n (policyForm?.selectedAssignees?.length == 0 &&\n policyForm.selectedGroupAssignee.length == 0 &&\n policyForm?.frequency_details &&\n groupEnabled) ||\n (isSendForAttestation &&\n policyForm?.selectedAssignees?.length === 0))\n \"\n id=\"whovalidatemsg\"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the persons required to attest to this Policy.\n </p>\n <app-cs-switch\n [(ngValue)]=\"policyForm.requiresSignatureForAttestation\"\n [class.disabled]=\"policyForm?.selectedAssignees?.length == 0\"\n class=\"who-toggle\"\n >THIS POLICY REQUIRES E-SIGNATURE FOR ATTESTATION\n <i\n class=\"icons\"\n [appTooltip]=\"\n 'If selected, the readers will be required to attest this policy using their electronic signature.'\n \"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n <app-popover #assigneePopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\n >&#xe90d;</i\n >\n {{ assignee.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #UserPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let assignee of policyForm?.selectedAssignees | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('assignees', assignee)\"\n >&#xe90d;</i\n >\n {{ assignee.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #group [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.selectedGroupAssignee | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('groupAssignees', data)\"\n >&#xe90d;</i\n >\n {{ data.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n\n <!-- overseer -->\n <app-popover #overseerPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let overseer of policyForm?.CCEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccEmail', overseer)\"\n >&#xe90d;</i\n >\n {{ overseer?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #overseerGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.CCGroupEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccGroupEmail', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <!-- overseer end -->\n\n <!-- overseer fail start -->\n <app-popover #overseerFailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let overseer of policyForm?.CCFailEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccFail', overseer)\"\n >&#xe90d;</i\n >\n {{ overseer?.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #overseerFailGroup [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let data of policyForm?.CCFailEmailGroup | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"remove('ccGroupFailEmail', data)\"\n >&#xe90d;</i\n >\n {{ data?.group_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <!-- overseer fail end -->\n </div>\n </div>\n </div>\n\n <!-- When -->\n <div\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'frequency'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'frequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">When?</label>\n\n <div\n *ngIf=\"policyForm?.frequency_details == ''\"\n class=\"select button-sec\"\n >\n <div\n class=\"custom-input frequency-custom-input\"\n (click)=\"activateSelector('frequency', true)\"\n >\n {{ frequencyPlaceholder }}\n </div>\n\n <button (click)=\"activateSelector('frequency', true)\" type=\"button\">\n Set A frequency\n </button>\n </div>\n <!-- <div\n *ngIf=\"policyForm?.frequency_details != ''\"\n class=\"selected button-sec\"\n > -->\n <div\n *ngIf=\"policyForm?.frequency_details != ''\"\n class=\"selected button-sec selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"remove('frequency', rc)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"frequencyPlaceholder\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ frequencyPlaceholder }}</span\n >\n </div>\n <button\n *ngIf=\"activeSelector !== 'frequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n <!-- </div>\n <span class=\"chip\">{{ frequencyPlaceholder }}</span>\n <button\n *ngIf=\"activeSelector !== 'frequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('frequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button> -->\n </div>\n <p\n *ngIf=\"\n submitted &&\n ((policyForm?.selectedAssignees?.length > 0 &&\n !policyForm?.frequency_details &&\n !groupEnabled) ||\n ((policyForm?.selectedAssignees?.length > 0 ||\n policyForm?.selectedGroupAssignee?.length > 0) &&\n !policyForm?.frequency_details &&\n groupEnabled))\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select an attestation schedule for this policy.\n </p>\n\n <!-- <label class=\"vx-control-panel\">Effective Date</label>\n <div class=\"date-time-picker\">\n <div class=\"picker-group\">\n <input type=\"text\" readonly placeholder=\"Select the date from which this policy goes into effect.\"\n [value]=\"policyForm.policyDueDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker();\">\n <i class=\"icons\">&#xe92d;</i>\n <dp-date-picker #datePicker (onSelect)=\"datePickerOverlay = false;closeDatePicker($event)\"\n [config]=\"dateConfig\" [(ngModel)]=\"policyForm.policyDueDate\">\n </dp-date-picker>\n <div class=\"vx-overlay\" (click)=\"closeDatePicker($event)\" *ngIf=\"datePickerOverlay\"></div>\n </div>\n </div> -->\n </div>\n </div>\n </div>\n\n <!-- Checkpoints / Assessment of Understanding -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"true\"\n [class.active]=\"activeSelector === 'checkpoints'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'checkpoints' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">\n Assessment of Understanding\n <!-- <button *ngIf=\"policyForm?.checkpointDetails?.length===0\" class=\"button\" (click)=\"activateSelector('checkpoints',true)\">+ Add Checkpoints</button> -->\n </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.checkpointDetails?.length === 0\"\n (click)=\"activateSelector('checkpoints', true)\"\n >\n <!-- <input type=\"text\" placeholder=\"Set up a questionnaire to confirm the reader\u2019s understanding of the policy.\" readonly> -->\n <div class=\"custom-input\">\n Set up a questionnaire to confirm the reader\u2019s<br />understanding\n of the policy.\n </div>\n </div>\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.checkpointDetails?.length > 0\"\n >\n <!-- <div class=\"chip-container\">\n <span class=\"chip\">{{policyForm?.checkpointDetails?.length + (policyForm?.checkpointDetails?.length > 1 ?' Checkpoints':' Checkpoint')}}</span>\n\n <span class=\"checkpoint-point-text first\">TOTAL POINTS: <span class=\"no\">{{policyForm?.totalQuestion}}</span><br><em>Each question carries 1 point</em></span>\n\n <span class=\"checkpoint-point-text\">POINTS REQUIRED TO ATTEST : <span class=\"no\">{{policyForm?.passingMarks}}</span></span>\n\n </div> -->\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('checkpoints', policyForm?.checkpointDetails)\"\n >&#xe9ae;</i\n >\n <span class=\"chipName vx-fs-11 vx-label-txt\">{{\n policyForm?.checkpointDetails?.length +\n (policyForm?.checkpointDetails?.length > 1\n ? \" Questions\"\n : \" Question\")\n }}</span>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('checkpoints', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <!-- <app-popover #checkpointPopOver [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let checkpoint of policyForm?.checkpointDetails | slice: 1; let j = index\">\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('checkpoints',checkpoint,j+1)\">&#xe90d;</i>\n {{ checkpoint?.question }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover> -->\n </div>\n </div>\n </div>\n\n <!-- Risk Classification -->\n <div\n class=\"form-group-row\"\n *ngIf=\"showRiskClassification && false\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\" [class.checked]=\"policyForm.riskRating\">\n <img [src]=\"ASSETS.risks\" alt=\"im\" *ngIf=\"!policyForm?.riskRating\" />\n\n <svg\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n *ngIf=\"policyForm?.riskRating\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Risk Classification</label>\n <div class=\"classification\">\n <label\n class=\"low\"\n *ngFor=\"let class of riskClassification\"\n [ngClass]=\"[class.class]\"\n >\n <input\n type=\"radio\"\n name=\"classification\"\n [value]=\"class.value\"\n [checked]=\"policyForm?.riskRating === class.value\"\n [(ngModel)]=\"policyForm.riskRating\"\n />\n <span>{{ class.name }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Responsibility Center -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addResponsibilityCenters\"\n [class.active]=\"activeSelector === 'rc'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'rc' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.selectedRCs?.length > 0\">\n <img\n *ngIf=\"\n policyForm?.selectedRCs?.length == 0 || activeSelector === 'rc'\n \"\n [src]=\"ASSETS.responsibility_center\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.selectedRCs?.length > 0 && activeSelector !== 'rc'\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Responsibility Center</label>\n <div class=\"select\" *ngIf=\"policyForm?.selectedRCs?.length == 0\">\n <input\n type=\"text\"\n (click)=\"activateSelector('rc', true)\"\n placeholder=\"Select Responsibility Center(s) that this policy relates to.\"\n readonly\n />\n </div>\n\n <div class=\"selected\" *ngIf=\"policyForm?.selectedRCs?.length > 0\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let rc of policyForm?.selectedRCs?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('rc', rc)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"rc.item_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ rc.item_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"rcPopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.selectedRCs?.length > 1\"\n >\n +{{ policyForm?.selectedRCs?.slice(1).length }}\n </button>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('rc', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #rcPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let rc of policyForm?.selectedRCs | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('rc', rc)\">&#xe90d;</i>\n {{ rc.item_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n\n <!-- Version -->\n <div\n *ngIf=\"policyForm.addVersion\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.disabled]=\"\n activeSelector && sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm.policy_version\">\n <img\n [src]=\"ASSETS.associated_risks\"\n alt=\"name\"\n *ngIf=\"!policyForm.policy_version\"\n />\n\n <svg\n *ngIf=\"policyForm.policy_version\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">VERSION</label>\n <input\n [(ngModel)]=\"policyForm.policy_version\"\n (change)=\"onVersion($event)\"\n type=\"text\"\n placeholder=\"Specify the policy version.\"\n />\n <p\n *ngIf=\"!isVersionValid\"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n {{ versionErrorMessage }}\n </p>\n </div>\n </div>\n </div>\n\n <!-- Reviewer -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addReviewers && false\"\n [class.active]=\"activeSelector === 'reviewer'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'reviewer' &&\n activeSelector !== 'reviewerFrequency' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"policyForm?.selectedReviewers?.length > 0\"\n >\n <img\n *ngIf=\"\n policyForm?.selectedReviewers?.length == 0 ||\n activeSelector === 'reviewer'\n \"\n [src]=\"ASSETS.reviewer\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"\n policyForm?.selectedReviewers?.length > 0 &&\n activeSelector !== 'reviewer'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Reviewer </label>\n <div\n class=\"select\"\n *ngIf=\"policyForm?.selectedReviewers?.length == 0\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('reviewer', true)\"\n placeholder=\"Select the person responsible for reviewing this policy\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"policyForm?.selectedReviewers?.length > 0\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let reviewer of policyForm?.selectedReviewers\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('reviewer', reviewer)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"reviewer.member_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ reviewer.member_name }}</span\n >\n </ng-container>\n </div>\n\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('reviewer', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length == 0 &&\n policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select a reviewer for this policy.\n </p>\n\n <label class=\"vx-control-panel\">When? </label>\n\n <div\n *ngIf=\"policyForm?.review_frequency_details == ''\"\n class=\"select button-sec\"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n [placeholder]=\"reviewerFrequencyPlaceholder\"\n readonly\n />\n <button\n (click)=\"activateSelector('reviewerFrequency', true)\"\n type=\"button\"\n >\n Set A frequency\n </button>\n </div>\n <div\n *ngIf=\"policyForm?.review_frequency_details != ''\"\n class=\"selected button-sec\"\n >\n <span class=\"chip\">{{ reviewerFrequencyPlaceholder }}</span>\n <button\n *ngIf=\"activeSelector !== 'reviewerFrequency'\"\n type=\"button\"\n class=\"edit\"\n (click)=\"activateSelector('reviewerFrequency', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i>Edit\n </button>\n </div>\n <p\n *ngIf=\"\n submitted &&\n policyForm?.selectedReviewers?.length > 0 &&\n !policyForm?.review_frequency_details\n \"\n class=\"error-message\"\n [appScrollInView]=\"true\"\n >\n Select the review schedule for this policy.\n </p>\n\n <app-format-and-evidence\n (updateFiles)=\"saveSelectedList('reviewer_attachments', $event)\"\n #formatEvidence\n [mode]=\"'policyReviewer'\"\n [organization_id]=\"organization_id\"\n [formatEvidanceData]=\"policyForm?.documentsAndLinks\"\n >\n </app-format-and-evidence>\n </div>\n </div>\n </div>\n\n <!-- Overseer -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addOverseers\"\n [class.active]=\"\n activeSelector === 'ccEmail' || activeSelector === 'ccFail'\n \"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'ccEmail' &&\n activeSelector !== 'ccFail' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"\n policyForm?.CCEmail?.length > 0 || policyForm?.CCFailEmail?.length > 0\n \"\n >\n <img\n *ngIf=\"\n (policyForm?.CCFailEmail?.length == 0 &&\n policyForm?.CCEmail?.length == 0) ||\n activeSelector === 'ccEmail' ||\n activeSelector === 'ccFail'\n \"\n [src]=\"ASSETS.oversight\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"\n (policyForm?.CCFailEmail?.length > 0 ||\n policyForm?.CCEmail?.length > 0) &&\n activeSelector !== 'ccEmail' &&\n activeSelector !== 'ccFail'\n \"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">Oversight</label>\n <div\n class=\"select\"\n *ngIf=\"\n policyForm?.CCEmail?.length == 0 &&\n policyForm?.CCGroupEmail.length == 0\n \"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('ccEmail', true)\"\n placeholder=\"Who should have oversight of this policy?\"\n readonly\n />\n </div>\n <div\n class=\"selected\"\n *ngIf=\"\n policyForm?.CCEmail?.length > 0 ||\n policyForm?.CCGroupEmail.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"let ccEmail of policyForm?.CCEmail?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccEmail', ccEmail)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"ccEmail.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ ccEmail.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"ccEmailPopover.popover()\"\n placement=\"left\"\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\n >\n +{{ policyForm?.CCEmail?.slice(1).length }}\n </button>\n </div>\n\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.CCEmail?.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccEmail', policyForm?.CCEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCEmail[0].employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCEmail[0].employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"overseerPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCEmail?.length > 1\"\n >\n +{{ policyForm?.CCEmail?.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.CCEmail.length > 0 &&\n policyForm?.CCGroupEmail?.length > 0\n \"\n >\n &\n </div>\n\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.CCGroupEmail.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccGroupEmail', policyForm?.CCGroupEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCGroupEmail[0]?.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCGroupEmail[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"overseerGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCGroupEmail?.length > 1\"\n >\n +{{ policyForm?.CCGroupEmail?.length - 1 }}\n </button>\n </div>\n </div>\n\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('ccEmail', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n\n <div\n class=\"select\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length == 0 &&\n policyForm?.CCFailEmailGroup?.length == 0\n \"\n >\n <input\n type=\"text\"\n (click)=\"activateSelector('ccFail', true)\"\n placeholder=\"Who should be notified if the policy is not attested on time?\"\n readonly\n />\n </div>\n\n <div\n class=\"selected\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length > 0 ||\n policyForm?.CCFailEmailGroup?.length > 0\n \"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"!groupEnabled\"\n >\n <ng-container\n *ngFor=\"let ccFail of policyForm?.CCFailEmail?.slice(0, 1)\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccFail', ccFail)\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"ccFail.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ ccFail.employee_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"ccFailPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\n >\n +{{ policyForm?.CCFailEmail?.slice(1).length }}\n </button>\n </div>\n\n <div *ngIf=\"groupEnabled\" class=\"chip-container\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"groupEnabled && policyForm?.CCFailEmail.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"remove('ccFail', policyForm?.CCFailEmail[0])\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCFailEmail[0]?.employee_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCFailEmail[0]?.employee_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 greenBg\"\n appPopover\n (click)=\"overseerFailPopover.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmail?.length > 1\"\n >\n +{{ policyForm?.CCFailEmail?.length - 1 }}\n </button>\n </div>\n\n <div\n class=\"vx-fs-12 vx-paragraph-txt vx-ml-2 vx-mr-2\"\n *ngIf=\"\n policyForm?.CCFailEmail?.length > 0 &&\n policyForm?.CCFailEmailGroup?.length > 0\n \"\n >\n &\n </div>\n\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 0\"\n >\n <i\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n (click)=\"\n remove('ccGroupFailEmail', policyForm?.CCFailEmailGroup[0])\n \"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.CCFailEmailGroup[0]?.group_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.CCFailEmailGroup[0]?.group_name }}</span\n >\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"overseerFailGroup.popover()\"\n placement=\"right\"\n *ngIf=\"policyForm?.CCFailEmailGroup?.length > 1\"\n >\n +{{ policyForm?.CCFailEmailGroup?.length - 1 }}\n </button>\n </div>\n </div>\n <button\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector('ccFail', true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #ccEmailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let ccEmail of policyForm?.CCEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccEmail', ccEmail)\"\n >&#xe90d;</i\n >\n {{ ccEmail.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-popover #ccFailPopover [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let ccFail of policyForm?.CCFailEmail | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i class=\"icons\" (click)=\"remove('ccFail', ccFail)\"\n >&#xe90d;</i\n >\n {{ ccFail.employee_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n </div>\n </div>\n </div>\n\n <!-- Related Documents -->\n <div\n class=\"form-group-row\"\n [appScrollInView]=\"scrollToBottom\"\n *ngIf=\"policyForm.addAssociatedDocuments\"\n [class.disabled]=\"activeSelector && activeSelector !== 'name'\"\n >\n <div class=\"left\">\n <img\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length == 0\"\n [src]=\"ASSETS.format_evidence\"\n alt=\"im\"\n />\n\n <svg\n *ngIf=\"policyForm.associatedDocuments.formatFiles?.length > 0\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">RELATED DOCUMENTS</label>\n <app-format-and-evidence\n (updateFiles)=\"saveSelectedList('associatedDocuments', $event)\"\n [mode]=\"'policy'\"\n [organization_id]=\"organization_id\"\n [formatEvidanceData]=\"policyForm?.associatedDocuments\"\n ></app-format-and-evidence>\n </div>\n </div>\n </div>\n\n <!-- Link Programs & Responsibilities -->\n <div\n *ngIf=\"policyForm?.addLinkProgram\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'linkProgram'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'linkProgram' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div\n class=\"left\"\n [class.checked]=\"\n policyForm?.programSelectedValues?.program?.category_id\n \"\n >\n <img\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n [src]=\"ASSETS.link_items\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\"\n >LINK PROGRAMS & RESPONSIBILITIES</label\n >\n <div\n *ngIf=\"!policyForm?.programSelectedValues?.program?.category_id\"\n (click)=\"activateSelector('linkProgram', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select Programs & responsibilities that are<br />associated with\n this policy.\n </div>\n </div>\n\n <div\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n *ngIf=\"policyForm?.programSelectedValues?.program?.category_id\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i\n (click)=\"\n remove('linkProgram', policyForm?.programSelectedValues)\n \"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policyForm?.programSelectedValues?.program?.name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policyForm?.programSelectedValues?.program?.name }}</span\n >\n <!-- <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n appPopover\n (click)=\"programResponsibilityPopover.popover()\"\n placement=\"left\"\n >\n +4\n </button> -->\n </div>\n <app-popover\n #programResponsibilityPopover\n [dontCloseonClick]=\"true\"\n >\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li *ngFor=\"let data of [1, 1, 1, 1, 1, 1, 1]\">\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"\n 'Reporting information security weaknesses'\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n Reporting information security weaknesses\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n (click)=\"activateSelector('linkProgram', true)\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Link Assessment -->\n <div\n *ngIf=\"policyForm.addLinkAssessment\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === 'isAssessment'\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'isAssessment' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"policyForm?.assessment?.length\">\n <img\n *ngIf=\"!policyForm?.assessment?.length\"\n [src]=\"ASSETS.assessments\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"policyForm?.assessment?.length\"\n class=\"checkIcon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">LINK ASSESSMENTS</label>\n <div\n *ngIf=\"policyForm?.assessment?.length === 0\"\n (click)=\"activateSelector('isAssessment', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select assessments that are associated with this<br />policy.\n </div>\n </div>\n\n <div\n *ngIf=\"policyForm?.assessment?.length > 0\"\n class=\"selectBoxSuccess vx-pl-2 vx-pr-3 vx-d-flex vx-align-center vx-justify-between\"\n >\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <i class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{\n policyForm.assessment[0]?.assessmentDetails?.assessment_name\n }}</span\n >\n </div>\n <app-popover\n #programResponsibilityPopover\n [dontCloseonClick]=\"true\"\n >\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"let assessment of policyForm.assessment | slice : 1\"\n >\n <div class=\"avatar-card\">\n <span\n class=\"value\"\n [appTooltip]=\"\n assessment?.assessmentDetails?.assessment_name\n \"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >\n <i class=\"icons\">&#xe90d;</i>\n {{ assessment?.assessmentDetails?.assessment_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <button\n (click)=\"activateSelector('isAssessment', true)\"\n class=\"editBtn vx-fs-11 vx-fw-600 vx-txt-blue vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center\"\n >\n <i class=\"icons vx-mr-1\">&#xe90c;</i> EDIT\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Link Related Polices -->\n\n <div\n *ngIf=\"policyForm.addLinkPolicies\"\n [appScrollInView]=\"scrollToBottom\"\n class=\"form-group-row\"\n [class.active]=\"activeSelector === CONSTANTS.LINK_POLICY\"\n [class.disabled]=\"\n activeSelector &&\n activeSelector !== 'isLinkedPolices' &&\n sideSelectorElements.includes(activeSelector)\n \"\n >\n <div class=\"left\" [class.checked]=\"SelectedListOfPolicies\">\n <img\n *ngIf=\"!SelectedListOfPolicies?.length\"\n [src]=\"LINKS.linkedPolicyImage\"\n alt=\"\"\n />\n\n <svg\n *ngIf=\"SelectedListOfPolicies?.length\"\n class=\"checkIcon\"\n [xmlns]=\"LINKS.checked\"\n viewBox=\"0 0 52 52\"\n >\n <circle\n class=\"checkIcon__circle\"\n cx=\"26\"\n cy=\"26\"\n r=\"25\"\n fill=\"none\"\n />\n <path\n class=\"checkIcon__check\"\n fill=\"none\"\n d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"\n />\n </svg>\n </div>\n <div class=\"right\">\n <div class=\"vx-form-group\">\n <label class=\"vx-control-panel\">LINK RELATED POLICIES</label>\n <div\n *ngIf=\"SelectedListOfPolicies?.length === 0\"\n (click)=\"activateSelector('isLinkedPolices', true)\"\n class=\"selectBoxEnable vx-pl-3 vx-pr-3 vx-d-flex vx-align-center\"\n [class.disabled]=\"false\"\n >\n <div class=\"selectBoxPlacehoder vx-fs-13 vx-paragraph-txt vx-lh-4\">\n Select policies that are associated with this policy.\n </div>\n </div>\n\n <div class=\"selected\" *ngIf=\"SelectedListOfPolicies?.length > 0\">\n <div\n class=\"chipContainer vx-d-flex vx-align-center vx-pl-2 vx-pr-2\"\n >\n <ng-container\n *ngFor=\"let policy of SelectedListOfPolicies.slice(0, 1)\"\n >\n <i\n (click)=\"remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\"\n class=\"icons cross vx-fs-10 vx-paragraph-txt vx-mr-1\"\n >&#xe9ae;</i\n >\n <span\n class=\"chipName vx-fs-11 vx-label-txt\"\n [appTooltip]=\"policy?.contract_name\"\n placement=\"bottom-left\"\n delay=\"0\"\n type=\"black\"\n [tooltipMandatory]=\"false\"\n >{{ policy?.contract_name }}</span\n >\n </ng-container>\n <button\n class=\"countBtn vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4\"\n *ngIf=\"SelectedListOfPolicies?.length > 1\"\n type=\"button\"\n appPopover\n (click)=\"relatedPolicy.popover()\"\n placement=\"left\"\n >\n +{{ SelectedListOfPolicies?.slice(1).length }}\n </button>\n </div>\n <button\n *ngIf=\"activeSelector !== CONSTANTS.LINK_POLICY\"\n class=\"edit\"\n type=\"button\"\n (click)=\"activateSelector(CONSTANTS.LINK_POLICY, true)\"\n >\n <i class=\"icons\">&#xe9ba;</i> Edit\n </button>\n </div>\n <app-popover #relatedPolicy [dontCloseonClick]=\"true\">\n <div class=\"wf-action-list\">\n <ul class=\"action-item\">\n <li\n *ngFor=\"\n let policy of SelectedListOfPolicies | slice : 1;\n let j = index\n \"\n >\n <div class=\"avatar-card\">\n <span class=\"value\">\n <i\n class=\"icons\"\n (click)=\"\n remove(CONSTANTS.LINK_POLICY, policy?.contract_id)\n \"\n >&#xe90d;</i\n >\n {{ policy?.contract_name }}\n </span>\n </div>\n </li>\n </ul>\n </div>\n </app-popover>\n <app-cs-switch\n [(ngValue)]=\"policyForm.isPortalDisplayEnabled\"\n [class.disabled]=\"policyForm?.LinkedPolicies == 0\"\n class=\"who-toggle\"\n >DISPLAY ON THE POLICY PORTAL\n <i\n class=\"icons\"\n [appTooltip]=\"CONSTANTS.LINK_POLICY_HELP_TEXT\"\n placement=\"bottom-right\"\n type=\"white\"\n delay=\"0\"\n [tooltipMandatory]=\"true\"\n >&#xe91f;</i\n ></app-cs-switch\n >\n </div>\n </div>\n </div>\n </div>\n\n <app-checkbox-list\n [config]=\"categoryConfig\"\n [twoColumn]=\"false\"\n [itemsList]=\"categoryList\"\n [selectedItems]=\"policyForm.selectedCategories\"\n [identifierKey]=\"'_id'\"\n [displayKey]=\"'item_name'\"\n [tooltipKey]=\"'item_name'\"\n *ngIf=\"activeSelector === 'category'\"\n (saveList)=\"saveSelectedList('category', $event)\"\n (closeList)=\"disableSelector()\"\n [loaded]=\"!categoriesListLoaded\"\n >\n </app-checkbox-list>\n <!-- <app-checkbox-list [config]=\"approvalWorkflowConfig\" [twoColumn]=\"true\"\n [itemsList]=\"\"\n [selectedItems]=\"policyForm.issueCCUsers\" [identifierKey]=\"'employee_email'\" [displayKey]=\"'employee_name'\" [tooltipKey]=\"'employee_email'\"\n *ngIf=\"activeSelector==='ISSUE_CC'\" (saveList)=\"selectorAction($event,'ISSUE_CC')\"\n (closeList)=\"fieldDeselector('ISSUE_CC')\">\n</app-checkbox-list> -->\n\n <app-responsibility-centers-list\n *ngIf=\"activeSelector === 'rc'\"\n [responsibilityCentersList]=\"rcList\"\n [selectedResponsibilityCenters]=\"policyForm.selectedRCs\"\n [rcIdKey]=\"'item_id'\"\n (saveSelectedList)=\"saveSelectedList('rc', $event)\"\n (closeRcList)=\"disableSelector()\"\n [loaded]=\"rcListLoaded\"\n >\n </app-responsibility-centers-list>\n\n <app-link-related-policies\n *ngIf=\"activeSelector === CONSTANTS.LINK_POLICY\"\n [policyId]=\"policyId\"\n [mode]=\"mode\"\n [selectedPolicies]=\"SelectedListOfPolicies\"\n (closeLinkPolicyList)=\"disableSelector()\"\n (selectedList)=\"saveSelectedList(CONSTANTS.LINK_POLICY, $event)\"\n ></app-link-related-policies>\n\n <app-users-radio-list\n *ngIf=\"activeSelector === 'reviewer'\"\n [itemEmailKey]=\"'member_email'\"\n [usersList]=\"allReviewers\"\n [headerText]=\"'Select a Reviewer'\"\n [selectedUsers]=\"policyForm.selectedReviewers\"\n [userIdKey]=\"'member_id'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('reviewer', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-users-radio-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'ccEmail' && !groupEnabled\"\n [usersList]=\"overseersList\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [selectedUsers]=\"policyForm.CCEmail\"\n [userIdKey]=\"'employee_id'\"\n [itemNameKey]=\"'employee_name'\"\n (saveSelectedList)=\"saveSelectedList('ccEmail', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-owner-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'ccEmail' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"overseersList\"\n [groupList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.CCEmail\"\n [selectedGroups]=\"policyForm.CCGroupEmail\"\n (save)=\"saveSelectedList('ccEmail', $event)\"\n (cancel)=\"disableSelector()\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'ccFail' && !groupEnabled\"\n [usersList]=\"overseersList\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [selectedUsers]=\"policyForm.CCFailEmail\"\n [userIdKey]=\"'employee_id'\"\n [itemNameKey]=\"'employee_name'\"\n (saveSelectedList)=\"saveSelectedList('ccFail', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-owner-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'ccFail' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"overseersList\"\n [groupList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.CCFailEmail\"\n [selectedGroups]=\"policyForm.CCFailEmailGroup\"\n (save)=\"saveSelectedList('ccFail', $event)\"\n (cancel)=\"disableSelector()\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-group-users-list\n *ngIf=\"activeSelector === 'assignees' && !groupEnabled\"\n [usersList]=\"assigneesList\"\n [groupsList]=\"overseerGroupsList\"\n [selectedUsers]=\"policyForm.selectedAssignees\"\n [userIdKey]=\"'my_member_id'\"\n (saveSelectedList)=\"saveSelectedList('assignees', $event)\"\n (closeUsersList)=\"disableSelector()\"\n >\n </app-group-users-list>\n\n <user-group-list\n *ngIf=\"activeSelector === 'assignees' && groupEnabled\"\n [groupEnabled]=\"true\"\n [userlist]=\"ownerlist\"\n [groupList]=\"overseerGroupsList\"\n (save)=\"saveSelectedList('assignees', $event)\"\n (cancel)=\"disableSelector()\"\n [selectedGroups]=\"policyForm.selectedGroupAssignee\"\n [selectedUsers]=\"policyForm.selectedAssignees\"\n [featureflag]=\"groupEnabled\"\n >\n </user-group-list>\n\n <app-owner-list\n *ngIf=\"activeSelector === 'approvers' && false\"\n [listHeading]=\"'Select Approvers'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"true\"\n [selectedUsers]=\"\n addMoreLevels\n ? []\n : policyForm.selectedApprovers[approversListIndex].approvers\n \"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [reviewerWorkflowType]=\"workflowType\"\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n [workflowList]=\"workflowList\"\n [workflowText]=\"'Approval Workflow'\"\n >\n </app-owner-list>\n\n <app-frequency-container\n *ngIf=\"activeSelector === 'frequency'\"\n [mode]=\"'policy'\"\n [frequencyDetails]=\"frequencyDetails\"\n (selectedFrequency)=\"frequencyData($event)\"\n [feature]=\"feature\"\n [pageType]=\"'policy'\"\n (closeFrequency)=\"disableSelector()\"\n ></app-frequency-container>\n\n <app-frequency-container\n *ngIf=\"activeSelector === 'reviewerFrequency'\"\n [mode]=\"'reviewerFrequency'\"\n [frequencyDetails]=\"reviewerFrequencyDetails\"\n (selectedFrequency)=\"reviewerFrequencyData($event)\"\n [feature]=\"feature\"\n [pageType]=\"'policy'\"\n (closeFrequency)=\"disableSelector()\"\n ></app-frequency-container>\n\n <vc-link-program\n *ngIf=\"activeSelector === 'linkProgram'\"\n (close)=\"disableSelector()\"\n [policy]=\"policyForm\"\n [selectedProgram]=\"policyForm?.programSelectedValues\"\n [mode]=\"mode\"\n [selectedLinkProgram]=\"selectedLinkProgram\"\n (changeTab)=\"changeTab('linkedPrograms')\"\n (updatedProgramDetails)=\"updatedProgramDetails($event)\"\n >\n </vc-link-program>\n\n <app-checkpoints-policy-container\n (closeCheckPoint)=\"disableSelector()\"\n [checkpointData]=\"policyForm?.checkpointDetails\"\n [requiredPoint]=\"policyForm?.passingMarks\"\n *ngIf=\"activeSelector === 'checkpoints'\"\n (saveCheckPoint)=\"saveSelectedList('checkpoints', $event)\"\n ></app-checkpoints-policy-container>\n <app-loader-inline *ngIf=\"loader\"></app-loader-inline>\n\n <app-approval-workflow\n *ngIf=\"enableApprovalWorkflow\"\n [selectedCategory]=\"policyForm?.selectedCategories\"\n [approverWorkFlowList]=\"approverWorkFlowList\"\n [allApprovers]=\"allApprovers\"\n (listCancelClicked)=\"listCancelClicked($event)\"\n (selectedWorkflowNext)=\"selectedApprovalWorkflow($event)\"\n (saveApprovalWorkflow)=\"approvalWorkflowAPICall($event)\"\n [editApprovalWorkflow]=\"editApprovalWorkflow\"\n [createApprovalClick]=\"createApprovalClick\"\n (closeCreateClicked)=\"closeClickedCreateForm()\"\n [editWorkflowLevel]=\"editWorkflowLevel\"\n ></app-approval-workflow>\n <!-- <app-select-approvers></app-select-approvers> -->\n\n <app-policy-access\n *ngIf=\"activeSelector === 'policyAccess'\"\n [policyAccessType]=\"policyForm?.policy_access_type\"\n (close)=\"disableSelector()\"\n [orgUsersList]=\"usersList\"\n [usersAccessList]=\"usersAccessList\"\n [groupList]=\"overseerGroupsList\"\n [groupsAccessList]=\"groupsAccessList\"\n [selectedUsers]=\"policyForm?.policy_access_owners\"\n [selectedGroups]=\"policyForm?.policy_access_groups\"\n [disabledIds]=\"usersAccessListIds\"\n [disabledGroupIds]=\"groupsAccessListIds\"\n [futureUsersWillSelect]=\"policyForm?.availableOnPortal\"\n (saveCheckPoint)=\"saveSelectedList('policyAccess', $event)\"\n (setPolicyAccessType)=\"policyForm.policy_access_type = $event\"\n >\n </app-policy-access>\n</ng-container>\n<ng-container *ngIf=\"showCreateDocuments\">\n <!-- <app-create-documents *ngIf=\"showCreateDocuments\"\n [organization_id]=\"organization_id\"\n [member_obj_id]=\"member_obj_id\"\n [userInfo]=\"userInfo\"\n [policyId]=\"policyId\"\n [policyName]=\"policyForm.policyName\"\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n (editPolicy)=\"editPolicyFromDocuments()\"\n ></app-create-documents> -->\n <lib-document-section\n *ngIf=\"showCreateDocuments\"\n [templateView]=\"templateView\"\n [organization_id]=\"organization_id\"\n [member_obj_id]=\"member_obj_id\"\n [userInfo]=\"userInfo\"\n [policyId]=\"policyId\"\n [feature]=\"feature\"\n [templateUrl]=\"templateUrl\"\n [policyName]=\"policyForm.policyName\"\n (disconnectRefresh)=\"disconnectRefresh.emit(false)\"\n (editPolicy)=\"editPolicyFromDocuments()\"\n (openTemplate)=\"templateView = true\"\n ></lib-document-section>\n</ng-container>\n\n<app-assessment-list\n *ngIf=\"activeSelector === 'isAssessment'\"\n [program_ids]=\"''\"\n [isEdit]=\"policyForm?.assessment?.length\"\n (cancelAssessment)=\"saveSelectedList('isAssessment', false)\"\n [selectedAssessment]=\"policyForm?.assessment[0]\"\n [mode]=\"'policy'\"\n (onAssessmentSelect)=\"\n onAssessmentSelect($event); saveSelectedList('isAssessment', false)\n \"\n></app-assessment-list>\n\n<app-owner-list\n *ngIf=\"activeSelector === 'approvers' && false\"\n [listHeading]=\"'Select Approvers'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"true\"\n [selectedUsers]=\"\n addMoreLevels\n ? []\n : policyForm.selectedApprovers[approversListIndex].approvers\n \"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('approvers', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [reviewerWorkflowType]=\"workflowType\"\n (reviewerWorkflowTypeChange)=\"reviewerTypeChange($event)\"\n [workflowList]=\"workflowList\"\n [workflowText]=\"'Approval Workflow'\"\n>\n</app-owner-list>\n\n<app-owner-list\n *ngIf=\"activeSelector === 'owners'\"\n [listHeading]=\"'Select Owner(s)'\"\n [singularText]=\"'User selected'\"\n [pluralText]=\"'Users selected'\"\n [usersList]=\"allApprovers\"\n [showWorkflow]=\"false\"\n [userIdKey]=\"'member_id'\"\n [itemEmailKey]=\"'member_email'\"\n [itemNameKey]=\"'member_name'\"\n (saveSelectedList)=\"saveSelectedList('owners', $event)\"\n (closeUsersList)=\"disableSelector()\"\n [mode]=\"mode\"\n [selectedUsers]=\"policyForm?.policy_owners ?? []\"\n>\n</app-owner-list>\n\n<app-select-template-list\n *ngIf=\"templateView\"\n [selectedCategoryId]=\"policyForm?.selectedCategories\"\n [feature]=\"feature\"\n (onTemplateSelect)=\"onTemplateSelect($event)\"\n></app-select-template-list>\n", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";::ng-deep .workflow-policy{position:relative}::ng-deep .workflow-policy app-cs-switch{display:block}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value{color:#747576!important;font-size:11px!important;font-weight:500!important;justify-content:flex-end!important;line-height:16px;width:100%!important}::ng-deep .workflow-policy app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:12px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 8px 0 4px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected{height:56px;padding:4px 12px 8px;display:block}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label{min-width:auto;padding:0;text-align:left;margin:0 0 4px;border-right:none;width:100%;display:flex;align-items:center}::ng-deep .workflow-policy .form-group-row .right .approval-workflow .selected .workflow-label p.description{font-size:10px;margin-left:6px}::ng-deep .workflow-policy .form-group-row .right .approval-workflow cs-select .selection-wrap .input-group:before{display:none!important}::ng-deep .workflow-policy app-frequency-container app-frequency-weekly .frequency-weekly app-frequency-lifecycle .frequency-lifecycle-responsibility-inner-item{height:unset!important}.disabled{opacity:.5;pointer-events:none}.who-toggle{margin-top:10px}\n", "@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}::-webkit-scrollbar{width:3px;height:3px;background-color:transparent;position:absolute}::-webkit-scrollbar-thumb{border-radius:3px;background-color:#dbdbdb;position:absolute}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}button{font-family:Poppins,sans-serif}::ng-deep input.textField{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;font-size:13px;color:#747576;padding:8px 12px;position:relative;height:2.5rem;width:100%;transition:all .2s ease-in-out}::ng-deep input.textField::placeholder{font-size:13px;color:#747576}::ng-deep input.textField:hover,::ng-deep input.textField:focus{outline:none;border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectBoxEnable:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#747576;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .selectBoxEnable:hover,::ng-deep .selectBoxEnable:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectBoxEnable.disabled{background:#f1f1f1;pointer-events:none;opacity:1}::ng-deep .selectBoxEnable.withBtn:after{display:none}::ng-deep .selectBoxEnable.withBtn button.setBtn{background:transparent;border-radius:0;border:none;min-width:98px}::ng-deep .selectBoxSuccess{background:#f8f8f8;border-radius:.25rem;border:1px solid #f1f1f1;min-height:2.5rem;position:relative}::ng-deep .selectBoxSuccess .selectBoxText{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:22rem}::ng-deep .selectBoxSuccess button{background:transparent;border-radius:0;border:none}::ng-deep .selectBoxSuccess button.deleteBtn{color:#d93b41}::ng-deep .selectBoxSuccess .level-left{border-right:1px solid #f1f1f1;height:2.375rem;width:5rem}::ng-deep .selectBoxSuccess .level-left .level-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:4.5rem}::ng-deep .chipContainer{background:#fff;border-radius:.125rem;box-shadow:0 0 2px #1e5dd340;height:1.5rem}::ng-deep .chipContainer .cross{cursor:pointer;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:2px;margin-left:-4px}::ng-deep .chipContainer .cross:hover{background:#f1f1f1}::ng-deep .chipContainer .chipName{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:6rem}::ng-deep .chipContainer .chipName.no-width{max-width:unset}::ng-deep .chipContainer .chipName.full-width{max-width:25rem}::ng-deep .chipContainer button.countBtn{background:#1e5dd3;border-radius:1.25rem;border:none;min-width:1.5rem;height:1rem;margin:0 0 0 .5rem;padding:0 .25rem}::ng-deep .chipContainer button.countBtn.greenBg{background:#34aa44}::ng-deep .workflowLavel{background:#f1f1f1;border-radius:.125rem;color:#042e7d;min-width:1rem;height:1rem}::ng-deep .reviewSelection{border-radius:.25rem;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep .reviewSelection:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .selectButton{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;cursor:pointer;height:2.5rem;position:relative;transition:all .2s ease-in-out}::ng-deep .selectButton:hover,::ng-deep .selectButton:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep button.createNewBtn{background:transparent;border-radius:0;border:none}::ng-deep .vx-form-group{display:block;position:relative;margin-bottom:20px}::ng-deep .vx-form-group:after{content:\"\";display:block;clear:both}::ng-deep .vx-form-group .select{position:relative}::ng-deep .vx-form-group .select:after{border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px;border-color:#707070;content:\"\";display:inline-block;right:12px;position:absolute;top:calc(50% - 4px);width:5px;height:5px;transform:rotate(45deg)}::ng-deep .vx-form-group .select input{cursor:pointer;padding-right:30px!important}::ng-deep .vx-form-group .select .custom-input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#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 #1e5dd345}::ng-deep .vx-form-group .select .custom-input.frequency-custom-input{padding-right:108px;display:flex;align-items:center}::ng-deep .vx-form-group .select+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .select+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .select+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .select~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .select~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .select.button-sec:after{display:none}::ng-deep .vx-form-group .select.button-sec button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;position:absolute;top:12px;right:8px;padding:0;margin:0}::ng-deep .vx-form-group .select+.vx-control-panel{margin-top:8px}::ng-deep .vx-form-group .select+.selected{margin-top:8px}::ng-deep .vx-form-group .select.select{margin-top:8px}::ng-deep .vx-form-group .upload-format{border:1px solid #dbdbdb;border-radius:4px;padding:8px 12px;display:block}::ng-deep .vx-form-group .upload-format span.text{line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%;display:block;margin-bottom:6px}::ng-deep .vx-form-group .upload-format .radio-group{display:flex}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio{display:inline-block}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;margin-left:8px}::ng-deep .vx-form-group .upload-format .radio-group app-cs-radio+app-cs-radio{margin-left:12px}::ng-deep .vx-form-group .upload-format~.upload-format{margin-top:4px}::ng-deep .vx-form-group .form-tab{display:flex;justify-content:flex-start}::ng-deep .vx-form-group .form-tab button{background:transparent;color:#161b2f;font-size:11px;line-height:16px;text-transform:uppercase;cursor:pointer;padding:8px 8px 8px 0;border:none;outline:none;font-weight:500}::ng-deep .vx-form-group .form-tab button:disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .form-tab button+button{padding:8px}::ng-deep .vx-form-group .form-tab button.active{color:#1e5dd3}::ng-deep .vx-form-group .tab-group{border:1px solid #dbdbdb;border-radius:4px;padding:0;display:block;position:relative;transition:all .2s ease-in-out}::ng-deep .vx-form-group .tab-group:hover{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group .tab-group .upload-file{padding:16px 62px 16px 24px;display:flex;align-items:center;justify-content:space-between}::ng-deep .vx-form-group .tab-group .upload-file .image{width:80px}::ng-deep .vx-form-group .tab-group .upload-file .browse span{display:inline-block;font-size:12px;color:#747576;line-height:16px;padding:0 4px}::ng-deep .vx-form-group .tab-group .upload-file .browse .label{font-size:11px;color:#1e5dd3;line-height:16px;font-weight:600;text-transform:uppercase;margin:0;padding:0}::ng-deep .vx-form-group .tab-group .upload-file .browse .label input{opacity:0;position:absolute;margin:0;padding:0;inset:0;cursor:pointer;width:100%}::ng-deep .vx-form-group .tab-group.active{border-color:#1e5dd3}::ng-deep .vx-form-group .tab-group.uploaded{margin-top:4px}::ng-deep .vx-form-group .tab-group.uploaded .upload-file{padding:8px 0!important;text-align:center}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .image{display:none}::ng-deep .vx-form-group .tab-group.uploaded .upload-file .browse{width:100%;text-align:center}::ng-deep .vx-form-group .tab-group+label.vx-form-group{margin-top:8px;margin-bottom:4px}::ng-deep .vx-form-group .file-list{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:4px;padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative}::ng-deep .vx-form-group .file-list span.file-name{color:#747576;line-height:16px;font-size:11px;font-weight:400;cursor:pointer;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .vx-form-group .file-list .button-group{display:flex}::ng-deep .vx-form-group .file-list button{font-size:12px;color:#eb2424;cursor:pointer;display:flex;padding:0;border:none;outline:none;background:transparent}::ng-deep .vx-form-group .file-list button.edit{color:#1e5dd3}::ng-deep .vx-form-group .file-list button+button{margin-left:16px}::ng-deep .vx-form-group .file-list+.file-list{margin-top:4px}::ng-deep .vx-form-group .file-list .file-container{display:flex;justify-content:space-between;width:100%}::ng-deep .vx-form-group .file-list.policy{background:#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:13px!important}::ng-deep .vx-form-group .file-list cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .vx-form-group .file-list app-line-loader{display:block;position:absolute;left:10px;right:10px;bottom:0}::ng-deep .vx-form-group label.vx-control-panel{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:8px;display:block;text-transform:uppercase;text-align:left}::ng-deep .vx-form-group label.vx-control-panel.custom-tag{font-size:10px}::ng-deep .vx-form-group label.vx-control-panel.vx-mt-8{margin-top:8px}::ng-deep .vx-form-group label.vx-control-panel span.required{color:#eb2424;font-size:14px;font-weight:500;position:relative;top:-2px}::ng-deep .vx-form-group label.vx-control-panel .button{background:transparent;border:none;display:inline-flex;float:right;color:#1e5dd3;text-transform:uppercase;font-weight:600;cursor:pointer;font-size:11px;padding:0;margin:0}::ng-deep .vx-form-group label.vx-control-panel app-cs-switch{float:right;display:block}::ng-deep .vx-form-group label.vx-control-panel i{margin-left:8px;font-size:12px;color:#1e5dd3;cursor:pointer;position:relative;top:1px}::ng-deep .vx-form-group label.vx-control-panel i.depreciation-icon{color:#e4b700;font-size:16px;position:relative;top:3px}::ng-deep .vx-form-group label.vx-control-panel .checkpoint-version{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:10px;font-weight:600;line-height:14px;margin-left:4px;padding:0 2px}::ng-deep .vx-form-group input[type=text],::ng-deep .vx-form-group .input{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#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[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{color:#747576;font-weight:400}::ng-deep .vx-form-group input[type=text]:focus,::ng-deep .vx-form-group .input:focus,::ng-deep .vx-form-group input[type=text]:hover,::ng-deep .vx-form-group .input:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group input[type=text].error,::ng-deep .vx-form-group .input.error{border-color:#eb2424;color:#eb2424;margin-bottom:4px}::ng-deep .vx-form-group input[type=text].error:focus,::ng-deep .vx-form-group .input.error:focus{box-shadow:0 0 5px #d31e1e45}::ng-deep .vx-form-group input[type=text]:disabled,::ng-deep .vx-form-group .input:disabled{background:#f1f1f1;cursor:not-allowed;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group input[type=text]:disabled:hover,::ng-deep .vx-form-group .input:disabled:hover{border-color:#dbdbdb;box-shadow:none}::ng-deep .vx-form-group input[type=text] span.text,::ng-deep .vx-form-group .input span.text{font-size:13px;color:#747576;font-weight:400;display:block;width:100%}::ng-deep .vx-form-group input[type=text] .input-group,::ng-deep .vx-form-group .input .input-group{display:flex;align-items:center}::ng-deep .vx-form-group input[type=text] .input-group.counter,::ng-deep .vx-form-group .input .input-group.counter{min-width:96px;width:96px}::ng-deep .vx-form-group input[type=text] .input-group.counter button,::ng-deep .vx-form-group .input .input-group.counter button{height:24px;width:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#747576;font-size:8px;cursor:pointer;outline:none}::ng-deep .vx-form-group input[type=text] .input-group.counter input,::ng-deep .vx-form-group .input .input-group.counter input{-webkit-appearance:textfield;-moz-appearance:textfield;height:24px;width:calc(100% - 48px);border:1px solid #f1f1f1;outline:none;padding:0 6px;text-align:center}::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-inner-spin-button,::ng-deep .vx-form-group input[type=text] .input-group.counter input::-webkit-outer-spin-button,::ng-deep .vx-form-group .input .input-group.counter input::-webkit-outer-spin-button{appearance:none;margin:0}::ng-deep .vx-form-group input[type=text]+.file-list,::ng-deep .vx-form-group .input+.file-list{margin-top:8px}::ng-deep .vx-form-group input[type=text]::placeholder,::ng-deep .vx-form-group .input::placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]:-ms-input-placeholder,::ng-deep .vx-form-group .input:-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group input[type=text]::-ms-input-placeholder,::ng-deep .vx-form-group .input::-ms-input-placeholder{font-size:13px}::ng-deep .vx-form-group .classification{height:40px;border-radius:4px;border:1px solid #dbdbdb;background:#fff;padding:8px 12px;display:flex;justify-content:space-between}::ng-deep .vx-form-group .classification label{margin:0 4px 0 0;width:100%;position:relative;z-index:1}::ng-deep .vx-form-group .classification label span{display:block;width:100%;height:24px;border:1px solid #f1f1f1;border-radius:2px;line-height:24px;font-size:10px;text-align:center;color:#747576;font-weight:500;position:relative;text-transform:uppercase}::ng-deep .vx-form-group .classification label span:before{height:2px;content:\"\";top:0;right:0;left:0;border-radius:2px;position:absolute;transition:all .2s ease-in-out}::ng-deep .vx-form-group .classification label input{opacity:0;position:absolute;inset: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;user-select:none}::ng-deep .vx-form-group .selected .chip-container span.chip i{font-weight:400;margin-right:8px;cursor:pointer;font-size:10px;position:relative;top:1px}::ng-deep .vx-form-group .selected .chip-container span.chip span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}::ng-deep .vx-form-group .selected .chip-container span.chip+span.chip{margin-left:4px}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question{display:flex;align-items:center;justify-content:space-between;width:100%}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.value{color:#1e5dd3;font-size:12px;font-weight:400;line-height:24px;padding:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:calc(100% - 80px)}::ng-deep .vx-form-group .selected .chip-container span.chip.with-question span.label{background:#f1f1f1;border-radius:2px;color:#042e7d;font-size:9px;font-weight:600;text-transform:uppercase;padding-left:4px;padding-right:4px;line-height:12px;margin-left:8px}::ng-deep .vx-form-group .selected .chip-container span.value{color:#747576;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 52px);padding:0 4px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text{color:#747576;font-size:10px;font-weight:500;padding:0 8px;width:122px;line-height:14px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first{position:relative;min-width:162px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text.first:before{background:#f1f1f1;content:\"\";position:absolute;top:0;right:0;height:calc(100% + 12px);width:1px}::ng-deep .vx-form-group .selected .chip-container span.checkpoint-point-text .no{color:#1e5dd3}::ng-deep .vx-form-group .selected .chip-container.plus span.chip{max-width:calc(50% - 35px)}::ng-deep .vx-form-group .selected .chip-container.more-one span.chip{max-width:50%}::ng-deep .vx-form-group .selected .chip-container .chip-inner{background:#fff;border-radius:2px;box-shadow:0 2px 4px #1e5dd31a;line-height:24px;padding:0 4px 0 8px;display:flex;align-items:center}::ng-deep .vx-form-group .selected .chip-container .chip-inner .chip{background:transparent;border-radius:0;box-shadow:none;height:auto;line-height:unset;padding:0;color:#747576;max-width:100px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count{border-radius:20px;height:16px;padding:0 6px;border:none;font-size:9px;line-height:16px;margin-left:4px;min-width:20px}::ng-deep .vx-form-group .selected .chip-container .chip-inner button.count.user{background:#34aa44}::ng-deep .vx-form-group .selected .chip-container .chip-inner i.cross{cursor:pointer;position:relative;top:1px;font-size:8px}::ng-deep .vx-form-group .selected button.count{background:#1e5dd3;border-radius:2px;height:24px;padding:0 8px;border:1px solid #1e5dd3;cursor:pointer;outline:none;color:#fff;font:13px;font-weight:500;line-height:20px;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit{border:none;border-radius:0;background:transparent;outline:none;cursor:pointer;display:block;font-size:11px;font-weight:600;color:#1e5dd3;text-transform:uppercase;white-space:nowrap;margin-left:8px}::ng-deep .vx-form-group .selected button.edit i{font-weight:400;font-size:8px;margin-right:4px}::ng-deep .vx-form-group .selected button.close-btn{background:transparent;border:none;padding:0;margin-left:8px;font-size:10px;color:#c7381b;display:flex;align-items:center}::ng-deep .vx-form-group .selected .workflow-label{min-width:92px;padding:4px;text-align:center;margin-left:-8px;margin-right:8px;border-right:1px solid #f1f1f1}::ng-deep .vx-form-group .selected .workflow-label p{margin:0;display:block;text-transform:uppercase}::ng-deep .vx-form-group .selected .workflow-label p.title{font-size:9px;line-height:12px;color:#161b2f;font-weight:500}::ng-deep .vx-form-group .selected .workflow-label p.description{font-size:11px;line-height:16px;color:#161b2f;font-weight:600}::ng-deep .vx-form-group .selected .workflow-label+.chip-container{width:calc(100% - 148px)}::ng-deep .vx-form-group .selected+.selected{margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .selected+app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:5px;text-transform:uppercase}::ng-deep .vx-form-group .selected+app-cs-switch.who-toggle label.cs-switch span.value{color:#747576}::ng-deep .vx-form-group .selected+app-cs-radio{margin-top:8px!important}::ng-deep .vx-form-group .selected~app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;font-weight:500;color:#707070}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group .selected~app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group .selected.readOnly{pointer-events:none}::ng-deep .vx-form-group .selected span.chip{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .vx-form-group .select-list{position:absolute;background:#fff;box-shadow:0 0 5px #1e5dd345;top:100%;right:0;left:0;z-index:2}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item{width:100%;padding:12px 16px}::ng-deep .vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover{background:#f8f8f8}::ng-deep .vx-form-group ::ng-deep vcomply-editor{margin-top:8px;display:block;pointer-events:auto!important;z-index:1}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container .editable-block ul{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ul li{list-style:disc}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol{padding:0 0 0 10px;margin-top:0}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container .editable-block ol li{list-style:decimal}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep .vx-form-group ::ng-deep vcomply-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 ::ng-deep vcomply-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 ::ng-deep vcomply-editor .editor-container:focus-within{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:focus-within .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover{border-color:#1e5dd3!important;box-shadow:0 3px 6px #1e5dd31a}::ng-deep .vx-form-group ::ng-deep vcomply-editor .editor-container:hover .editor-tools{border-color:#1e5dd3!important}::ng-deep .vx-form-group ::ng-deep vcomply-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;background:#fff}::ng-deep .vx-form-group .date-time-picker:focus-within{border-color:#1e5dd3;box-shadow:0 0 5px #1e5dd345}::ng-deep .vx-form-group .date-time-picker .picker-group{width:50%;position:relative;display:flex;align-items:center}::ng-deep .vx-form-group .date-time-picker .picker-group:first-of-type{border-right:1px solid #dbdbdb}::ng-deep .vx-form-group .date-time-picker .picker-group:only-of-type{border:none;width:100%}::ng-deep .vx-form-group .date-time-picker .picker-group input{height:38px;background:transparent;line-height:38px;font-size:13px;color:#747576;transition:all .2s ease-in-out;width:100%;font-weight:400;border:none;padding:0 12px 0 34px;outline:none}::ng-deep .vx-form-group .date-time-picker .picker-group input:focus,::ng-deep .vx-form-group .date-time-picker .picker-group input:hover{box-shadow:none;border:none}::ng-deep .vx-form-group .date-time-picker .picker-group input::placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input:-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group input::-ms-input-placeholder{color:#999;font-size:13px}::ng-deep .vx-form-group .date-time-picker .picker-group i{display:flex;justify-content:center;align-items:center;height:16px;width:12px;position:absolute;left:12px;top:0;color:#747576;font-size:12px;pointer-events:none}::ng-deep .vx-form-group app-cs-radio.main-filed{margin-top:4px;display:block;width:100%}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item{width:100%;position:relative}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.radio{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value{font-size:11px;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0;max-width:100%;color:#707070}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item span.value i{font-size:12px;color:#1e5dd3}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item svg{position:absolute;top:8px;left:12px}::ng-deep .vx-form-group app-cs-radio.main-filed label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .vx-form-group app-cs-radio.disabled{pointer-events:none;opacity:.5;filter:grayscale(1);background:#f1f1f1}::ng-deep .vx-form-group .switch-row{display:flex}::ng-deep .vx-form-group .switch-row app-cs-switch{display:block;margin-top:8px}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value{white-space:nowrap;margin-right:0;text-transform:uppercase;color:#747576!important}::ng-deep .vx-form-group .switch-row app-cs-switch label.cs-switch span.value i{display:inline-flex;font-size:11px;cursor:pointer;color:#1e5dd3;align-items:center;line-height:16px;margin:0 4px}::ng-deep .vx-form-group .switch-row app-cs-switch+app-cs-switch{margin-left:8px}::ng-deep .vx-form-group .switch-row.align-right{justify-content:flex-end}::ng-deep .vx-form-group .switch-row.align-right label.cs-switch span.value{margin-right:8px}::ng-deep .vx-form-group .risk-type-field{background:#f8f8f8;border:1px solid #dbdbdb;border-radius:4px;height:40px;display:flex;align-items:center;padding:4px;position:relative;z-index:1}::ng-deep .vx-form-group .risk-type-field .type-item{width:50%;position:relative}::ng-deep .vx-form-group .risk-type-field .type-item button{background:transparent;border:none;border-radius:0;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase;width:100%;height:32px;padding:0 12px;text-align:left}::ng-deep .vx-form-group .risk-type-field .type-item button.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item .info{color:#1e5dd3;font-size:12px;position:absolute;top:10px;right:12px;cursor:pointer}::ng-deep .vx-form-group .risk-type-field .type-item .info.disabled{background:transparent!important;color:#dbdbdb!important;filter:unset!important;opacity:unset!important;pointer-events:none;-webkit-user-select:none;user-select:none}::ng-deep .vx-form-group .risk-type-field .type-item.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:212px;height:32px;z-index:-1;transition:.25s ease-out}.left{width:36px;height:36px;margin-top:26px;margin-left:-58px;margin-right:20px;display:flex;justify-content:center;align-items:center;position:relative;z-index:10;border-radius:50%}.left.deadline-completed{margin-top:18px}.left.checked{background:transparent}.left img{width:36px}.left .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-top:0}.left .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}.left .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}.right{width:100%}.right span.indicator{position:absolute;top:36px;left:-16px;font-size:12px;color:#f0b819;cursor:pointer}.form-group-row{display:flex;position:relative;transition:all .2s ease-in-out}.form-group-row.disabled{-webkit-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);z-index:2}.form-group-row.disabled .left{position:relative}.form-group-row.disabled .left:before{content:\"\";position:absolute;inset:2px 0 0 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 input,.form-group-row.active .right .vx-form-group .custom-input,.form-group-row.active .right .vx-form-group .selectBoxEnable{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd31a}.form-group-row.active .right .vx-form-group .selectBoxEnable.disabled{border-color:#dbdbdb;box-shadow:none}::ng-deep .radio-group-selector app-cs-radio{margin-top:4px;display:block;width:100%}::ng-deep .radio-group-selector app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .radio-group-selector app-cs-radio label.radio-item .radio,::ng-deep .radio-group-selector app-cs-radio label.radio-item .radiomark{position:absolute!important;top:9px;left:12px}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value{font-size:11px!important;text-transform:uppercase;border:1px solid #dbdbdb;border-radius:4px;padding:8px 8px 8px 36px;width:100%;display:flex;justify-content:space-between;margin:0!important;max-width:100%!important;font-weight:500!important;color:#707070!important}::ng-deep .radio-group-selector app-cs-radio label.radio-item .value i{font-size:12px;color:#1e5dd3}::ng-deep .radio-group-selector app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}::ng-deep .wf-action-list{width:220px}::ng-deep .wf-action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}::ng-deep .wf-action-list ul.action-item{display:block}::ng-deep .wf-action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}::ng-deep .wf-action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}::ng-deep .wf-action-list ul.action-item li button i{font-size:16px;margin-right:10px;color:#1e5dd3}::ng-deep .wf-action-list ul.action-item li button:hover{background:#f3f3f3}::ng-deep .wf-action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.within-con{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;overflow:hidden;background:#1e5dd3;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar img{width:100%}::ng-deep .wf-action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value{width:100%;color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}::ng-deep .wf-action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#747576;cursor:pointer;margin-right:5px}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image{display:block}::ng-deep .wf-action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}::ng-deep .wf-action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}::ng-deep .wf-action-list ul.action-item li .chip-item i{color:#747576;margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .wf-action-list ul.action-item li .chip-item span{display:block;width:auto;max-width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .wf-action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}::ng-deep .wf-action-list ul.action-item li .chip-item span.id{font-size:9px}::ng-deep .wf-action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}::ng-deep .wf-action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}::ng-deep .wf-action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}::ng-deep .wf-action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}::ng-deep .wf-action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes scale-up-center{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:8px;margin-bottom:0}.edit-loader{position:absolute;top:-3px;left:-3px;width:46px;height:46px;transform:rotate(180deg)}.circular-loader{animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto}.loader-path{stroke-dasharray:150,200;stroke-dashoffset:-10;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35}to{stroke-dasharray:89,200;stroke-dashoffset:-124}}::ng-deep .dropdown{position:fixed;background:#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;inset:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:#0000004d}::ng-deep .cdk-overlay-container{z-index:2147483002!important}::ng-deep .dp-popup{z-index:999;display:flex!important;align-items:center;justify-content:center;width:100vw;height:100vh;background:#0000004d!important;box-shadow:unset!important}::ng-deep .dp-popup dp-day-calendar{width:412px!important;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .dp-popup dp-day-calendar,::ng-deep .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .dp-popup dp-day-calendar button,::ng-deep .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}::ng-deep span.file{display:block;width:20px;min-width:20px;border-radius:0 0 2px 2px;border:1px solid transparent;border-color:#747576;position:relative;margin-right:5px;border-top:none;margin-top:5px;background:#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 0% 1%,#747576 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file:after{height:4px;left:-1px;right:3px;border-top:1px solid;border-right:none;border-left:1px solid;content:\"\";top:-4px;position:absolute;border-radius:2px 0 0;background:#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 0% 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#f31c39\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.pdf:after,::ng-deep span.file.template:after{border-color:#f31c39}::ng-deep span.file.pdf .format,::ng-deep span.file.template .format{color:#f31c39}::ng-deep span.file.xlsx,::ng-deep span.file.xls,::ng-deep span.file.css,::ng-deep span.file.scss,::ng-deep span.file.less{border-color:#34aa44}::ng-deep span.file.xlsx:before,::ng-deep span.file.xls:before,::ng-deep span.file.css:before,::ng-deep span.file.scss:before,::ng-deep span.file.less:before{background:linear-gradient(45deg,#34aa44 0% 1%,#34aa44 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.xlsx:after,::ng-deep span.file.xls:after,::ng-deep span.file.css:after,::ng-deep span.file.scss:after,::ng-deep span.file.less:after{border-color:#34aa44;color:#34aa44}::ng-deep span.file.xlsx .format,::ng-deep span.file.xls .format,::ng-deep span.file.css .format,::ng-deep span.file.scss .format,::ng-deep span.file.less .format{color:#34aa44}::ng-deep span.file.doc,::ng-deep span.file.docx,::ng-deep span.file.psd{border-color:#1e5dd3}::ng-deep span.file.doc:before,::ng-deep span.file.docx:before,::ng-deep span.file.psd:before{background:linear-gradient(45deg,#1e5dd3 0% 1%,#1e5dd3 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.doc:after,::ng-deep span.file.docx:after,::ng-deep span.file.psd:after{border-color:#1e5dd3}::ng-deep span.file.doc .format,::ng-deep span.file.docx .format,::ng-deep span.file.psd .format{color:#1e5dd3}::ng-deep span.file.ppt,::ng-deep span.file.ai,::ng-deep span.file.html,::ng-deep span.file.jpg,::ng-deep span.file.jpeg,::ng-deep span.file.png{border-color:#f6882f}::ng-deep span.file.ppt:before,::ng-deep span.file.ai:before,::ng-deep span.file.html:before,::ng-deep span.file.jpg:before,::ng-deep span.file.jpeg:before,::ng-deep span.file.png:before{background:linear-gradient(45deg,#f6882f 0% 1%,#f6882f 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.ppt:after,::ng-deep span.file.ai:after,::ng-deep span.file.html:after,::ng-deep span.file.jpg:after,::ng-deep span.file.jpeg:after,::ng-deep span.file.png:after{border-color:#f6882f}::ng-deep span.file.ppt .format,::ng-deep span.file.ai .format,::ng-deep span.file.html .format,::ng-deep span.file.jpg .format,::ng-deep span.file.jpeg .format,::ng-deep span.file.png .format{color:#f6882f}::ng-deep span.file.php{border-color:#7aa6f7}::ng-deep span.file.php:before{background:linear-gradient(45deg,#7aa6f7 0% 1%,#7aa6f7 50%,#2989d800 51%,#7db9e800);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"#34aa44\",endColorstr=\"#007db9e8\",GradientType=1)}::ng-deep span.file.php:after{border-color:#7aa6f7}::ng-deep span.file.php .format{color:#7aa6f7}::ng-deep ngx-material-timepicker-container .timepicker-backdrop-overlay{background-color:#0000000d!important;z-index:9999999999!important}::ng-deep ngx-material-timepicker-container .timepicker-overlay{z-index:9999999999!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker{width:232px!important;border-radius:2px!important;box-shadow:0 4px 30px #161b2f26!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header{background-color:#fff!important;padding:0!important;border-radius:2px 2px 0 0}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container{display:block!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time{color:#000!important;width:150px!important;margin:0 auto;line-height:60px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control{font-size:40px;background-color:transparent!important;color:#000!important;font-weight:600;text-align:right;caret-color:transparent;outline:none;font-family:Poppins;line-height:56px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:focus,::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control .timepicker-dial__control:hover{background-color:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time ngx-material-timepicker-dial-control:last-of-type .timepicker-dial__control{text-align:left}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__time span{padding:0 8px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period{display:flex!important;width:182px;margin:0 auto!important;background:#f1f1f1;padding:4px 10px;border-radius:20px;position:relative}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period:before{background:#f1f1f1;content:\"\";position:absolute;top:15px;left:-25px;width:calc(100% + 50px);height:2px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period{flex-direction:unset!important;position:relative;z-index:1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:after{content:\"\";position:absolute;right:-12px;top:0;border-left:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period:before{content:\"\";position:absolute;left:-18px;top:0;border-right:solid 14px #f1f1f1;border-bottom:solid 12px transparent;border-top:solid 12px transparent;z-index:-1}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button{font-size:11px;background-color:transparent;padding:0;border-radius:20px;color:#747576;font-weight:600;font-family:Poppins;width:84px;height:24px}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button.timepicker-dial__item_active{background:#fff!important;color:#1e5dd3!important;box-shadow:0 1px 2px #dbdbdb}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__header .timepicker-dial__container .timepicker-dial__period .timepicker-period button+button{margin-left:0!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face{width:200px!important;height:200px!important;padding:10px!important;background:transparent!important}::ng-deep ngx-material-timepicker-container ngx-material-timepicker-content .timepicker .timepicker__main-content .clock-face .clock-face__number--outer{height:92px!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 vcomply-editor{display:block}::ng-deep vcomply-editor .editor-container{border-radius:4px;border:1px solid #dbdbdb;transition:all .2s ease-in-out}::ng-deep vcomply-editor .editor-container:hover,::ng-deep vcomply-editor .editor-container:focus-within{border:1px solid #1e5dd3;box-shadow:0 3px 6px #1e5dd31a}::ng-deep vcomply-editor .editor-container mention-list ul li a{font-size:16px!important}::ng-deep vcomply-editor .editor-container .editable-block{background:#fff;min-height:60px;padding:8px 12px;line-height:20px;font-size:13px;color:#747576;font-weight:400;transition:all .2s ease-in-out;width:100%}::ng-deep vcomply-editor .editor-container .editable-block:before{color:#747576!important}::ng-deep vcomply-editor .editor-container .editor-tools{border-top:1px solid #dbdbdb;border-radius:0 0 3px 3px}::ng-deep vcomply-editor .editor-container .editor-tools:hover{border-color:#1e5dd3}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button{height:22px!important;width:22px!important;padding:0 5px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button svg{height:22px;width:12px}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col button.submit{width:80px!important;line-height:22px;justify-content:center}::ng-deep vcomply-editor .editor-container .editor-tools app-editor-menu .editor-menu .col .popover.small ul.option-list li button{width:100%!important;height:auto!important}::ng-deep marx-modal .popup-modal-background{background-color:#161b2fcc!important}::ng-deep .within-box{background:#f1f1f1;border-radius:.125rem;color:#042e7d}::ng-deep .within-value{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word}.wf-tooltip{pointer-events:none;position:absolute;max-width:300px;font-size:12px;text-align:left;color:#fff;padding:8px 12px;background:#000;border-radius:2px;z-index:-222;top:0;opacity:0;white-space:break-spaces;word-break:break-word}.wf-tooltip *{color:#fff!important}.wf-tooltip:empty{display:none!important}.wf-tooltip.white{box-shadow:0 2px 8px #1c5bd159;color:#747576;background:#fff;text-align:left}.wf-tooltip.white b{color:#747576!important}.wf-tooltip.animate-top{animation:animate-top .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-right{animation:animate-right .3s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-bottom{animation:animate-bottom .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip.animate-left{animation:animate-left .5s cubic-bezier(.25,.46,.45,.94) both}.wf-tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-left.white:after{border-color:transparent transparent transparent #f1f1f1}.wf-tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent #000000}.wf-tooltip-right.white:after{border-color:transparent #f1f1f1 transparent transparent}.wf-tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent #000000 transparent transparent}.wf-tooltip-bottom-right:after{bottom:100%;left:100%;margin-left:-20px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-right.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-bottom-left:after{bottom:100%;left:0;margin-left:10px;border-width:5px;border-color:transparent transparent #000000 transparent}.wf-tooltip-bottom-left.white:after{border-color:transparent transparent #f1f1f1 transparent}.wf-tooltip-top-left:after{top:100%;left:0;margin-left:10px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-left.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip-top-right:after{top:100%;left:100%;margin-left:-5px;border-width:5px;border-color:#000000 transparent transparent transparent}.wf-tooltip-top-right.white:after{border-color:#f1f1f1 transparent transparent transparent}.wf-tooltip:after{content:\"\";position:absolute;border-style:solid}.wf-tooltip span.within{font-size:80%;display:block;width:100%}.wf-tooltip .small{display:block;font-size:10px}.wf-tooltip .within-box{background:#f1f1f1;border-radius:2px;color:#042e7d!important;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 2px;margin-right:2px}.wf-tooltip-show{pointer-events:none;opacity:1;z-index:2147483001}\n"] }]
39167
39208
  }], ctorParameters: function () { return [{ type: PolicyService }, { type: SnackBarService }, { type: UiKitService }, { type: AuthService$1 }, { type: ResponsibilityService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: FrequencyService }, { type: i1$1.PlatformLocation }, { type: i0.ChangeDetectorRef }, { type: RestApiService }, { type: CommonService }, { type: OrganizationUserService }, { type: OrganizationCommonService }, { type: ComplianceCommonService }, { type: IframeService }]; }, propDecorators: { pickerChanged: [{
39168
39209
  type: Output
39169
39210
  }], mode: [{