vcomply-workflow-engine 2.6.185 → 2.6.187

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 (52) hide show
  1. package/bundles/vcomply-workflow-engine.umd.js +41 -34
  2. package/bundles/vcomply-workflow-engine.umd.js.map +1 -1
  3. package/esm2015/lib/sharedComponents/floating-bar/floating-bar.component.js +3 -3
  4. package/esm2015/lib/sharedComponents/floating-bar/floating-bar.component.ngfactory.js +2 -2
  5. package/esm2015/lib/sharedComponents/frequency/frequency-annual/frequency-annual.component.js +2 -2
  6. package/esm2015/lib/sharedComponents/frequency/frequency-annual/frequency-annual.component.ngfactory.js +7 -7
  7. package/esm2015/lib/sharedComponents/frequency/frequency-biannual/frequency-biannual.component.js +2 -2
  8. package/esm2015/lib/sharedComponents/frequency/frequency-biannual/frequency-biannual.component.ngfactory.js +7 -7
  9. package/esm2015/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.js +5 -3
  10. package/esm2015/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.ngfactory.js +10 -4
  11. package/esm2015/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.ngsummary.json +1 -1
  12. package/esm2015/lib/sharedComponents/frequency/frequency-container/frequency-container.component.js +3 -3
  13. package/esm2015/lib/sharedComponents/frequency/frequency-container/frequency-container.component.ngfactory.js +65 -13
  14. package/esm2015/lib/sharedComponents/frequency/frequency-daily/frequency-daily.component.js +2 -2
  15. package/esm2015/lib/sharedComponents/frequency/frequency-daily/frequency-daily.component.ngfactory.js +6 -6
  16. package/esm2015/lib/sharedComponents/frequency/frequency-due-date/frequency-due-date.component.js +3 -3
  17. package/esm2015/lib/sharedComponents/frequency/frequency-due-date/frequency-due-date.component.ngfactory.js +99 -21
  18. package/esm2015/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.js +4 -3
  19. package/esm2015/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.ngfactory.js +74 -31
  20. package/esm2015/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.ngsummary.json +1 -1
  21. package/esm2015/lib/sharedComponents/frequency/frequency-monthly/frequency-monthly.component.js +2 -2
  22. package/esm2015/lib/sharedComponents/frequency/frequency-monthly/frequency-monthly.component.ngfactory.js +7 -7
  23. package/esm2015/lib/sharedComponents/frequency/frequency-on-completion-of/frequency-on-completion-of.component.js +3 -3
  24. package/esm2015/lib/sharedComponents/frequency/frequency-on-completion-of/frequency-on-completion-of.component.ngfactory.js +40 -4
  25. package/esm2015/lib/sharedComponents/frequency/frequency-one-time/frequency-one-time.component.js +3 -3
  26. package/esm2015/lib/sharedComponents/frequency/frequency-one-time/frequency-one-time.component.ngfactory.js +27 -19
  27. package/esm2015/lib/sharedComponents/frequency/frequency-ongoing/frequency-ongoing.component.js +4 -4
  28. package/esm2015/lib/sharedComponents/frequency/frequency-ongoing/frequency-ongoing.component.ngfactory.js +7 -7
  29. package/esm2015/lib/sharedComponents/frequency/frequency-quarterly/frequency-quarterly.component.js +2 -2
  30. package/esm2015/lib/sharedComponents/frequency/frequency-quarterly/frequency-quarterly.component.ngfactory.js +7 -7
  31. package/esm2015/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.js +5 -3
  32. package/esm2015/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.ngfactory.js +10 -4
  33. package/esm2015/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.ngsummary.json +1 -1
  34. package/esm2015/lib/sharedComponents/frequency/frequency-random/frequency-random.component.js +3 -3
  35. package/esm2015/lib/sharedComponents/frequency/frequency-random/frequency-random.component.ngfactory.js +24 -24
  36. package/esm2015/lib/sharedComponents/frequency/frequency-top/frequency-top.component.js +6 -4
  37. package/esm2015/lib/sharedComponents/frequency/frequency-top/frequency-top.component.ngfactory.js +62 -8
  38. package/esm2015/lib/sharedComponents/frequency/frequency-top/frequency-top.component.ngsummary.json +1 -1
  39. package/esm2015/lib/sharedComponents/frequency/frequency-weekly/frequency-weekly.component.js +3 -3
  40. package/esm2015/lib/sharedComponents/frequency/frequency-weekly/frequency-weekly.component.ngfactory.js +7 -7
  41. package/esm2015/lib/sharedComponents/owner-list/owner-list.component.js +1 -1
  42. package/esm2015/lib/sharedComponents/review-frequency/review-frequency.component.js +3 -3
  43. package/esm2015/lib/sharedComponents/review-frequency/review-frequency.component.ngfactory.js +12 -12
  44. package/esm2015/lib/workflow-engine.module.ngfactory.js +1 -1
  45. package/fesm2015/vcomply-workflow-engine.js +41 -34
  46. package/fesm2015/vcomply-workflow-engine.js.map +1 -1
  47. package/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.d.ts +1 -0
  48. package/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.d.ts +1 -0
  49. package/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.d.ts +1 -0
  50. package/lib/sharedComponents/frequency/frequency-top/frequency-top.component.d.ts +1 -0
  51. package/package.json +1 -1
  52. package/vcomply-workflow-engine.metadata.json +1 -1
@@ -7958,7 +7958,7 @@
7958
7958
  { type: i0.Component, args: [{
7959
7959
  selector: 'app-owner-list',
7960
7960
  template: "<div class=\"add-risk-owner-list\" [class.animate]=\"animation\">\r\n <div class=\"add-risk-owner-list-head\">\r\n <h3 class=\"add-risk-owner-list-title\">{{listHeading}}</h3>\r\n </div>\r\n <div class=\"add-risk-owner-list-body\">\r\n <div class=\"search-block\">\r\n <i class=\"icons\">&#xe90b;</i>\r\n <input type=\"text\" [(ngModel)]=\"search\" [attr.placeholder]=\"searchPlaceholder\" />\r\n </div>\r\n <ng-container *ngIf=\"(usersList | filter:search) as searchList\">\r\n <div class=\"body-top\" *ngIf=\"searchList?.length > 0 && search?.trim()?.length === 0\">\r\n <app-cs-checkbox [ngValue]=\"checkSelectAll()\" (ngValueChange)=\"selectAll($event)\">\r\n <strong>{{checkSelectAll(activeTab) ? 'Deselect All' : 'Select All'}}</strong>\r\n </app-cs-checkbox>\r\n </div>\r\n <ul class=\"owner-list\" [class.full-height]=\"false\" *ngIf=\"searchList.length > 0\">\r\n <li *ngFor=\"let user of searchList\" [appTooltip]=\"user | tooltipMessage: fromResponsibility:reviewerIds:overseerIds:assignorId:assigneeIds:'my_member_id':disabledIds?.includes(user[userIdKey])\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=true>\r\n <app-cs-checkbox [disabled]=\"disabledIds?.includes(user[userIdKey])\" [ngValue]=\"selectedIds?.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\">\r\n <span class=\"name\" >{{user[itemNameKey]}}</span>\r\n </app-cs-checkbox>\r\n </li>\r\n\r\n </ul>\r\n <app-no-data *ngIf=\"searchList.length === 0\" [noDataImage]=\"'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'\" [noDataText]=\"(noDataText?.length > 0? noDataText :'No Users Found')\"></app-no-data>\r\n </ng-container>\r\n </div>\r\n <app-floating-bar\r\n [selectedData]=\"selectedUsers|shortMerge : nonRemovableUsersList\"\r\n [displayElementKey]=\"itemNameKey\"\r\n [elementId]=\"userIdKey\"\r\n [nonRemovableUsersList]=\"nonRemovableUsersList\"\r\n [singularText]=\"singularText\"\r\n [pluralText]=\"pluralText\"\r\n (closeEvent)=\"save(selectedIds)\"\r\n (closeList)=\"close()\"\r\n (deleteEvent)=\"deleteEvent($event)\"\r\n (workflowTypeChanged)=\"workflowTypeChanged($event)\"\r\n [showWorkflow]=\"showWorkflow\"\r\n [workflowText]=\"workflowText\"\r\n [selectedWorkflow]=\"reviewerWorkflowType\"\r\n [workflowList]=\"workflowList\"\r\n [mode]=\"mode\"\r\n [workflowPlaceHolder]=\"''\"\r\n [isDisabled]=\"selectedUsers?.length === 0 || usersList?.length === 0\">\r\n </app-floating-bar>\r\n</div>\r\n",
7961
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-risk-owner-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:-1}::ng-deep .add-risk-owner-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-owner-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-owner-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-owner-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 112px)}::ng-deep .add-risk-owner-list-body.have-user{height:calc(100vh - 110px)}::ng-deep .add-risk-owner-list-body .search-block{position:relative}::ng-deep .add-risk-owner-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-owner-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-owner-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-owner-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-owner-list-body ul{padding:0;margin:0}::ng-deep .add-risk-owner-list-body ul.owner-list{display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 240px);overflow:auto;scrollbar-width:thin;padding:16px 0 0}::ng-deep .add-risk-owner-list-body ul.owner-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-owner-list-body ul.owner-list li{width:50%;padding:0 20px 16px 0;list-style:none}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio{display:flex}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label{width:100%}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-owner-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-owner-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
7961
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .add-risk-owner-list{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0;z-index:-1}::ng-deep .add-risk-owner-list-head{background:#fbfbfb;height:42px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:1px solid #f1f1f1;border-right:none}::ng-deep .add-risk-owner-list-title{color:#161b2f;font-size:15px;font-weight:500;margin:0!important;padding:0;line-height:21px}::ng-deep .add-risk-owner-list-close{background:transparent;border:none;outline:none;cursor:pointer;color:#000;font-size:12px;display:inline-block;padding:0}::ng-deep .add-risk-owner-list-body{padding:24px 40px 24px 36px;height:calc(100vh - 122px)}::ng-deep .add-risk-owner-list-body.have-user{height:calc(100vh - 120px)}::ng-deep .add-risk-owner-list-body .search-block{position:relative}::ng-deep .add-risk-owner-list-body .search-block input{height:44px;line-height:24px;padding:10px 15px 10px 40px;outline:none;border:1px solid #7475763f;border-radius:4px;width:100%;font-size:14px;color:#747576}::ng-deep .add-risk-owner-list-body .search-block input:focus{border-color:#1e5dd3}::ng-deep .add-risk-owner-list-body .search-block i{position:absolute;left:17px;font-size:12px;font-weight:400;top:17px;pointer-events:none;color:#f1f1f1}::ng-deep .add-risk-owner-list-body .body-top{display:flex;justify-content:space-between;padding:16px 0 0}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox{display:flex}::ng-deep .add-risk-owner-list-body .body-top app-cs-checkbox label span.value strong{color:#161b2f;font-size:14px;font-weight:600;white-space:nowrap}::ng-deep .add-risk-owner-list-body ul{padding:0;margin:0}::ng-deep .add-risk-owner-list-body ul.owner-list{display:flex;align-items:flex-start;flex-wrap:wrap;max-height:calc(100vh - 240px);overflow:auto;scrollbar-width:thin;padding:16px 0 0}::ng-deep .add-risk-owner-list-body ul.owner-list.full-height{max-height:calc(100vh - 180px)}::ng-deep .add-risk-owner-list-body ul.owner-list li{width:50%;padding:0 20px 16px 0;list-style:none}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio{display:flex}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label{width:100%}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value{width:auto;justify-content:flex-start;flex-wrap:wrap}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.name,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.name{color:#161b2f;font-weight:400;line-height:20px;display:block;width:100%;font-size:13px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-right:24px}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position{border-radius:2px;display:inline-flex;height:12px;align-items:center;padding:0 2px;text-transform:uppercase;font-size:9px;line-height:12px;font-weight:500}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.admin{background:#fff9e6;color:#f2bf19}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.key-admin,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.key-admin{background:#dff2e1;color:#34aa44}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.manager,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.manager{color:#4681ef;background:#d4e2fc}::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-checkbox label span.value span.position.executive,::ng-deep .add-risk-owner-list-body ul.owner-list li app-cs-radio label span.value span.position.executive{color:#747576;background:#f1f1f1}::ng-deep .add-risk-owner-list-body app-no-data{display:block;height:calc(100% - 100px)}::ng-deep .add-risk-owner-list.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
7962
7962
  },] }
7963
7963
  ];
7964
7964
  OwnerListComponent.ctorParameters = function () { return []; };
@@ -8133,8 +8133,8 @@
8133
8133
  FloatingBarComponent.decorators = [
8134
8134
  { type: i0.Component, args: [{
8135
8135
  selector: 'app-floating-bar',
8136
- template: "<div class=\"floating-bar\">\r\n <div class=\"floating-bar-container\">\r\n <div class=\"left\">\r\n <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\r\n <div class=\"chip\" *ngFor=\"let element of selectedData?.slice(0,1);let i = index\">\r\n <ng-container *ngIf=\"element\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition != 'right'\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\"> \r\n {{((selectedData.length<=2) && (i==selectedData.length-1)) && selectedData.length > 1? 'Final' : (i+1) }} </span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\">{{element[displayElementKey]}}</span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">{{element[displayElementKey] | slice:\r\n element[displayElementKey].length -1 }}</span>\r\n <i class=\"icons\"\r\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition == 'right'\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n </ng-container>\r\n </div>\r\n <div class=\"counter\" *ngIf=\"selectedData?.length>1\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">+{{selectedData?.slice(1)?.length}}</div>\r\n <div class=\"name\" *ngIf=\"selectedData?.length>1\"> \r\n <span *ngIf=\"selectedData?.slice(1).length === 1\">{{singularText}}</span>\r\n <span *ngIf=\"selectedData?.slice(1).length > 1\">{{pluralText}}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groupsEnabled\">\r\n <div class=\"name\" *ngIf=\"selectedData?.length>0 && groupsEnabled\">\r\n <div class=\"counter\" *ngIf=\"selectedData?.length>0\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">{{selectedData?.length}}</div>\r\n <span *ngIf=\"selectedData?.length === 1\">User {{selectedGroups && selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedData?.length > 1\">Users {{selectedGroups && selectedGroups?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <div class=\"counter group\" *ngIf=\"selectedGroups.length > 0\" appPopover (click)=\"groupPopover.popover()\" placement=\"left\">{{selectedGroups.length}}</div>\r\n <div class=\"name\" *ngIf=\"selectedGroups.length > 0\">{{selectedGroups?.length > 1 ?' User Groups selected ':'User Group selected'}}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"showFrequencyText\">\r\n <div class=\"name\">\r\n <span>You have selected <b>{{currentFrequency}}</b> frequency.</span>\r\n </div>\r\n </ng-container>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"center\" *ngIf=\"(showWorkflow && mode === 'CREATE' )||(showWorkflow && workflowList.includes('ROUND-ROBIN'))\">\r\n <label>\r\n {{workflowText}} \r\n <span class=\"icon\" *ngIf=\"workflowText=='Approval Workflow'\" libPopoverHover (mouseover)=\"dataTooltip.popover()\" (mouseleave)=\"dataTooltip.closePopover()\"\r\n placement=\"right\"><i class=\"icons\">&#xe91f;</i></span>\r\n\r\n </label>\r\n <popover-hover #dataTooltip>\r\n <div class=\"vx-info-card\">\r\n <div class=\"vx-info-card-body\">\r\n You can select from the following three options:<br>\r\n <strong>Sequential:</strong> The policy would be sent for approval one at a time in the sequence defined by you.<br>\r\n <strong>Round-robin:</strong> The policy will be sent for approval to all approvers at the same time. However, it is mandatory for all approvers to take action.<br>\r\n <strong>Any One:</strong> The policy will be sent for approval to all approvers at the same time. If anyone of the approver approves the policy, it will be considered as approved.\r\n </div>\r\n\r\n </div>\r\n </popover-hover>\r\n <cs-select [(ngModel)]=\"selectedWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\" [placeholder]=\"'Approval WorkFlow *'\" [setMaxWidth]=\"true\">\r\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\r\n {{data}}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n <div class=\"right\">\r\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n <button *ngIf=\"showNextButton\" [disabled]=\"isDisabled\" (click)=\"next()\" appRipple>Next <i class=\"icons\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>\r\n<app-popover #userPopover [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <!-- <li class=\"multiple-program\" *ngIf=\"defaultSelected?.category_id\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" [class.disabled]=\"true\">&#xe90d;</i>\r\n {{defaultSelected?.name}}\r\n </span>\r\n <div class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li> -->\r\n <li *ngFor=\"let element of selectedData?.slice(1); let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">\r\n {{(i==selectedData.slice(1).length-1)? 'Final' : (i+2) }}\r\n </span>\r\n {{element[displayElementKey]}}\r\n </span>\r\n\r\n <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n {{element[displayElementKey]}}\r\n </span>\r\n <div *ngIf=\"defaultSelected?.category_id && defaultSelected?.category_id === element?.category_id\" class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>\r\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedGroups\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\"><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i>{{data['group_name']}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>",
8137
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .floating-bar{padding:0 16px 32px}::ng-deep .floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 4px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:4px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .floating-bar-container .left .counter.group{background:#1e5dd3;border-color:#1e5dd3}::ng-deep .floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .floating-bar-container .left .name b{text-transform:lowercase}::ng-deep .floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .floating-bar-container .center cs-select{width:100%}::ng-deep .floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .floating-bar-container .right{display:flex;align-items:center}::ng-deep .floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}.vx-info-card{width:280px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}"]
8136
+ template: "<div class=\"floating-bar\">\r\n <div class=\"floating-bar-container\">\r\n <div class=\"left\">\r\n <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\r\n <div class=\"chip\" *ngFor=\"let element of selectedData?.slice(0,1);let i = index\">\r\n <ng-container *ngIf=\"element\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition != 'right'\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\"> \r\n {{((selectedData.length<=2) && (i==selectedData.length-1)) && selectedData.length > 1? 'Final' : (i+1) }} </span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\">{{element[displayElementKey]}}</span>\r\n <span *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">{{element[displayElementKey] | slice:\r\n element[displayElementKey].length -1 }}</span>\r\n <i class=\"icons\"\r\n *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition == 'right'\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n </ng-container>\r\n </div>\r\n <div class=\"counter\" *ngIf=\"selectedData?.length>1\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">+{{selectedData?.slice(1)?.length}}</div>\r\n <div class=\"name\" *ngIf=\"selectedData?.length>1\"> \r\n <span *ngIf=\"selectedData?.slice(1).length === 1\">{{singularText}}</span>\r\n <span *ngIf=\"selectedData?.slice(1).length > 1\">{{pluralText}}</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"groupsEnabled\">\r\n <div class=\"name\" *ngIf=\"selectedData?.length>0 && groupsEnabled\">\r\n <div class=\"counter\" *ngIf=\"selectedData?.length>0\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">{{selectedData?.length}}</div>\r\n <span *ngIf=\"selectedData?.length === 1\">User {{selectedGroups && selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n <span *ngIf=\"selectedData?.length > 1\">Users {{selectedGroups && selectedGroups?.length > 0 ?' & ':'are selected'}}</span>\r\n </div>\r\n <div class=\"counter group\" *ngIf=\"selectedGroups.length > 0\" appPopover (click)=\"groupPopover.popover()\" placement=\"left\">{{selectedGroups.length}}</div>\r\n <div class=\"name\" *ngIf=\"selectedGroups.length > 0\">{{selectedGroups?.length > 1 ?' User Groups selected ':'User Group selected'}}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"showFrequencyText\">\r\n <div class=\"name vx-ml-0\">\r\n <span>You have selected <span class=\"vx-fw-500 vx-label-txt\">{{currentFrequency}}</span> frequency.</span>\r\n </div>\r\n </ng-container>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"center\" *ngIf=\"(showWorkflow && mode === 'CREATE' )||(showWorkflow && workflowList.includes('ROUND-ROBIN'))\">\r\n <label>\r\n {{workflowText}} \r\n <span class=\"icon\" *ngIf=\"workflowText=='Approval Workflow'\" libPopoverHover (mouseover)=\"dataTooltip.popover()\" (mouseleave)=\"dataTooltip.closePopover()\"\r\n placement=\"right\"><i class=\"icons\">&#xe91f;</i></span>\r\n\r\n </label>\r\n <popover-hover #dataTooltip>\r\n <div class=\"vx-info-card\">\r\n <div class=\"vx-info-card-body\">\r\n You can select from the following three options:<br>\r\n <strong>Sequential:</strong> The policy would be sent for approval one at a time in the sequence defined by you.<br>\r\n <strong>Round-robin:</strong> The policy will be sent for approval to all approvers at the same time. However, it is mandatory for all approvers to take action.<br>\r\n <strong>Any One:</strong> The policy will be sent for approval to all approvers at the same time. If anyone of the approver approves the policy, it will be considered as approved.\r\n </div>\r\n\r\n </div>\r\n </popover-hover>\r\n <cs-select [(ngModel)]=\"selectedWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\" [placeholder]=\"'Approval WorkFlow *'\" [setMaxWidth]=\"true\">\r\n <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\r\n {{data}}\r\n </cs-option>\r\n </cs-select>\r\n </div>\r\n <div class=\"right\">\r\n <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n <button *ngIf=\"showNextButton\" [disabled]=\"isDisabled\" (click)=\"next()\" appRipple>Next <i class=\"icons\">&#xe91e;</i></button>\r\n </div>\r\n </div>\r\n</div>\r\n<app-popover #userPopover [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <!-- <li class=\"multiple-program\" *ngIf=\"defaultSelected?.category_id\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\">\r\n <i class=\"icons\" [class.disabled]=\"true\">&#xe90d;</i>\r\n {{defaultSelected?.name}}\r\n </span>\r\n <div class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li> -->\r\n <li *ngFor=\"let element of selectedData?.slice(1); let i =index\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">\r\n {{(i==selectedData.slice(1).length-1)? 'Final' : (i+2) }}\r\n </span>\r\n {{element[displayElementKey]}}\r\n </span>\r\n\r\n <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">\r\n <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n {{element[displayElementKey]}}\r\n </span>\r\n <div *ngIf=\"defaultSelected?.category_id && defaultSelected?.category_id === element?.category_id\" class=\"primary-label\">PRIMARY</div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>\r\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\r\n <div class=\"action-list\">\r\n <ul class=\"action-item\">\r\n <li *ngFor=\"let data of selectedGroups\">\r\n <div class=\"avatar-card\">\r\n <span class=\"value\"><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i>{{data['group_name']}}</span>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n</app-popover>",
8137
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .floating-bar{padding:0 16px 32px}::ng-deep .floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 15px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 4px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:4px;min-width:24px;justify-content:center;line-height:24px;margin-right:4px}::ng-deep .floating-bar-container .left .counter.group{background:#1e5dd3;border-color:#1e5dd3}::ng-deep .floating-bar-container .left .name{margin-left:4px;color:#747576;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .floating-bar-container .left .name b{color:#161b2f;font-weight:500!important;text-transform:lowercase}::ng-deep .floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .floating-bar-container .center cs-select{width:100%}::ng-deep .floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .floating-bar-container .right{display:flex;align-items:center}::ng-deep .floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3!important;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3!important;padding:0;margin:0 0 0 28px}::ng-deep .floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .floating-bar-container .right button:disabled{filter:grayscale(1);cursor:not-allowed;opacity:.5;pointer-events:auto}::ng-deep .floating-bar-container .right button.cancel{background:transparent!important;border:none!important;color:#eb2424!important;margin-right:0;width:auto;padding:0}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}.vx-info-card{width:280px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}"]
8138
8138
  },] }
8139
8139
  ];
8140
8140
  FloatingBarComponent.ctorParameters = function () { return []; };
@@ -10353,8 +10353,8 @@
10353
10353
  FrequencyContainerComponent.decorators = [
10354
10354
  { type: i0.Component, args: [{
10355
10355
  selector: 'app-frequency-container',
10356
- template: "<!-- <p>frequency-container works!</p> -->\r\n<div class=\"frequency\">\r\n <div class=\"frequency-head\">\r\n <h3 class=\"frequency-title\">Set a Frequency</h3>\r\n </div>\r\n <div class=\"frequency-body\">\r\n <div class=\"frequency-container\">\r\n\r\n <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li *ngFor=\"let frequencyType of frequencyList; let i = index;\">\r\n <button\r\n [class.active]=\"frequencyType?.type == frequencyTab\"\r\n (click)=\"changeFrequencyTab(frequencyType)\"> {{frequencyType?.name}} </button>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"frequency-tab-body\">\r\n <app-frequency-daily\r\n *ngSwitchCase=\"'daily'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-daily>\r\n <app-frequency-weekly\r\n *ngSwitchCase=\"'weekly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-weekly>\r\n <app-frequency-monthly\r\n *ngSwitchCase=\"'monthly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-monthly>\r\n <app-frequency-quarterly\r\n *ngSwitchCase=\"'quarterly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-quarterly>\r\n <app-frequency-biannual\r\n *ngSwitchCase=\"'biannual'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-biannual>\r\n <app-frequency-annual\r\n *ngSwitchCase=\"'annual'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-annual>\r\n <app-frequency-one-time\r\n *ngSwitchCase=\"'oneTime'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-one-time>\r\n <app-frequency-random\r\n *ngSwitchCase=\"'random'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-random>\r\n <app-frequency-on-completion-of\r\n *ngSwitchCase=\"'onCompletionOf'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-on-completion-of>\r\n <app-frequency-ongoing\r\n *ngSwitchCase=\"'ongoing'\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-ongoing>\r\n </div>\r\n </div>\r\n </div>\r\n </div> \r\n <div class=\"frequency-footer\">\r\n <app-floating-bar\r\n [showFrequencyText]=\"true\"\r\n [currentFrequency]=\"currentTabName\"\r\n [isDisabled]=\"isNextDisabled\"\r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\"\r\n ></app-floating-bar>\r\n </div>\r\n</div>\r\n",
10357
- styles: [".frequency{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:11}.frequency-container{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px rgba(30,93,211,.1);border-radius:2px}.frequency-head{background:#fbfbfb;height:44px;padding:0 12px;display:flex;align-items:center}.frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}.frequency-tab{position:relative;border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-radius:2px}.frequency-tab-head{background:#fbfbfb;border-top:1px solid #f1f1f1;border-radius:2px 2px 0 0}.frequency-tab-head ul{padding:0;margin:0}.frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}.frequency-tab-head ul.navigation li{list-style:none;width:100%;padding:0 4px;display:flex;justify-content:center}.frequency-tab-head ul.navigation li button{font-size:11px;line-height:32px;position:relative;display:block;color:#747576;font-weight:500;text-transform:uppercase;background:transparent;border:none;white-space:nowrap;cursor:pointer}.frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}.frequency-tab-head ul.navigation li button.active{color:#1e5dd3}.frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}.frequency-tab-body{background:#fff;border-top:1px solid #f1f1f1}.frequency-footer{display:block}"]
10356
+ template: "<div class=\"frequency-dialog\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-dialog-head vx-p-3 vx-mb-4 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Set a Frequency</div>\r\n </div>\r\n <div class=\"frequency-dialog-body vx-pl-4 vx-pr-4\">\r\n <div class=\"frequency-dialog-body-inner\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab vx-d-flex vx-align-center\">\r\n <ng-container *ngFor=\"let frequencyType of frequencyList; let i = index;\">\r\n <button (click)=\"changeFrequencyTab(frequencyType)\" class=\"tab-btn vx-fs-11 vx-fw-500 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0\" [class.active]=\"frequencyType?.type == frequencyTab\">{{frequencyType?.name}}</button>\r\n </ng-container>\r\n </div>\r\n <div class=\"frequency-tab-bottom vx-pl-4 vx-pr-4\">\r\n <!-- Daily Frequency Start -->\r\n <app-frequency-daily\r\n *ngSwitchCase=\"'daily'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-daily>\r\n <!-- Daily Frequency End -->\r\n <!-- Weekly Frequency Start -->\r\n <app-frequency-weekly\r\n *ngSwitchCase=\"'weekly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-weekly>\r\n <!-- Weekly Frequency End -->\r\n <!-- Monthly Frequency Start -->\r\n <app-frequency-monthly\r\n *ngSwitchCase=\"'monthly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-monthly>\r\n <!-- Monthly Frequency End -->\r\n <!-- Quarterly Frequency Start -->\r\n <app-frequency-quarterly\r\n *ngSwitchCase=\"'quarterly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-quarterly>\r\n <!-- Quarterly Frequency End -->\r\n <!-- Biannual Frequency Start -->\r\n <app-frequency-biannual\r\n *ngSwitchCase=\"'biannual'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-biannual>\r\n <!-- Biannual Frequency End -->\r\n <!-- Annual Frequency Start -->\r\n <app-frequency-annual\r\n *ngSwitchCase=\"'annual'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-annual>\r\n <!-- Annual Frequency End -->\r\n <!-- One Time Frequency Start -->\r\n <app-frequency-one-time\r\n *ngSwitchCase=\"'oneTime'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-one-time>\r\n <!-- One Time Frequency End -->\r\n <!-- Random Frequency Start -->\r\n <app-frequency-random\r\n *ngSwitchCase=\"'random'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-random>\r\n <!-- Random Frequency End -->\r\n <!-- On Completion Frequency Start -->\r\n <app-frequency-on-completion-of\r\n *ngSwitchCase=\"'onCompletionOf'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-on-completion-of>\r\n <!-- On Completion Frequency End -->\r\n <!-- Ongoing Frequency Start -->\r\n <app-frequency-ongoing\r\n *ngSwitchCase=\"'ongoing'\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-ongoing>\r\n <!-- Ongoing Frequency End -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"frequency-dialog-footer\">\r\n <app-floating-bar\r\n [showFrequencyText]=\"true\"\r\n [currentFrequency]=\"currentTabName\"\r\n [isDisabled]=\"isNextDisabled\"\r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\"\r\n ></app-floating-bar>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency\">\r\n <div class=\"frequency-head\">\r\n <h3 class=\"frequency-title\">Set a Frequency</h3>\r\n </div>\r\n <div class=\"frequency-body\">\r\n <div class=\"frequency-container\">\r\n\r\n <div class=\"frequency-tab\" [ngSwitch]=\"frequencyTab\">\r\n <div class=\"frequency-tab-head\">\r\n <ul class=\"navigation\">\r\n <li *ngFor=\"let frequencyType of frequencyList; let i = index;\">\r\n <button\r\n [class.active]=\"frequencyType?.type == frequencyTab\"\r\n (click)=\"changeFrequencyTab(frequencyType)\"> {{frequencyType?.name}} </button>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"frequency-tab-body\">\r\n <app-frequency-daily\r\n *ngSwitchCase=\"'daily'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-daily>\r\n <app-frequency-weekly\r\n *ngSwitchCase=\"'weekly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-weekly>\r\n <app-frequency-monthly\r\n *ngSwitchCase=\"'monthly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-monthly>\r\n <app-frequency-quarterly\r\n *ngSwitchCase=\"'quarterly'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-quarterly>\r\n <app-frequency-biannual\r\n *ngSwitchCase=\"'biannual'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-biannual>\r\n <app-frequency-annual\r\n *ngSwitchCase=\"'annual'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-annual>\r\n <app-frequency-one-time\r\n *ngSwitchCase=\"'oneTime'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-one-time>\r\n <app-frequency-random\r\n *ngSwitchCase=\"'random'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-random>\r\n <app-frequency-on-completion-of\r\n *ngSwitchCase=\"'onCompletionOf'\"\r\n [mode]=\"mode\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-on-completion-of>\r\n <app-frequency-ongoing\r\n *ngSwitchCase=\"'ongoing'\"\r\n (frequencyDetails)=\"onFrequencySelected($event)\"\r\n [frequencyData]=\"frequencyDetails\"\r\n ></app-frequency-ongoing>\r\n </div>\r\n </div>\r\n </div>\r\n </div> \r\n <div class=\"frequency-footer\">\r\n <app-floating-bar\r\n [showFrequencyText]=\"true\"\r\n [currentFrequency]=\"currentTabName\"\r\n [isDisabled]=\"isNextDisabled\"\r\n (closeEvent)=\"save()\"\r\n (closeList)=\"close()\"\r\n ></app-floating-bar>\r\n </div>\r\n</div>\r\n",
10357
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-dialog{border-radius:.125rem;height:calc(100vh - 8.875rem);position:fixed;top:0;right:31.25rem;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:11}::ng-deep .frequency-dialog-head{background:#fbfbfb;border-radius:.125rem .125rem 0 0;border-bottom:1px solid #f1f1f1}::ng-deep .frequency-dialog-head button.back-btn{background:transparent;border-radius:0;border:none}::ng-deep .frequency-dialog-body{height:calc(100vh - 9.75rem);margin:0 auto 1rem;overflow:hidden;overflow-y:auto}::ng-deep .frequency-dialog-body::-webkit-scrollbar-track{background-color:transparent}::ng-deep .frequency-dialog-body-inner{width:53.5rem}@media screen and (max-width:1366px){::ng-deep .frequency-dialog-body-inner{width:auto}}::ng-deep .frequency-dialog-body .frequency-tab{border:none!important;border-bottom:1px solid #f1f1f1!important;margin-bottom:1.5rem}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{background:transparent;border-radius:0;border:none;border-bottom:.125rem solid transparent;height:1.5rem;margin-right:1.5rem!important}@media screen and (max-width:1366px){::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn{margin-right:1rem!important}}::ng-deep .frequency-dialog-body .frequency-tab button.tab-btn.active{color:#1e5dd3!important;border-color:#1e5dd3}.frequency{position:fixed;top:0;right:500px;bottom:0;left:0;border-top:3px solid #1e5dd3;z-index:11}.frequency-container{position:relative;width:800px;margin:0 auto;box-shadow:0 10px 20px rgba(30,93,211,.1);border-radius:2px}.frequency-head{background:#fbfbfb;height:44px;padding:0 12px;display:flex;align-items:center}.frequency-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.frequency-body{padding:60px 0;height:calc(100vh - 110px);overflow:auto}.frequency-tab{position:relative;border-right:1px solid #f1f1f1;border-bottom:1px solid #f1f1f1;border-left:1px solid #f1f1f1;border-radius:2px}.frequency-tab-head{background:#fbfbfb;border-top:1px solid #f1f1f1;border-radius:2px 2px 0 0}.frequency-tab-head ul{padding:0;margin:0}.frequency-tab-head ul.navigation{display:flex;border-radius:2px 2px 0 0}.frequency-tab-head ul.navigation li{list-style:none;width:100%;padding:0 4px;display:flex;justify-content:center}.frequency-tab-head ul.navigation li button{font-size:11px;line-height:32px;position:relative;display:block;color:#747576;font-weight:500;text-transform:uppercase;background:transparent;border:none;white-space:nowrap;cursor:pointer}.frequency-tab-head ul.navigation li button:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;content:\"\"}.frequency-tab-head ul.navigation li button.active{color:#1e5dd3}.frequency-tab-head ul.navigation li button.active:after{background:#1e5dd3}.frequency-tab-body{background:#fff;border-top:1px solid #f1f1f1}.frequency-footer{display:block}"]
10358
10358
  },] }
10359
10359
  ];
10360
10360
  FrequencyContainerComponent.ctorParameters = function () { return [
@@ -10500,7 +10500,7 @@
10500
10500
  FrequencyDailyComponent.decorators = [
10501
10501
  { type: i0.Component, args: [{
10502
10502
  selector: 'app-frequency-daily',
10503
- template: "<!-- <p>frequency-daily works!</p> -->\r\n<div class=\"frequency-daily\">\r\n <app-frequency-top \r\n [id]=\"0\"\r\n [inputTime]=\"dailyInterval\"\r\n [occurrenceFirst]=\"dailyInput\"\r\n [frequencyType]=\"0\"\r\n (timeChanged)=\"onTimeChanged($event, 'dailyInterval')\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n ></app-frequency-top>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"0\"\r\n [startDate]=\"dailyLifeCycleStart\"\r\n [endDate]=\"dailyLifeCycleEndTime\"\r\n [occurrance]=\"dailyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"dailySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n <app-frequency-due-date\r\n [pageName]=\"'daily'\"\r\n [id]=\"0\"\r\n [mode]=\"mode\"\r\n [notCompletedValue]=\"dailyFailed\"\r\n [deactivateValue]=\"dailyDeactivatedValue\"\r\n [isDeactivated]=\"true\"\r\n [completedRequired]=\"false\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>",
10503
+ template: "<!-- <p>frequency-daily works!</p> -->\r\n<div class=\"frequency-daily\">\r\n <app-frequency-top \r\n [id]=\"0\"\r\n [inputTime]=\"dailyInterval\"\r\n [occurrenceFirst]=\"dailyInput\"\r\n [frequencyType]=\"0\"\r\n (timeChanged)=\"onTimeChanged($event, 'dailyInterval')\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-top>\r\n <app-frequency-due-date\r\n [pageName]=\"'daily'\"\r\n [id]=\"0\"\r\n [mode]=\"mode\"\r\n [notCompletedValue]=\"dailyFailed\"\r\n [deactivateValue]=\"dailyDeactivatedValue\"\r\n [isDeactivated]=\"true\"\r\n [completedRequired]=\"false\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"0\"\r\n [startDate]=\"dailyLifeCycleStart\"\r\n [endDate]=\"dailyLifeCycleEndTime\"\r\n [occurrance]=\"dailyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"dailySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n</div>",
10504
10504
  styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.top-part{display:flex;justify-content:flex-start;padding:12px 20px;align-items:center}.top-part span{font-size:14px;color:#161b2f;width:auto;display:block}.top-part .day-counter{-moz-appearance:textfield;width:40px;margin:0 8px;padding:4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none}.top-part .day-counter::-webkit-inner-spin-button,.top-part .day-counter::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.top-part .time-picker{width:120px;margin-left:8px;position:relative}.top-part .time-picker input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:2px;height:36px;width:100%;outline:none;padding:0 28px 0 8px;cursor:pointer}.top-part .time-picker i{display:flex;justify-content:center;align-items:center;height:36px;width:28px;position:absolute;right:0;top:0;color:#1e5dd3;font-size:16px;pointer-events:none}"]
10505
10505
  },] }
10506
10506
  ];
@@ -10680,8 +10680,8 @@
10680
10680
  FrequencyWeeklyComponent.decorators = [
10681
10681
  { type: i0.Component, args: [{
10682
10682
  selector: 'app-frequency-weekly',
10683
- template: "<!-- <p>frequency-weekly works!</p> -->\r\n<div class=\"frequency-weekly\">\r\n <app-frequency-top\r\n [id]=\"1\"\r\n [inputTime]=\"weeklyInterval\"\r\n [occurrenceFirst]=\"weeklyInput\"\r\n [frequencyType]=\"1\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n ></app-frequency-top>\r\n <app-frequency-checkbox-list\r\n [id]=\"1\"\r\n [listArray]=\"dayArray\"\r\n [selectedIndex]=\"selectedWeekly\"\r\n (selectedCheckbox)=\"onDaySelected($event)\"\r\n ></app-frequency-checkbox-list>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"1\"\r\n [startDate]=\"weeklyLifeCycleStart\"\r\n [endDate]=\"weeklyLifeCycleEndTime\"\r\n [occurrance]=\"weeklyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"weeklySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n <app-frequency-due-date\r\n [id] = '1'\r\n [mode]=\"mode\"\r\n [pageName]=\"'weekly'\"\r\n [deactivateValue]=\"weeklyDeactivatedValue\"\r\n [isDeactivated]=\"true\"\r\n [completedValue]=\"weeklyWindow\"\r\n [notCompletedValue]=\"weeklyFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>",
10684
- styles: [".frequency-weekly{position:relative}"]
10683
+ template: "<!-- <p>frequency-weekly works!</p> -->\r\n<div class=\"frequency-weekly\">\r\n <app-frequency-top\r\n [id]=\"1\"\r\n [inputTime]=\"weeklyInterval\"\r\n [occurrenceFirst]=\"weeklyInput\"\r\n [frequencyType]=\"1\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-top>\r\n <app-frequency-checkbox-list\r\n [id]=\"1\"\r\n [listArray]=\"dayArray\"\r\n [selectedIndex]=\"selectedWeekly\"\r\n (selectedCheckbox)=\"onDaySelected($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-checkbox-list>\r\n <app-frequency-due-date\r\n [id] = '1'\r\n [mode]=\"mode\"\r\n [pageName]=\"'weekly'\"\r\n [deactivateValue]=\"weeklyDeactivatedValue\"\r\n [isDeactivated]=\"true\"\r\n [completedValue]=\"weeklyWindow\"\r\n [notCompletedValue]=\"weeklyFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-due-date>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"1\"\r\n [startDate]=\"weeklyLifeCycleStart\"\r\n [endDate]=\"weeklyLifeCycleEndTime\"\r\n [occurrance]=\"weeklyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"weeklySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n</div>",
10684
+ styles: ["::ng-deep .frequency-weekly{position:relative}@media screen and (max-width:1366px){::ng-deep .frequency-weekly app-frequency-checkbox-list .frequency-checkbox .frequency-checkbox-item{padding:.625rem!important}}"]
10685
10685
  },] }
10686
10686
  ];
10687
10687
  FrequencyWeeklyComponent.ctorParameters = function () { return [
@@ -10871,7 +10871,7 @@
10871
10871
  FrequencyMonthlyComponent.decorators = [
10872
10872
  { type: i0.Component, args: [{
10873
10873
  selector: 'app-frequency-monthly',
10874
- template: "<!-- <p>frequency-monthly works!</p> -->\r\n<div class=\"frequency-monthly\">\r\n <app-frequency-top\r\n [id]=\"2\"\r\n [inputTime]=\"monthlyInterval\"\r\n [occurrenceFirst]=\"monthlyInput\"\r\n [frequencyType]=\"3\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n ></app-frequency-top>\r\n <app-frequency-checkbox-list\r\n [id]=\"2\"\r\n [listArray]=\"monthNameArray\"\r\n [selectedIndex]=\"selectedMonthly\"\r\n (selectedCheckbox)=\"onMonthSelected($event)\"\r\n ></app-frequency-checkbox-list>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"2\"\r\n [startDate]=\"monthlyLifeCycleStart\"\r\n [endDate]=\"monthlyLifeCycleEndTime\"\r\n [occurrance]=\"monthlyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"monthlySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n <app-frequency-due-date\r\n [id] = '2'\r\n [mode]=\"mode\"\r\n [pageName]=\"'monthly'\"\r\n [deactivateValue]=\"monthlyDeactivatedValue\"\r\n [isDeactivated]=\"true\"\r\n [completedValue]=\"monthlyWindow\"\r\n [notCompletedValue]=\"monthlyFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n",
10874
+ template: "<!-- <p>frequency-monthly works!</p> -->\r\n<div class=\"frequency-monthly\">\r\n <app-frequency-top\r\n [id]=\"2\"\r\n [inputTime]=\"monthlyInterval\"\r\n [occurrenceFirst]=\"monthlyInput\"\r\n [frequencyType]=\"3\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-top>\r\n <app-frequency-checkbox-list\r\n [id]=\"2\"\r\n [listArray]=\"monthNameArray\"\r\n [selectedIndex]=\"selectedMonthly\"\r\n (selectedCheckbox)=\"onMonthSelected($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-checkbox-list>\r\n <app-frequency-due-date\r\n [id] = '2'\r\n [mode]=\"mode\"\r\n [pageName]=\"'monthly'\"\r\n [deactivateValue]=\"monthlyDeactivatedValue\"\r\n [isDeactivated]=\"true\"\r\n [completedValue]=\"monthlyWindow\"\r\n [notCompletedValue]=\"monthlyFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"2\"\r\n [startDate]=\"monthlyLifeCycleStart\"\r\n [endDate]=\"monthlyLifeCycleEndTime\"\r\n [occurrance]=\"monthlyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"monthlySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n</div>\r\n",
10875
10875
  styles: [".frequency-monthly{position:relative}"]
10876
10876
  },] }
10877
10877
  ];
@@ -11047,7 +11047,7 @@
11047
11047
  FrequencyQuarterlyComponent.decorators = [
11048
11048
  { type: i0.Component, args: [{
11049
11049
  selector: 'app-frequency-quarterly',
11050
- template: "<!-- <p>frequency-quarterly works!</p> -->\r\n<div class=\"frequency-quarterly\">\r\n <app-frequency-top\r\n [id]=\"3\"\r\n [inputTime]=\"quarterlyInterval\"\r\n [occurrenceFirst]=\"quarterlyInput\"\r\n [frequencyType]=\"3\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n ></app-frequency-top>\r\n <app-frequency-radio-list\r\n [radioList]=\"quarterlyArray\" \r\n [selectedIndex]=\"selectedQuarterly\" \r\n (selectedRadio)=\"selectedMonth($event)\"\r\n [name]=\"'quarter'\"\r\n ></app-frequency-radio-list>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"1\"\r\n [startDate]=\"quarterlyLifeCycleStart\"\r\n [endDate]=\"quarterlyLifeCycleEndTime\"\r\n [occurrance]=\"quarterlyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"quarterlySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n <app-frequency-due-date\r\n [id] = '3'\r\n [mode]=\"mode\"\r\n [pageName]=\"'quarterly'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"quarterlyWindow\"\r\n [notCompletedValue]=\"quarterlyFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n",
11050
+ template: "<!-- <p>frequency-quarterly works!</p> -->\r\n<div class=\"frequency-quarterly\">\r\n <app-frequency-top\r\n [id]=\"3\"\r\n [inputTime]=\"quarterlyInterval\"\r\n [occurrenceFirst]=\"quarterlyInput\"\r\n [frequencyType]=\"3\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-top>\r\n <app-frequency-radio-list\r\n [radioList]=\"quarterlyArray\" \r\n [selectedIndex]=\"selectedQuarterly\" \r\n (selectedRadio)=\"selectedMonth($event)\"\r\n [name]=\"'quarter'\"\r\n [mode]=\"mode\"\r\n ></app-frequency-radio-list>\r\n <app-frequency-due-date\r\n [id] = '3'\r\n [mode]=\"mode\"\r\n [pageName]=\"'quarterly'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"quarterlyWindow\"\r\n [notCompletedValue]=\"quarterlyFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"1\"\r\n [startDate]=\"quarterlyLifeCycleStart\"\r\n [endDate]=\"quarterlyLifeCycleEndTime\"\r\n [occurrance]=\"quarterlyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"quarterlySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n</div>\r\n",
11051
11051
  styles: [".frequency-quarterly{position:relative}"]
11052
11052
  },] }
11053
11053
  ];
@@ -11230,7 +11230,7 @@
11230
11230
  FrequencyBiannualComponent.decorators = [
11231
11231
  { type: i0.Component, args: [{
11232
11232
  selector: 'app-frequency-biannual',
11233
- template: "<!-- <p>frequency-biannual works!</p> -->\r\n<div class=\"frequency-biannual\">\r\n <app-frequency-top \r\n [id]=\"4\"\r\n [inputTime]=\"biannualInterval\"\r\n [occurrenceFirst]=\"biannualInput\"\r\n [frequencyType]=\"4\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n ></app-frequency-top>\r\n <app-frequency-checkbox-list\r\n [id]=\"4\"\r\n [listArray]=\"monthNameArray\"\r\n [selectedIndex]=\"biannualSelected\"\r\n (selectedCheckbox)=\"onMonthSelected($event)\"\r\n ></app-frequency-checkbox-list>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"4\"\r\n [startDate]=\"biannualLifeCycleStart\"\r\n [endDate]=\"biannualLifeCycleEndTime\"\r\n [occurrance]=\"biannualLifecycleOccurance\"\r\n [selectedLifecycleType]=\"biannualSeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n <app-frequency-due-date\r\n [pageName]=\"'biannual'\"\r\n [mode]=\"mode\"\r\n [id]=\"4\"\r\n [completedValue]=\"biannualWindow\"\r\n [notCompletedValue]=\"biannualFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n",
11233
+ template: "<!-- <p>frequency-biannual works!</p> -->\r\n<div class=\"frequency-biannual\">\r\n <app-frequency-top \r\n [id]=\"4\"\r\n [inputTime]=\"biannualInterval\"\r\n [occurrenceFirst]=\"biannualInput\"\r\n [frequencyType]=\"4\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-top>\r\n <app-frequency-checkbox-list\r\n [id]=\"4\"\r\n [listArray]=\"monthNameArray\"\r\n [selectedIndex]=\"biannualSelected\"\r\n (selectedCheckbox)=\"onMonthSelected($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-checkbox-list>\r\n <app-frequency-due-date\r\n [pageName]=\"'biannual'\"\r\n [mode]=\"mode\"\r\n [id]=\"4\"\r\n [completedValue]=\"biannualWindow\"\r\n [notCompletedValue]=\"biannualFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"4\"\r\n [startDate]=\"biannualLifeCycleStart\"\r\n [endDate]=\"biannualLifeCycleEndTime\"\r\n [occurrance]=\"biannualLifecycleOccurance\"\r\n [selectedLifecycleType]=\"biannualSeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n</div>\r\n",
11234
11234
  styles: [".frequency-biannual{position:relative}"]
11235
11235
  },] }
11236
11236
  ];
@@ -11437,7 +11437,7 @@
11437
11437
  FrequencyAnnualComponent.decorators = [
11438
11438
  { type: i0.Component, args: [{
11439
11439
  selector: 'app-frequency-annual',
11440
- template: "<!-- <p>frequency-annual works!</p> -->\r\n<div class=\"frequency-annual\">\r\n <app-frequency-top\r\n [id]=\"5\"\r\n [inputTime]=\"yearlyInterval\"\r\n [occurrenceFirst]=\"yearlyInput\"\r\n [yearlyDay]=\"yearlyDay\"\r\n [frequencyType]=\"2\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n (yearlyDateChanged)=\"dateChange($event)\"\r\n ></app-frequency-top>\r\n <app-frequency-radio-list \r\n [radioList]=\"monthList\" \r\n [selectedIndex]=\"yearlySelected\" \r\n (selectedRadio)=\"selectedMonth($event)\">\r\n </app-frequency-radio-list>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"5\"\r\n [startDate]=\"yearlyLifeCycleStart\"\r\n [endDate]=\"yearlyLifeCycleEndTime\"\r\n [occurrance]=\"yearlyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"yearlySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n <app-frequency-due-date\r\n [pageName]=\"'yearly'\"\r\n [mode]=\"mode\"\r\n [id]=\"5\"\r\n [completedValue]=\"yearlyWindow\"\r\n [notCompletedValue]=\"yearlyFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n",
11440
+ template: "<!-- <p>frequency-annual works!</p> -->\r\n<div class=\"frequency-annual\">\r\n <app-frequency-top\r\n [id]=\"5\"\r\n [inputTime]=\"yearlyInterval\"\r\n [occurrenceFirst]=\"yearlyInput\"\r\n [yearlyDay]=\"yearlyDay\"\r\n [frequencyType]=\"2\"\r\n (timeChanged)=\"onTimeChanged($event)\"\r\n (valueChangedFirst)=\"valueChangedFirst($event)\"\r\n (yearlyDateChanged)=\"dateChange($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-top>\r\n <app-frequency-radio-list \r\n [radioList]=\"monthList\" \r\n [selectedIndex]=\"yearlySelected\" \r\n (selectedRadio)=\"selectedMonth($event)\"\r\n [mode]=\"mode\">\r\n </app-frequency-radio-list>\r\n <app-frequency-due-date\r\n [pageName]=\"'yearly'\"\r\n [mode]=\"mode\"\r\n [id]=\"5\"\r\n [completedValue]=\"yearlyWindow\"\r\n [notCompletedValue]=\"yearlyFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n <app-frequency-lifecycle *ngIf=\"mode=='responsibility'\"\r\n [id]=\"5\"\r\n [startDate]=\"yearlyLifeCycleStart\"\r\n [endDate]=\"yearlyLifeCycleEndTime\"\r\n [occurrance]=\"yearlyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"yearlySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n</div>\r\n",
11441
11441
  styles: [".frequency-annual{position:relative}"]
11442
11442
  },] }
11443
11443
  ];
@@ -11568,8 +11568,8 @@
11568
11568
  FrequencyOneTimeComponent.decorators = [
11569
11569
  { type: i0.Component, args: [{
11570
11570
  selector: 'app-frequency-one-time',
11571
- template: "<!-- <p>frequency-one-time works!</p> -->\r\n<div class=\"frequency-one-time\">\r\n <div class=\"frequency-one-time-row\">\r\n <div class=\"date\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"todayDate | date: 'dd MMM yyyy'\" [placeholder]=\"todayDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker()\" readonly>\r\n\r\n </div>\r\n <div class=\"time\">\r\n <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"oneTimeStartTime\" placeholder=\"Select Time\">\r\n <!-- <i class=\"icons\">&#xe955;</i> -->\r\n <!-- <ngx-material-timepicker (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker> -->\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id] = '6'\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n\r\n<dp-date-picker #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date: 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"openDatePicker();dateChange($event); showDateError = false; datepickerOverlay = false\"\r\n></dp-date-picker>\r\n<div class=\"vx-overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datepickerOverlay\"></div>\r\n",
11572
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .frequency-one-time{position:relative}::ng-deep .frequency-one-time-row{display:flex;justify-content:space-between;padding:12px 20px}::ng-deep .frequency-one-time .date{width:calc(100% - 132px);position:relative}::ng-deep .frequency-one-time .date input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:4px;height:40px;width:100%;outline:none;padding:0 8px 0 40px;cursor:pointer;font-size:14px}::ng-deep .frequency-one-time .date i{display:flex;justify-content:center;align-items:center;height:39px;width:28px;position:absolute;left:8px;top:0;color:#1e5dd3;font-size:16px;pointer-events:none;z-index:1}::ng-deep .frequency-one-time .time{width:120px;position:relative}::ng-deep .frequency-one-time .time input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:4px;height:40px;width:100%;outline:none;padding:0 28px 0 8px;cursor:pointer;font-size:14px}::ng-deep .frequency-one-time .time i{display:flex;justify-content:center;align-items:center;height:40px;width:28px;position:absolute;right:0;top:0;color:#1e5dd3;font-size:16px;pointer-events:none}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}"]
11571
+ template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n<div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n<div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"todayDate | date: 'dd MMM yyyy'\" [placeholder]=\"todayDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker()\" readonly>\r\n </div>\r\n \r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input class=\"input\" placeholder=\"11:59 PM\" />\r\n <!-- <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id] = '6'\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n</ng-container>\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-one-time\">\r\n <div class=\"frequency-one-time-row\">\r\n <div class=\"date\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"todayDate | date: 'dd MMM yyyy'\" [placeholder]=\"todayDate | date: 'dd MMM yyyy'\" (click)=\"openDatePicker()\" readonly>\r\n </div>\r\n <div class=\"time\">\r\n <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"oneTimeStartTime\" placeholder=\"Select Time\">\r\n <!-- <i class=\"icons\">&#xe955;</i> -->\r\n <!-- <ngx-material-timepicker (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker> -->\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id] = '6'\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n\r\n<dp-date-picker #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date: 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"openDatePicker();dateChange($event); showDateError = false; datepickerOverlay = false\"\r\n></dp-date-picker>\r\n<div class=\"vx-overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datepickerOverlay\"></div>\r\n",
11572
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #dbdbdb;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1}::ng-deep .frequency-onetime-inner .time-picker-group input::-moz-placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group input:-ms-input-placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep .frequency-one-time{position:relative}::ng-deep .frequency-one-time-row{display:flex;justify-content:space-between;padding:12px 20px}::ng-deep .frequency-one-time .date{width:calc(100% - 132px);position:relative}::ng-deep .frequency-one-time .date input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:4px;height:40px;width:100%;outline:none;padding:0 8px 0 40px;cursor:pointer;font-size:14px}::ng-deep .frequency-one-time .date i{display:flex;justify-content:center;align-items:center;height:39px;width:28px;position:absolute;left:8px;top:0;color:#1e5dd3;font-size:16px;pointer-events:none;z-index:1}::ng-deep .frequency-one-time .time{width:120px;position:relative}::ng-deep .frequency-one-time .time input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:4px;height:40px;width:100%;outline:none;padding:0 28px 0 8px;cursor:pointer;font-size:14px}::ng-deep .frequency-one-time .time i{display:flex;justify-content:center;align-items:center;height:40px;width:28px;position:absolute;right:0;top:0;color:#1e5dd3;font-size:16px;pointer-events:none}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}"]
11573
11573
  },] }
11574
11574
  ];
11575
11575
  FrequencyOneTimeComponent.ctorParameters = function () { return [
@@ -11811,8 +11811,8 @@
11811
11811
  FrequencyRandomComponent.decorators = [
11812
11812
  { type: i0.Component, args: [{
11813
11813
  selector: 'app-frequency-random',
11814
- template: "<!-- <p>frequency-random works!</p> -->\r\n<div class=\"frequency-random\">\r\n <div class=\"frequency-random-row\">\r\n <p>Type</p>\r\n </div> \r\n <app-frequency-radio-list\r\n [radioList]=\"randomType\" \r\n [selectedIndex]=\"randomTypeSelected\" \r\n (selectedRadio)=\"randomChecked($event)\"\r\n [name]=\"'random'\" \r\n ></app-frequency-radio-list>\r\n <app-frequency-radio-list\r\n *ngIf=\"randomTypeSelected == 2\" \r\n [radioList]=\"quarterlyMonth\"\r\n [name]=\"'quarter'\" \r\n [selectedIndex]=\"randomQuarterlySelected\" \r\n (selectedRadio)=\"randomQuarterlyChecked($event)\">\r\n </app-frequency-radio-list>\r\n <app-frequency-checkbox-list\r\n *ngIf=\"randomTypeSelected == 1\" \r\n [id]=\"8\"\r\n [listArray]=\"monthNameArray\"\r\n [selectedIndex]=\"selectedMonthly\"\r\n (selectedCheckbox)=\"onMonthSelected($event)\"\r\n ></app-frequency-checkbox-list>\r\n <div class=\"frequency-random-message\">\r\n <p>Random occurrence for</p>\r\n <input type=\"number\" [(ngModel)]=\"randomInstances\" (change)=\"randomInstance($event, randomTypeSelected)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n <p>instances. Note, the maximum number of occurrences for <strong>{{ randomType[randomTypeSelected].toLowerCase() }}</strong> is {{ randomTypeMax[randomTypeSelected] }}.</p>\r\n </div>\r\n <app-frequency-lifecycle\r\n [id]=\"8\"\r\n [startDate]=\"randomlyLifeCycleStart\"\r\n [endDate]=\"randomlyLifeCycleEndTime\"\r\n [occurrance]=\"randomlyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"randomlySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n ></app-frequency-lifecycle>\r\n <app-frequency-due-date\r\n [id] = '8'\r\n [pageName]=\"'random'\"\r\n [mode]=\"mode\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"randomWindow\"\r\n [notCompletedValue]=\"randomFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n",
11815
- styles: [".frequency-random{position:relative}.frequency-random-row{display:flex;justify-content:space-between;padding:12px 20px}.frequency-random-row p{font-size:14px;color:#161b2f;width:auto;display:block;margin:0;line-height:20px}.frequency-random-message{display:flex;border-top:1px solid #f1f1f1;padding:12px 20px;align-items:center}.frequency-random-message p{font-size:12px;color:#747576;width:auto;margin:0;font-weight:400;line-height:20px}.frequency-random-message p strong{font-weight:600;font-style:italic}.frequency-random-message input{-moz-appearance:textfield;font-size:14px;color:#161b2f;border:0;border-bottom:2px solid #dcdcdc;display:inline-block;width:36px;text-align:center;padding:4px;margin:0 8px;outline:none}.frequency-random-message input::-webkit-inner-spin-button,.frequency-random-message input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}"]
11814
+ template: "<!-- <p>frequency-random works!</p> -->\r\n<div class=\"frequency-random\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">TYPE:</div> \r\n <app-frequency-radio-list\r\n [radioList]=\"randomType\" \r\n [selectedIndex]=\"randomTypeSelected\" \r\n (selectedRadio)=\"randomChecked($event)\"\r\n [name]=\"'random'\"\r\n class=\"random-radio\"\r\n [mode]=\"mode\"\r\n ></app-frequency-radio-list>\r\n <app-frequency-radio-list\r\n *ngIf=\"randomTypeSelected == 2\" \r\n [radioList]=\"quarterlyMonth\"\r\n [name]=\"'quarter'\" \r\n [selectedIndex]=\"randomQuarterlySelected\" \r\n (selectedRadio)=\"randomQuarterlyChecked($event)\"\r\n class=\"quarterly-radio\"\r\n [mode]=\"mode\"\r\n >\r\n </app-frequency-radio-list>\r\n <app-frequency-checkbox-list\r\n *ngIf=\"randomTypeSelected == 1\" \r\n [id]=\"8\"\r\n [listArray]=\"monthNameArray\"\r\n [selectedIndex]=\"selectedMonthly\"\r\n (selectedCheckbox)=\"onMonthSelected($event)\"\r\n class=\"monthly-checkbox\"\r\n [mode]=\"mode\"\r\n ></app-frequency-checkbox-list>\r\n <div class=\"frequency-random-message vx-p-3 vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">Random occurrence for</div>\r\n <input class=\"countNum\" type=\"number\" [(ngModel)]=\"randomInstances\" (change)=\"randomInstance($event, randomTypeSelected)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">instances. Note, the maximum number of occurrences for <span class=\"vx-fw-500\">{{ randomType[randomTypeSelected].toLowerCase() }}</span> is {{ randomTypeMax[randomTypeSelected] }}.</div>\r\n </div>\r\n <app-frequency-due-date\r\n [id] = '8'\r\n [pageName]=\"'random'\"\r\n [mode]=\"mode\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"randomWindow\"\r\n [notCompletedValue]=\"randomFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-due-date>\r\n <app-frequency-lifecycle\r\n [id]=\"8\"\r\n [startDate]=\"randomlyLifeCycleStart\"\r\n [endDate]=\"randomlyLifeCycleEndTime\"\r\n [occurrance]=\"randomlyLifecycleOccurance\"\r\n [selectedLifecycleType]=\"randomlySeletedLifecycleType\"\r\n (selectedOccurance)=\"lifecycleChange($event)\"\r\n [mode]=\"mode\"\r\n ></app-frequency-lifecycle>\r\n</div>\r\n",
11815
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-random{position:relative}::ng-deep .frequency-random-message{background:#fff;border-radius:0 0 .25rem .25rem;border:1px solid #f1f1f1;position:relative;top:-5px}::ng-deep .frequency-random-message input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .frequency-random-message input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-random-message input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-random app-frequency-radio-list.random-radio .frequency-radio{top:0}::ng-deep .frequency-random app-frequency-radio-list.random-radio .frequency-radio-item{border-right:none;height:3.5rem;width:auto!important;margin-right:.25rem}"]
11816
11816
  },] }
11817
11817
  ];
11818
11818
  FrequencyRandomComponent.ctorParameters = function () { return [
@@ -11931,8 +11931,8 @@
11931
11931
  FrequencyOnCompletionOfComponent.decorators = [
11932
11932
  { type: i0.Component, args: [{
11933
11933
  selector: 'app-frequency-on-completion-of',
11934
- template: "<!-- <p>frequency-on-completion-of works!</p> -->\r\n<div class=\"frequency-on-completion-of\">\r\n <div class=\"frequency-on-completion-of-message\">\r\n <input type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n <p>{{onCompletionOfInput > 1 ?'days': 'day'}} after completion of</p>\r\n </div>\r\n <div class=\"frequency-on-completion-of-row\">\r\n <div class=\"responsibility\">\r\n <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\" (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\r\n <cs-option *ngFor=\"let responsibility of onCompletionOfResponsibility; let i = index;\" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{responsibility?.ReportName}}</cs-option>\r\n </cs-select>\r\n </div>\r\n <div class=\"time\">\r\n <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"onCompletionOfTime\" placeholder=\"Select Time\">\r\n <!-- <i class=\"icons\">&#xe955;</i> -->\r\n <!-- <ngx-material-timepicker (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker> -->\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id] = '3'\r\n [pageName]=\"'onCompletion'\"\r\n [mode]=\"mode\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"onCompletionOfWindow\"\r\n [notCompletedValue]=\"onCompletionOfFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n\r\n",
11935
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .frequency-on-completion-of{position:relative}::ng-deep .frequency-on-completion-of-row{display:flex;justify-content:space-between;padding:12px 20px}::ng-deep .frequency-on-completion-of-row cs-select .selection-wrap .input-group input{color:#161b2f!important}::ng-deep .frequency-on-completion-of .responsibility{width:calc(100% - 132px);position:relative}::ng-deep .frequency-on-completion-of .responsibility cs-select .selection-wrap .input-group input.value{font-size:14px}::ng-deep .frequency-on-completion-of .responsibility cs-select .selection-wrap .input-group i{font-size:10px!important;right:16px!important;color:#747576}::ng-deep .frequency-on-completion-of .time{width:120px;position:relative}::ng-deep .frequency-on-completion-of .time input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:4px;height:40px;width:100%;outline:none;padding:0 28px 0 8px;cursor:pointer;font-size:14px}::ng-deep .frequency-on-completion-of .time i{display:flex;justify-content:center;align-items:center;height:40px;width:28px;position:absolute;right:0;top:0;color:#1e5dd3;font-size:16px;pointer-events:none}::ng-deep .frequency-on-completion-of-message{display:flex;border-top:1px solid #f1f1f1;padding:12px 20px;align-items:center}::ng-deep .frequency-on-completion-of-message p{font-size:14px;color:#161b2f;width:auto;margin:0;font-weight:400;line-height:20px}::ng-deep .frequency-on-completion-of-message p strong{font-weight:600;font-style:italic}::ng-deep .frequency-on-completion-of-message input{-moz-appearance:textfield;font-size:14px;color:#161b2f;border:0;border-bottom:2px solid #dcdcdc;display:inline-block;width:36px;text-align:center;padding:4px;margin:0 8px 0 0;outline:none}::ng-deep .frequency-on-completion-of-message input::-webkit-inner-spin-button,::ng-deep .frequency-on-completion-of-message input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}"]
11934
+ template: "<div class=\"frequency-completion\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n <div class=\"frequency-completion-inner\">\r\n <div class=\"frequency-completion-top vx-p-3 vx-d-flex vx-align-center\">\r\n <input class=\"countNum\" type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">day after completion of</div>\r\n </div>\r\n <div class=\"frequency-completion-bottom vx-p-3\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">RESPONSIBILITY</div>\r\n <div class=\"vx-d-flex vx-align-center\">\r\n <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\" (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\r\n <cs-option *ngFor=\"let responsibility of onCompletionOfResponsibility; let i = index;\" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{responsibility?.ReportName}}</cs-option>\r\n </cs-select>\r\n \r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input class=\"input\" placeholder=\"11:59 PM\" />\r\n <!-- <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id] = '3'\r\n [pageName]=\"'onCompletion'\"\r\n [mode]=\"mode\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"onCompletionOfWindow\"\r\n [notCompletedValue]=\"onCompletionOfFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-on-completion-of\">\r\n <div class=\"frequency-on-completion-of-message\">\r\n <input type=\"number\" [(ngModel)]=\"onCompletionOfInput\" (change)=\"inputValueChange($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n <p>{{onCompletionOfInput > 1 ?'days': 'day'}} after completion of</p>\r\n </div>\r\n <div class=\"frequency-on-completion-of-row\">\r\n <div class=\"responsibility\">\r\n <cs-select [class.disabled]=\"placeholder === 'Loading...'\" [(ngModel)]=\"selectedResponsibilityDetails\" (valueChanged)=\"onResponsibilitySelection($event)\" [placeholder]=\"placeholder\">\r\n <cs-option *ngFor=\"let responsibility of onCompletionOfResponsibility; let i = index;\" [value]=\"responsibility\" [optionTooltip]=\"responsibility?.ReportName\">{{responsibility?.ReportName}}</cs-option>\r\n </cs-select>\r\n </div>\r\n <div class=\"time\">\r\n <input type=\"text\" readonly aria-label=\"12hr format\" [(ngModel)]=\"onCompletionOfTime\" placeholder=\"Select Time\">\r\n <!-- <i class=\"icons\">&#xe955;</i> -->\r\n <!-- <ngx-material-timepicker (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker> -->\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id] = '3'\r\n [pageName]=\"'onCompletion'\"\r\n [mode]=\"mode\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"onCompletionOfWindow\"\r\n [notCompletedValue]=\"onCompletionOfFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n</div>\r\n\r\n",
11935
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-completion-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-completion-top input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem 0 0;outline:none}::ng-deep .frequency-completion-top input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-completion-top input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-completion-bottom{border-top:1px solid #f1f1f1}::ng-deep .frequency-completion-bottom cs-select{width:100%;margin-right:.75rem}::ng-deep .frequency-completion-bottom cs-select .selection-wrap .input-group input.value{height:2rem!important;font-size:11px!important}::ng-deep .frequency-completion-bottom .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-completion-bottom .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #dbdbdb;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1}::ng-deep .frequency-completion-bottom .time-picker-group input::-moz-placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group input:-ms-input-placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-completion-bottom .time-picker-group .time-field{position:relative}::ng-deep .frequency-completion-bottom .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}"]
11936
11936
  },] }
11937
11937
  ];
11938
11938
  FrequencyOnCompletionOfComponent.ctorParameters = function () { return [
@@ -11950,7 +11950,7 @@
11950
11950
  this.frequencyService = frequencyService;
11951
11951
  this.selectedType = 0; // selected type
11952
11952
  this.selectedOngoingType = 2; // default month selected;
11953
- this.ongoingType = ['Week', 'Month', 'Quarter'];
11953
+ this.ongoingType = ['Week', 'Month', 'Quarter', 'Every 6 months', 'Annual'];
11954
11954
  this.startDate = Math.floor(Date.now() / 1000);
11955
11955
  this.lifecycleDetails = '0000-00-00~~0';
11956
11956
  this.frequencyDetails = new i0.EventEmitter();
@@ -11995,8 +11995,8 @@
11995
11995
  FrequencyOngoingComponent.decorators = [
11996
11996
  { type: i0.Component, args: [{
11997
11997
  selector: 'app-frequency-ongoing',
11998
- template: "<!-- <p>frequency-ongoing works!</p> -->\r\n<div class=\"frequency-ongoing\">\r\n <div class=\"frequency-ongoing-row\">\r\n <app-cs-radio \r\n id=\"ongoing-1\" \r\n [value]=\"0\" \r\n [checked]=\"selectedType === 0\" \r\n (checkedEvent)=\"onSelected($event)\"\r\n >\r\n <strong> Do not send reminders </strong>\r\n </app-cs-radio>\r\n </div>\r\n <div class=\"frequency-ongoing-row\">\r\n <div class=\"radio-first\">\r\n <app-cs-radio \r\n id=\"ongoing-2\" \r\n [value]=\"1\" \r\n [checked]=\"selectedType === 1\" \r\n (checkedEvent)=\"onSelected($event)\">\r\n <strong> Remind the Assignee at the start of{{selectedType=== 1 ? ':' :''}} </strong>\r\n </app-cs-radio>\r\n </div>\r\n <div class=\"radio-last\" *ngIf=\"selectedType === 1\">\r\n <app-cs-radio \r\n *ngFor=\"let data of ongoingType; let i = index\" \r\n [value]=\"i + 1\" \r\n [checked]=\"selectedOngoingType == i + 1\" \r\n [name]=\"'remind'\"\r\n (checkedEvent)=\"onSelectedOnGoingType($event)\"\r\n >{{data}}</app-cs-radio>\r\n </div>\r\n \r\n </div>\r\n</div>",
11999
- styles: ["::ng-deep .frequency-ongoing{position:relative}::ng-deep .frequency-ongoing-row{padding:8px 20px;display:flex;align-items:center}::ng-deep .frequency-ongoing-row:last-child{background:#fbfbfb;border-top:1px solid #f1f1f1}::ng-deep .frequency-ongoing-row app-cs-radio{display:flex}::ng-deep .frequency-ongoing-row app-cs-radio label.radio-item span.radio,::ng-deep .frequency-ongoing-row app-cs-radio label.radio-item svg{width:20px!important;height:20px!important}::ng-deep .frequency-ongoing-row app-cs-radio label.radio-item span.value strong{color:#747576;font-weight:600;font-size:11px;line-height:20px;text-transform:uppercase}::ng-deep .frequency-ongoing-row .radio-first{width:40%}::ng-deep .frequency-ongoing-row .radio-last{width:60%;display:flex}::ng-deep .frequency-ongoing-row .radio-last app-cs-radio{display:flex}::ng-deep .frequency-ongoing-row .radio-last app-cs-radio label.radio-item{background:#fff;border:1px solid #f1f1f1;border-radius:2px;padding:4px 12px 4px 8px}::ng-deep .frequency-ongoing-row .radio-last app-cs-radio label.radio-item span.value{font-size:12px}::ng-deep .frequency-ongoing-row .radio-last app-cs-radio label.radio-item span.radio,::ng-deep .frequency-ongoing-row .radio-last app-cs-radio label.radio-item svg.radiomark{width:16px!important;height:16px!important}::ng-deep .frequency-ongoing-row .radio-last app-cs-radio+app-cs-radio{margin-left:8px}"]
11998
+ template: "<div class=\"frequency-ongoing\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n <div class=\"frequency-ongoing-item first vx-p-3 vx-d-flex vx-align-center\">\r\n <app-cs-radio \r\n id=\"ongoing-1\" \r\n [value]=\"0\" \r\n [checked]=\"selectedType === 0\" \r\n (checkedEvent)=\"onSelected($event)\"\r\n >\r\n <div class=\"vx-fs-12 vx-label-txt\">Do not send reminders</div>\r\n </app-cs-radio>\r\n </div>\r\n <div class=\"frequency-ongoing-item last vx-p-3 vx-d-flex vx-align-center\">\r\n <div class=\"vx-d-block\">\r\n <app-cs-radio \r\n id=\"ongoing-2\" \r\n [value]=\"1\" \r\n [checked]=\"selectedType === 1\" \r\n (checkedEvent)=\"onSelected($event)\">\r\n <div class=\"vx-fs-12 vx-label-txt\">Remind the assignee at the start of{{selectedType=== 1 ? ':' :''}}</div>\r\n </app-cs-radio>\r\n\r\n <div class=\"sub-radio vx-d-flex vx-mt-4 vx-mb-2\" *ngIf=\"selectedType === 1\">\r\n <app-cs-radio \r\n *ngFor=\"let data of ongoingType; let i = index\" \r\n [value]=\"i + 1\" \r\n [checked]=\"selectedOngoingType == i + 1\" \r\n [name]=\"'remind'\"\r\n (checkedEvent)=\"onSelectedOnGoingType($event)\"\r\n >\r\n <div class=\"vx-fs-12 vx-label-txt\">{{data}}</div>\r\n </app-cs-radio>\r\n <!-- <app-cs-radio>\r\n <div class=\"vx-fs-12 vx-label-txt\">Every 6 month</div>\r\n </app-cs-radio>\r\n <app-cs-radio>\r\n <div class=\"vx-fs-12 vx-label-txt\">Year</div>\r\n </app-cs-radio> -->\r\n </div>\r\n </div>\r\n </div>\r\n</div>",
11999
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-ongoing{position:relative}::ng-deep .frequency-ongoing-item{border:1px solid #f1f1f1}::ng-deep .frequency-ongoing-item.first{border-radius:.25rem .25rem 0 0}::ng-deep .frequency-ongoing-item.last{border-radius:0 0 .25rem .25rem;border-top:none}::ng-deep .frequency-ongoing-item app-cs-radio{display:flex}::ng-deep .frequency-ongoing-item .sub-radio{padding-left:1.625rem}::ng-deep .frequency-ongoing-item .sub-radio app-cs-radio{display:flex;margin-right:1.75rem}"]
12000
12000
  },] }
12001
12001
  ];
12002
12002
  FrequencyOngoingComponent.ctorParameters = function () { return [
@@ -12021,6 +12021,7 @@
12021
12021
  this.nextDisable = new i0.EventEmitter();
12022
12022
  this.timeChanged = new i0.EventEmitter();
12023
12023
  this.yearlyDateChanged = new i0.EventEmitter();
12024
+ this.mode = '';
12024
12025
  this.todayDate = new Date();
12025
12026
  this.dateObjectData = new Date();
12026
12027
  this.timeData = '11:59 pm';
@@ -12094,8 +12095,8 @@
12094
12095
  FrequencyTopComponent.decorators = [
12095
12096
  { type: i0.Component, args: [{
12096
12097
  selector: 'app-frequency-top',
12097
- template: "<!-- <p>frequency-top works!</p> -->\r\n\r\n\r\n<!-- <p>frequency-top works!</p> -->\r\n<div class=\"top-part\">\r\n <span>{{id === 0 || id === 1 || id === 5 ? 'Every' : 'Day'}}</span>\r\n <input\r\n type=\"number\"\r\n [id]=\"'occurrence' + id\"\r\n [(ngModel)]=\"occurrenceFirst\"\r\n class=\"day-counter\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n (focusout) = \"enterValueFirst($event, 'occurrenceFirst')\"\r\n >\r\n\r\n <span *ngIf=\"frequencyType === 0\"> {{ occurrenceFirst > 1 ? 'days' : 'day' }} by </span>\r\n <span *ngIf=\"frequencyType === 1\"> {{ occurrenceFirst > 1 ? 'weeks' : 'week' }} by </span>\r\n <span *ngIf=\"id !== 0 && id !== 1 && id !== 5\">by</span>\r\n\r\n <ng-container *ngIf=\"frequencyType === 2\">\r\n <span> {{ occurrenceFirst > 1 ? 'years' : 'year' }} on day</span>\r\n <input class=\"day-counter\" type=\"number\" [id]=\"'occurrence-day' + id\" [(ngModel)]=\"yearlyDay\" (focusout)=\"enterYearDay($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"/>\r\n <span>by</span>\r\n </ng-container>\r\n <div class=\"time-picker\">\r\n <input type=\"text\" [id]=\"'time-picker-input-top'+id\" [(ngModel)]=\"inputTime\" readonly placeholder=\"Select Time\">\r\n <!-- <i class=\"icons\">&#xe955;</i> -->\r\n <!-- <ngx-material-timepicker [id]=\"'time-picker-top'+id\" (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker> -->\r\n </div>\r\n</div>\r\n\r\n",
12098
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.top-part{display:flex;justify-content:flex-start;padding:12px 20px;align-items:center}.top-part span{font-size:14px;color:#161b2f;width:auto;display:block;line-height:28px}.top-part .day-counter{-webkit-appearance:textfield;-moz-appearance:textfield;width:40px;margin:6px 8px 0;padding:0 4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;font-size:14px}.top-part .day-counter::-webkit-inner-spin-button,.top-part .day-counter::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.top-part .time-picker{width:120px;margin-left:8px;position:relative}.top-part .time-picker input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:2px;height:36px;width:100%;outline:none;padding:0 28px 0 8px;cursor:pointer;font-size:14px}.top-part .time-picker i{display:flex;justify-content:center;align-items:center;height:36px;width:32px;position:absolute;right:0;top:0;color:#1e5dd3;font-size:16px;pointer-events:none}"]
12098
+ template: "<div *ngIf=\"mode !== 'policy'\" class=\"frequency-top\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">DUE DATE FREQUENCY:</div>\r\n <div class=\"frequency-top-box vx-p-3 vx-d-flex vx-align-center\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">{{id === 0 || id === 1 || id === 5 ? 'Every' : 'Day'}}</div>\r\n <input type=\"number\" [id]=\"'occurrence' + id\" [(ngModel)]=\"occurrenceFirst\" class=\"countNum\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" (focusout) = \"enterValueFirst($event, 'occurrenceFirst')\" >\r\n <div *ngIf=\"frequencyType === 0\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">{{ occurrenceFirst > 1 ? 'days' : 'day' }} by</div>\r\n <div *ngIf=\"frequencyType === 1\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">{{ occurrenceFirst > 1 ? 'weeks' : 'week' }} by</div>\r\n <div *ngIf=\"id !== 0 && id !== 1 && id !== 5\" class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">by</div>\r\n\r\n <ng-container *ngIf=\"frequencyType === 2\">\r\n <div class=\"vx-fs-13 vx-paragraph-txt\">{{ occurrenceFirst > 1 ? 'years' : 'year' }} on day</div>\r\n <input class=\"countNum\" type=\"number\" [id]=\"'occurrence-day' + id\" [(ngModel)]=\"yearlyDay\" (focusout)=\"enterYearDay($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"/>\r\n <div class=\"vx-fs-13 vx-paragraph-txt vx-mr-3\">by</div>\r\n </ng-container>\r\n \r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div class=\"time-field\">\r\n <input class=\"input\" placeholder=\"11:59 PM\" />\r\n <!-- <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-fs-12 vx-paragraph-txt\">&#xe955;</i></div> -->\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n\r\n<div *ngIf=\"mode === 'policy'\" class=\"top-part\">\r\n <span>{{id === 0 || id === 1 || id === 5 ? 'Every' : 'Day'}}</span>\r\n <input\r\n type=\"number\"\r\n [id]=\"'occurrence' + id\"\r\n [(ngModel)]=\"occurrenceFirst\"\r\n class=\"day-counter\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n (focusout) = \"enterValueFirst($event, 'occurrenceFirst')\"\r\n >\r\n\r\n <span *ngIf=\"frequencyType === 0\"> {{ occurrenceFirst > 1 ? 'days' : 'day' }} by </span>\r\n <span *ngIf=\"frequencyType === 1\"> {{ occurrenceFirst > 1 ? 'weeks' : 'week' }} by </span>\r\n <span *ngIf=\"id !== 0 && id !== 1 && id !== 5\">by</span>\r\n\r\n <ng-container *ngIf=\"frequencyType === 2\">\r\n <span> {{ occurrenceFirst > 1 ? 'years' : 'year' }} on day</span>\r\n <input class=\"day-counter\" type=\"number\" [id]=\"'occurrence-day' + id\" [(ngModel)]=\"yearlyDay\" (focusout)=\"enterYearDay($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"/>\r\n <span>by</span>\r\n </ng-container>\r\n <div class=\"time-picker\">\r\n <input type=\"text\" [id]=\"'time-picker-input-top'+id\" [(ngModel)]=\"inputTime\" readonly placeholder=\"Select Time\">\r\n <!-- <i class=\"icons\">&#xe955;</i> -->\r\n <!-- <ngx-material-timepicker [id]=\"'time-picker-top'+id\" (timeChanged)=\"onTimeChanged($event)\" #dailyTime></ngx-material-timepicker> -->\r\n </div>\r\n</div>\r\n\r\n",
12099
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .frequency-top-box{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-top-box input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .frequency-top-box input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-top-box input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-top-box .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-top-box .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #dbdbdb;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1}::ng-deep .frequency-top-box .time-picker-group input::-moz-placeholder{color:#747576}::ng-deep .frequency-top-box .time-picker-group input:-ms-input-placeholder{color:#747576}::ng-deep .frequency-top-box .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-top-box .time-picker-group .time-field{position:relative}::ng-deep .frequency-top-box .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}.top-part{display:flex;justify-content:flex-start;padding:12px 20px;align-items:center}.top-part span{font-size:14px;color:#161b2f;width:auto;display:block;line-height:28px}.top-part .day-counter{-webkit-appearance:textfield;-moz-appearance:textfield;width:40px;margin:6px 8px 0;padding:0 4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;font-size:14px}.top-part .day-counter::-webkit-inner-spin-button,.top-part .day-counter::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.top-part .time-picker{width:120px;margin-left:8px;position:relative}.top-part .time-picker input{color:#161b2f;font-weight:400;line-height:34px;border:1px solid #f1f1f1;border-radius:2px;height:36px;width:100%;outline:none;padding:0 28px 0 8px;cursor:pointer;font-size:14px}.top-part .time-picker i{display:flex;justify-content:center;align-items:center;height:36px;width:32px;position:absolute;right:0;top:0;color:#1e5dd3;font-size:16px;pointer-events:none}"]
12099
12100
  },] }
12100
12101
  ];
12101
12102
  FrequencyTopComponent.ctorParameters = function () { return []; };
@@ -12108,7 +12109,8 @@
12108
12109
  valueChangedFirst: [{ type: i0.Output }],
12109
12110
  nextDisable: [{ type: i0.Output }],
12110
12111
  timeChanged: [{ type: i0.Output }],
12111
- yearlyDateChanged: [{ type: i0.Output }]
12112
+ yearlyDateChanged: [{ type: i0.Output }],
12113
+ mode: [{ type: i0.Input }]
12112
12114
  };
12113
12115
 
12114
12116
  var FrequencyLifecycleComponent = /** @class */ (function () {
@@ -12257,8 +12259,8 @@
12257
12259
  FrequencyLifecycleComponent.decorators = [
12258
12260
  { type: i0.Component, args: [{
12259
12261
  selector: 'app-frequency-lifecycle',
12260
- template: "<!-- <p>frequency-lifecycle works!</p> -->\r\n<div class=\"frequency-lifecycle\">\r\n <div class=\"frequency-lifecycle-head\">\r\n <p class=\"frequency-lifecycle-title\">SET A LIFECYCLE FOR THIS RESPONSIBILITY:</p>\r\n </div>\r\n <div class=\"frequency-lifecycle-body\">\r\n <div class=\"column\">\r\n <label class=\"text\">Starts From</label>\r\n <div [id]=\"'form-field' + id\" class=\"block active\">\r\n <div class=\"date-picker\" (click)=\"openDatePicker(); datePickerOverlay = true\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"startDate | date: 'dd MMM yyyy'\" [placeholder]=\"startDate | date: 'dd MMM yyyy'\" readonly>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"column\">\r\n <label class=\"text\">Ends by</label>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 0\" (checkedEvent)=\"typeSelected(0)\">\r\n <div class=\"date-picker\" (click)=\"openDatePicker1(); datePickerOverlay = true\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"endDateObject | date: 'dd MMM yyyy'\" [placeholder]=\"endDateObject | date: 'dd MMM yyyy'\" readonly>\r\n </div>\r\n </app-cs-radio>\r\n </div>\r\n <div class=\"column\">\r\n <label class=\"text\">Ends after </label>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 1\" (checkedEvent)=\"typeSelected(1)\">\r\n <input \r\n type=\"number\" \r\n [(ngModel)]=\"occurrance\" \r\n (focusout)=\"endsAfter($event)\" class=\"day\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <span> Occurrences </span>\r\n </app-cs-radio>\r\n </div>\r\n <div class=\"column\">\r\n <label class=\"text\">Ongoing</label>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 2\" (checkedEvent)=\"typeSelected(2)\">\r\n The responsibility will perpetually exist.\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n\r\n \r\n</div>\r\n<!-- start date date picker -->\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + id\"\r\n [placeholder]=\"startDate | date: 'dd MMM yyyy'\"\r\n [(ngModel)]=\"startDate\"\r\n [config]=\"startDateConfig\"\r\n (onSelect)=\"openDatePicker();startFromChange($event); showDateError = false; datePickerOverlay = false\"\r\n></dp-date-picker>\r\n<div class=\"vx-overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n\r\n<!-- end date date picker -->\r\n<dp-date-picker\r\n #datePicker1\r\n [(ngModel)]=\"endDate\"\r\n [placeholder]=\"endDateObject | date: 'dd MMM yyyy'\"\r\n [id]=\"'end-by-input-' + id\"\r\n [config]=\"endDateConfig\"\r\n [minDate]=\"endDateConfig['min']\"\r\n (onSelect)=\"endByChange($event); showDateError = false; datePickerOverlay = false\"\r\n></dp-date-picker> \r\n<div class=\"vx-overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n",
12261
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .frequency-lifecycle{border-top:1px solid #f1f1f1}::ng-deep .frequency-lifecycle-head{background:#fbfbfb;padding:8px 20px}::ng-deep .frequency-lifecycle-title{margin:0;padding:0;font-size:12px;line-height:16px;color:#747576;text-transform:uppercase}::ng-deep .frequency-lifecycle-body{padding:10px 20px;display:flex}::ng-deep .frequency-lifecycle-body .column{width:25%;padding:0;position:relative}::ng-deep .frequency-lifecycle-body .column label.text{color:#747576;font-size:11px;text-transform:uppercase;margin:0 0 4px;font-weight:500;line-height:16px;display:block}::ng-deep .frequency-lifecycle-body .column+.column{padding-left:28px}::ng-deep .frequency-lifecycle-body .column:first-child{width:20%}::ng-deep .frequency-lifecycle-body .column:last-child{width:30%}::ng-deep .frequency-lifecycle-body .column .block,::ng-deep .frequency-lifecycle-body .column span.value{display:flex;font-size:13px;color:#747576;border:1px solid #f1f1f1;border-radius:2px;padding:0 4px 0 16px;box-sizing:border-box;min-height:48px;justify-content:center;align-items:center;background:#fff;cursor:pointer;text-transform:none;margin:0!important}::ng-deep .frequency-lifecycle-body .column .block .date-picker,::ng-deep .frequency-lifecycle-body .column span.value .date-picker{display:flex;align-items:center;position:relative}::ng-deep .frequency-lifecycle-body .column .block .date-picker i,::ng-deep .frequency-lifecycle-body .column span.value .date-picker i{font-size:16px;margin-right:8px}::ng-deep .frequency-lifecycle-body .column .block .date-picker input,::ng-deep .frequency-lifecycle-body .column span.value .date-picker input{border:none;outline:none;width:100%;background:transparent;font-size:12px;cursor:pointer;line-height:40px}::ng-deep .frequency-lifecycle-body .column .block.active,::ng-deep .frequency-lifecycle-body .column span.value.active{border:1px solid #97d2a0;background:#d6f2da}::ng-deep .frequency-lifecycle-body .column app-cs-radio{display:flex}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span.radio,::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item svg{position:absolute;top:14px;left:-10px;height:20px;width:20px}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span.value{max-width:100%;pointer-events:none;font-size:13px;color:#747576;width:100%}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input:checked~span.value{pointer-events:auto;border:1px solid #97d2a0;background:#d6f2da}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day{-moz-appearance:textfield;width:40px;padding:4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;background:transparent;margin:0 4px 0 0;font-size:13px}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day::-webkit-inner-spin-button,::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span{font-size:13px;color:#747576}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-26px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0!important;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::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-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-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-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-day-calendar button.dp-current-location-btn: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-month-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn: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-calendar-week,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::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-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::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-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::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-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}::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-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::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-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-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}"]
12262
+ template: "<div class=\"frequency-lifecycle-responsibility vx-mt-5\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SET A LIFECYCLE FOR THIS RESPONSIBILITY:</div>\r\n <div class=\"frequency-lifecycle-responsibility-inner vx-p-3 vx-pt-2 vx-d-flex vx-align-center vx-justify-between\">\r\n <div class=\"frequency-lifecycle-responsibility-item\">\r\n <div class=\"vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Starts From</div>\r\n <div class=\"lifecycle-box vx-d-flex vx-align-center vx-p-2\" (click)=\"openDatePicker(); datePickerOverlay = true\" [id]=\"'form-field' + id\">\r\n <i class=\"icons vx-fs-16 vx-paragraph-txt vx-mr-3\">&#xe996;</i>\r\n <input class=\"start-date-input\" type=\"text\" [value]=\"startDate | date: 'dd MMM yyyy'\" [placeholder]=\"startDate | date: 'dd MMM yyyy'\" readonly >\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"frequency-lifecycle-responsibility-item\">\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ends By</div>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 0\" (checkedEvent)=\"typeSelected(0)\">\r\n <div class=\"date-field\" (click)=\"openDatePicker1(); datePickerOverlay = true\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"endDateObject | date: 'dd MMM yyyy'\" [placeholder]=\"endDateObject | date: 'dd MMM yyyy'\" readonly>\r\n </div>\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n <div class=\"frequency-lifecycle-responsibility-item\">\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ends After</div>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 1\" (checkedEvent)=\"typeSelected(1)\">\r\n <input class=\"input-field\" type=\"number\" [(ngModel)]=\"occurrance\" (focusout)=\"endsAfter($event)\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" >\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-ml-2\">Occurrences</span>\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n <div class=\"frequency-lifecycle-responsibility-item\">\r\n <div class=\"item-inner vx-d-block\">\r\n <div class=\"heading vx-fs-12 vx-label-txt vx-mb-1\">Ongoing</div>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 2\" (checkedEvent)=\"typeSelected(2)\">\r\n <span class=\"vx-fs-11 vx-paragraph-txt vx-ml-2\">The responsibility will perpetually exist.</span>\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-lifecycle\">\r\n <div class=\"frequency-lifecycle-head\">\r\n <p class=\"frequency-lifecycle-title\">SET A LIFECYCLE FOR THIS RESPONSIBILITY:</p>\r\n </div>\r\n <div class=\"frequency-lifecycle-body\">\r\n <div class=\"column\">\r\n <label class=\"text\">Starts From</label>\r\n <div [id]=\"'form-field' + id\" class=\"block active\">\r\n <div class=\"date-picker\" (click)=\"openDatePicker(); datePickerOverlay = true\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"startDate | date: 'dd MMM yyyy'\" [placeholder]=\"startDate | date: 'dd MMM yyyy'\" readonly>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"column\">\r\n <label class=\"text\">Ends by</label>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 0\" (checkedEvent)=\"typeSelected(0)\">\r\n <div class=\"date-picker\" (click)=\"openDatePicker1(); datePickerOverlay = true\">\r\n <i class=\"icons\">&#xe92d;</i>\r\n <input type=\"text\" [value]=\"endDateObject | date: 'dd MMM yyyy'\" [placeholder]=\"endDateObject | date: 'dd MMM yyyy'\" readonly>\r\n </div>\r\n </app-cs-radio>\r\n </div>\r\n <div class=\"column\">\r\n <label class=\"text\">Ends after </label>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 1\" (checkedEvent)=\"typeSelected(1)\">\r\n <input \r\n type=\"number\" \r\n [(ngModel)]=\"occurrance\" \r\n (focusout)=\"endsAfter($event)\" class=\"day\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <span> Occurrences </span>\r\n </app-cs-radio>\r\n </div>\r\n <div class=\"column\">\r\n <label class=\"text\">Ongoing</label>\r\n <app-cs-radio [checked]=\"selectedLifecycleType == 2\" (checkedEvent)=\"typeSelected(2)\">\r\n The responsibility will perpetually exist.\r\n </app-cs-radio>\r\n </div>\r\n </div>\r\n\r\n \r\n</div>\r\n<!-- start date date picker -->\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + id\"\r\n [placeholder]=\"startDate | date: 'dd MMM yyyy'\"\r\n [(ngModel)]=\"startDate\"\r\n [config]=\"startDateConfig\"\r\n (onSelect)=\"openDatePicker();startFromChange($event); showDateError = false; datePickerOverlay = false\"\r\n></dp-date-picker>\r\n<div class=\"vx-overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n\r\n<!-- end date date picker -->\r\n<dp-date-picker\r\n #datePicker1\r\n [(ngModel)]=\"endDate\"\r\n [placeholder]=\"endDateObject | date: 'dd MMM yyyy'\"\r\n [id]=\"'end-by-input-' + id\"\r\n [config]=\"endDateConfig\"\r\n [minDate]=\"endDateConfig['min']\"\r\n (onSelect)=\"endByChange($event); showDateError = false; datePickerOverlay = false\"\r\n></dp-date-picker> \r\n<div class=\"vx-overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datePickerOverlay\"></div>\r\n",
12263
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .frequency-lifecycle-responsibility-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-lifecycle-responsibility-inner mat-radio-group{display:flex;justify-content:space-between}::ng-deep .frequency-lifecycle-responsibility-item{position:relative;height:3.375rem}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type{width:8.5rem}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label:after,::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label:before{display:none}::ng-deep .frequency-lifecycle-responsibility-item:first-of-type label .heading{padding-left:0}::ng-deep .frequency-lifecycle-responsibility-item:nth-child(2){width:8.5rem}::ng-deep .frequency-lifecycle-responsibility-item:nth-child(3){width:11.25rem}::ng-deep .frequency-lifecycle-responsibility-item:last-of-type{width:14.25rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner{position:relative}::ng-deep .frequency-lifecycle-responsibility-item .item-inner .heading{padding-left:1.75rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio{position:absolute;top:0;left:0;width:100%;height:3.375rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item{width:100%;position:relative}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .radio{position:absolute;top:-17px;left:0;width:1rem;height:1rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .radiomark{position:absolute;top:2px;left:0;width:1rem;height:1rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;width:calc(100% + 1rem);max-width:100%!important;height:2rem;cursor:pointer;text-transform:none;margin:22px 0 0 -1rem!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field{display:flex;align-items:center;position:relative;width:100%;height:100%;pointer-events:none}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item .value .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;width:100%;height:1.875rem;padding:0 .5rem 0 2.25rem;position:absolute;top:0;left:0;cursor:pointer}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value{pointer-events:auto;margin:22px 0 0!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value .date-field,::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .radio-item input:checked~span.value .input-field{pointer-events:auto!important}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field{-moz-appearance:textfield;border:none;border-bottom:1px solid #dbdbdb;color:#747576;display:inline-block;font-size:13px;text-align:center;width:2.75rem;height:1.25rem;padding:0 .125rem;margin:0 .5rem;outline:none;pointer-events:none}::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field::-webkit-inner-spin-button,::ng-deep .frequency-lifecycle-responsibility-item .item-inner app-cs-radio .input-field::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-lifecycle-responsibility-item .lifecycle-box{border-radius:.25rem;border:1px solid #dbdbdb;height:2rem;position:relative;cursor:pointer}::ng-deep .frequency-lifecycle-responsibility-item .lifecycle-box .start-date-input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;width:100%;outline:none;cursor:pointer}::ng-deep .frequency-lifecycle{border-top:1px solid #f1f1f1}::ng-deep .frequency-lifecycle-head{background:#fbfbfb;padding:8px 20px}::ng-deep .frequency-lifecycle-title{margin:0;padding:0;font-size:12px;line-height:16px;color:#747576;text-transform:uppercase}::ng-deep .frequency-lifecycle-body{padding:10px 20px;display:flex}::ng-deep .frequency-lifecycle-body .column{width:25%;padding:0;position:relative}::ng-deep .frequency-lifecycle-body .column label.text{color:#747576;font-size:11px;text-transform:uppercase;margin:0 0 4px;font-weight:500;line-height:16px;display:block}::ng-deep .frequency-lifecycle-body .column+.column{padding-left:28px}::ng-deep .frequency-lifecycle-body .column:first-child{width:20%}::ng-deep .frequency-lifecycle-body .column:last-child{width:30%}::ng-deep .frequency-lifecycle-body .column .block,::ng-deep .frequency-lifecycle-body .column span.value{display:flex;font-size:13px;color:#747576;border:1px solid #f1f1f1;border-radius:2px;padding:0 4px 0 16px;box-sizing:border-box;min-height:48px;justify-content:center;align-items:center;background:#fff;cursor:pointer;text-transform:none;margin:0!important}::ng-deep .frequency-lifecycle-body .column .block .date-picker,::ng-deep .frequency-lifecycle-body .column span.value .date-picker{display:flex;align-items:center;position:relative}::ng-deep .frequency-lifecycle-body .column .block .date-picker i,::ng-deep .frequency-lifecycle-body .column span.value .date-picker i{font-size:16px;margin-right:8px}::ng-deep .frequency-lifecycle-body .column .block .date-picker input,::ng-deep .frequency-lifecycle-body .column span.value .date-picker input{border:none;outline:none;width:100%;background:transparent;font-size:12px;cursor:pointer;line-height:40px}::ng-deep .frequency-lifecycle-body .column .block.active,::ng-deep .frequency-lifecycle-body .column span.value.active{border:1px solid #97d2a0;background:#d6f2da}::ng-deep .frequency-lifecycle-body .column app-cs-radio{display:flex}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item{width:100%;position:relative}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span.radio,::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item svg{position:absolute;top:14px;left:-10px;height:20px;width:20px}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span.value{max-width:100%;pointer-events:none;font-size:13px;color:#747576;width:100%}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input:checked~span.value{pointer-events:auto;border:1px solid #97d2a0;background:#d6f2da}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day{-moz-appearance:textfield;width:40px;padding:4px;text-align:center;border:none;border-bottom:2px solid #dcdcdc;line-height:26px;color:#161b2f;font-weight:400;outline:none;background:transparent;margin:0 4px 0 0;font-size:13px}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day::-webkit-inner-spin-button,::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item input.day::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .frequency-lifecycle-body .column app-cs-radio label.radio-item span{font-size:13px;color:#747576}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-26px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0!important;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::ng-deep dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::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-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-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep dp-date-picker .dp-popup dp-day-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-day-calendar button.dp-current-location-btn: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-month-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn: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-calendar-week,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::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-calendar-week .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::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-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::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-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}::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-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::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-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-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}"]
12262
12264
  },] }
12263
12265
  ];
12264
12266
  FrequencyLifecycleComponent.ctorParameters = function () { return [
@@ -12273,6 +12275,7 @@
12273
12275
  occurrance: [{ type: i0.Input }],
12274
12276
  selectedLifecycleType: [{ type: i0.Input }],
12275
12277
  id: [{ type: i0.Input }],
12278
+ mode: [{ type: i0.Input }],
12276
12279
  selectedOccurance: [{ type: i0.Output }]
12277
12280
  };
12278
12281
 
@@ -12327,8 +12330,8 @@
12327
12330
  FrequencyDueDateComponent.decorators = [
12328
12331
  { type: i0.Component, args: [{
12329
12332
  selector: 'app-frequency-due-date',
12330
- template: "<!-- <p>frequency-due-date works!</p> -->\r\n<div class=\"frequency-due-date\" *ngIf=\"mode=='responsibility'\">\r\n <div *ngIf=\"completedRequired \" class=\"frequency-due-date-row\">\r\n <p>The responsibility can be marked as <i class=\"completed\">complete</i></p>\r\n <input \r\n [id]=\"'complete-' + id\" \r\n type=\"number\" \r\n [(ngModel)]=\"completedValue\" \r\n (change)=\"onValueChange($event, 'completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ completedValue < 2 ? 'day' : 'days' }} before the due date.</p>\r\n </div>\r\n <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n <p>The responsibility will be marked as <i>not completed</i></p>\r\n <input \r\n type=\"number\" \r\n [id]=\"'not-completed-' + id\" \r\n [(ngModel)]=\"notCompletedValue\" \r\n (change)=\"onValueChange($event, 'not completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ notCompletedValue < 2 ? 'day' : 'days' }} after the due date if it is not done.</p>\r\n </div>\r\n <div *ngIf=\"isDeactivated\" class=\"frequency-due-date-row\">\r\n <p>The responsibility will be <strong>deactivated</strong>\r\n if it has <i>not been completed</i> for</p>\r\n <input \r\n type=\"number\" \r\n [id]=\"'deactivate' + id\" \r\n [(ngModel)]=\"deactivateValue\" \r\n (change)=\"onValueChange($event, 'deactivated')\" \r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>consecutive due dates.</p>\r\n </div>\r\n</div>\r\n<div class=\"frequency-due-date\" *ngIf=\"mode=='policy'\">\r\n <div *ngIf=\"completedRequired \" class=\"frequency-due-date-row\">\r\n <p>The policy can be <i class=\"completed\">attested</i></p>\r\n <input \r\n [id]=\"'complete-' + id\" \r\n type=\"number\" \r\n [(ngModel)]=\"completedValue\" \r\n (change)=\"onValueChange($event, 'completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ completedValue < 2 ? 'day' : 'days' }} before the due date.</p>\r\n </div>\r\n <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n <p>The policy attestation will <i>fail</i></p>\r\n <input \r\n type=\"number\" \r\n [id]=\"'not-completed-' + id\" \r\n [(ngModel)]=\"notCompletedValue\" \r\n (change)=\"onValueChange($event, 'not completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ notCompletedValue < 2 ? 'day' : 'days' }} after the due date if it is not completed.</p>\r\n </div>\r\n \r\n</div>\r\n<div class=\"frequency-due-date\" *ngIf=\"mode=='reviewerFrequency'\">\r\n <div *ngIf=\"completedRequired \" class=\"frequency-due-date-row\">\r\n <p>The policy can be <i class=\"completed\">reviewed</i></p>\r\n <input \r\n [id]=\"'complete-' + id\" \r\n type=\"number\" \r\n [(ngModel)]=\"completedValue\" \r\n (change)=\"onValueChange($event, 'completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ completedValue < 2 ? 'day' : 'days' }} before the review date.</p>\r\n </div>\r\n <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n <p>The policy review will <i>fail</i></p>\r\n <input \r\n type=\"number\" \r\n [id]=\"'not-completed-' + id\" \r\n [(ngModel)]=\"notCompletedValue\" \r\n (change)=\"onValueChange($event, 'not completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ notCompletedValue < 2 ? 'day' : 'days' }} after the review date if it is not completed.</p>\r\n </div>\r\n \r\n</div>",
12331
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.frequency-due-date{display:block}.frequency-due-date-row{display:flex;border-top:1px solid #f1f1f1;padding:12px 20px;align-items:center}.frequency-due-date p{font-size:13px;color:#747576;width:auto;margin:0;font-weight:400;line-height:20px}.frequency-due-date p i{color:#d93b41;font-style:italic;font-weight:500;padding:0 4px}.frequency-due-date p i.completed{color:#1e5dd3}.frequency-due-date p strong{font-weight:600;font-style:italic}.frequency-due-date input{-moz-appearance:textfield;font-size:14px;color:#161b2f;border:0;border-bottom:2px solid #dcdcdc;display:inline-block;width:36px;text-align:center;padding:4px;margin:0 8px;outline:none}.frequency-due-date input::-webkit-inner-spin-button,.frequency-due-date input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}"]
12333
+ template: "<div *ngIf=\"mode=='responsibility'\" class=\"frequency-bottom\">\r\n <div *ngIf=\"completedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">COMPLETION WINDOW OPENS:</div>\r\n <div class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\">\r\n The responsibility can be completed on the due date and\r\n <input class=\"countNum\" [id]=\"'complete-' + id\" type=\"number\" [(ngModel)]=\"completedValue\" (change)=\"onValueChange($event, 'completed')\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" >\r\n {{ completedValue < 2 ? 'day' : 'days' }} <span class=\"vx-fw-500\">before</span> the due date. Where this occurs, this will show as the responsibility being <span class=\"completed-text vx-fw-500\">completed on time</span>.\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"notCompletedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">EXTENSION:</div>\r\n <div class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\">\r\n The responsibility can be completed\r\n <input class=\"countNum\" type=\"number\" [id]=\"'not-completed-' + id\" [(ngModel)]=\"notCompletedValue\" (change)=\"onValueChange($event, 'not completed')\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" >\r\n {{ notCompletedValue < 2 ? 'day' : 'days' }} <span class=\"vx-fw-500\">after</span> the due date. Where this occurs, this will show as the responsibility being <span class=\"delay-text vx-fw-500\">completed with delay</span>.\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"notCompletedRequired\" class=\"frequency-bottom-item vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">COMPLETION WINDOW CLOSES:</div>\r\n <div class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\">\r\n The responsibility cannot be completed <span class=\"vx-fw-500 vx-label-txt\">{{notCompletedValue}}</span> {{ notCompletedValue < 2 ? 'day' : 'days' }} <span class=\"vx-fw-500\">after</span> the due date. Where this occurs, this will show as the responsibility being <span class=\"notcompleted-text vx-fw-500\">not completed</span>.\r\n </div>\r\n </div>\r\n \r\n <div *ngIf=\"isDeactivated\" class=\"frequency-bottom-item vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">AUTOMATIC DEACTIVATE:</div>\r\n <div class=\"frequency-bottom-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\">\r\n This responsibility will be automatically deactivated, if it is not completed for\r\n <input class=\"countNum\" type=\"number\" [id]=\"'deactivate' + id\" [(ngModel)]=\"deactivateValue\" (change)=\"onValueChange($event, 'deactivated')\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\" >\r\n consecutive due dates.\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div class=\"frequency-due-date\" *ngIf=\"mode=='policy'\">\r\n <div *ngIf=\"completedRequired \" class=\"frequency-due-date-row\">\r\n <p>The policy can be <i class=\"completed\">attested</i></p>\r\n <input \r\n [id]=\"'complete-' + id\" \r\n type=\"number\" \r\n [(ngModel)]=\"completedValue\" \r\n (change)=\"onValueChange($event, 'completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ completedValue < 2 ? 'day' : 'days' }} before the due date.</p>\r\n </div>\r\n <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n <p>The policy attestation will <i>fail</i></p>\r\n <input \r\n type=\"number\" \r\n [id]=\"'not-completed-' + id\" \r\n [(ngModel)]=\"notCompletedValue\" \r\n (change)=\"onValueChange($event, 'not completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ notCompletedValue < 2 ? 'day' : 'days' }} after the due date if it is not completed.</p>\r\n </div>\r\n</div>\r\n<div class=\"frequency-due-date\" *ngIf=\"mode=='reviewerFrequency'\">\r\n <div *ngIf=\"completedRequired \" class=\"frequency-due-date-row\">\r\n <p>The policy can be <i class=\"completed\">reviewed</i></p>\r\n <input \r\n [id]=\"'complete-' + id\" \r\n type=\"number\" \r\n [(ngModel)]=\"completedValue\" \r\n (change)=\"onValueChange($event, 'completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ completedValue < 2 ? 'day' : 'days' }} before the review date.</p>\r\n </div>\r\n <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n <p>The policy review will <i>fail</i></p>\r\n <input \r\n type=\"number\" \r\n [id]=\"'not-completed-' + id\" \r\n [(ngModel)]=\"notCompletedValue\" \r\n (change)=\"onValueChange($event, 'not completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ notCompletedValue < 2 ? 'day' : 'days' }} after the review date if it is not completed.</p>\r\n </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"false\">\r\n<div class=\"frequency-due-date\" *ngIf=\"mode=='responsibility'\">\r\n <div *ngIf=\"completedRequired \" class=\"frequency-due-date-row\">\r\n <p>The responsibility can be marked as <i class=\"completed\">complete</i></p>\r\n <input \r\n [id]=\"'complete-' + id\" \r\n type=\"number\" \r\n [(ngModel)]=\"completedValue\" \r\n (change)=\"onValueChange($event, 'completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ completedValue < 2 ? 'day' : 'days' }} before the due date.</p>\r\n </div>\r\n <div *ngIf=\"notCompletedRequired\" class=\"frequency-due-date-row\">\r\n <p>The responsibility will be marked as <i>not completed</i></p>\r\n <input \r\n type=\"number\" \r\n [id]=\"'not-completed-' + id\" \r\n [(ngModel)]=\"notCompletedValue\" \r\n (change)=\"onValueChange($event, 'not completed')\"\r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>{{ notCompletedValue < 2 ? 'day' : 'days' }} after the due date if it is not done.</p>\r\n </div>\r\n <div *ngIf=\"isDeactivated\" class=\"frequency-due-date-row\">\r\n <p>The responsibility will be <strong>deactivated</strong>\r\n if it has <i>not been completed</i> for</p>\r\n <input \r\n type=\"number\" \r\n [id]=\"'deactivate' + id\" \r\n [(ngModel)]=\"deactivateValue\" \r\n (change)=\"onValueChange($event, 'deactivated')\" \r\n onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\"\r\n >\r\n <p>consecutive due dates.</p>\r\n </div>\r\n</div>\r\n</ng-container>",
12334
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .frequency-bottom-item-box{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-bottom-item-box input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .frequency-bottom-item-box input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-bottom-item-box input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-bottom-item-box .completed-text{color:#34aa44}::ng-deep .frequency-bottom-item-box .delay-text{color:#f0b819}::ng-deep .frequency-bottom-item-box .notcompleted-text{color:#d93b41}.frequency-due-date{display:block}.frequency-due-date-row{display:flex;border-top:1px solid #f1f1f1;padding:12px 20px;align-items:center}.frequency-due-date p{font-size:13px;color:#747576;width:auto;margin:0;font-weight:400;line-height:20px}.frequency-due-date p i{color:#d93b41;font-style:italic;font-weight:500;padding:0 4px}.frequency-due-date p i.completed{color:#1e5dd3}.frequency-due-date p strong{font-weight:600;font-style:italic}.frequency-due-date input{-moz-appearance:textfield;font-size:14px;color:#161b2f;border:0;border-bottom:2px solid #dcdcdc;display:inline-block;width:36px;text-align:center;padding:4px;margin:0 8px;outline:none}.frequency-due-date input::-webkit-inner-spin-button,.frequency-due-date input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}"]
12332
12335
  },] }
12333
12336
  ];
12334
12337
  FrequencyDueDateComponent.ctorParameters = function () { return []; };
@@ -12350,6 +12353,7 @@
12350
12353
  this.id = -1;
12351
12354
  this.listArray = [];
12352
12355
  this.selectedIndex = [];
12356
+ this.mode = '';
12353
12357
  this.noAnimation = true;
12354
12358
  this.selectedCheckbox = new i0.EventEmitter(); // {checked: true, index:0} checked : checkboxStatus, index: Index of list which checked/unchecked
12355
12359
  }
@@ -12364,8 +12368,8 @@
12364
12368
  FrequencyCheckboxListComponent.decorators = [
12365
12369
  { type: i0.Component, args: [{
12366
12370
  selector: 'app-frequency-checkbox-list',
12367
- template: "<!-- <p>frequency-checkbox-list works!</p> -->\r\n<div class=\"frequency-checkbox-list\" [class.no-animation]=\"noAnimation\">\r\n <div class=\"frequency-checkbox-list-row\" [class.year-row]=\"listArray.length === 12\">\r\n <app-cs-checkbox \r\n *ngFor=\"let eachList of listArray; let i = index;\"\r\n [id]=\"i\" [value]=\"i\" [ngValue]=\"selectedIndex.includes(i)\" \r\n (ngValueChange)=\"selectedCheckbox.emit({checked:$event, index:i})\"\r\n [disabled]=\"id === 4 && selectedIndex.length == 2 && !selectedIndex.includes(i)\"\r\n >\r\n {{eachList}}\r\n </app-cs-checkbox>\r\n </div>\r\n</div>",
12368
- styles: ["::ng-deep .frequency-checkbox-list{padding:12px 20px;border-top:1px solid #f1f1f1}::ng-deep .frequency-checkbox-list-row{display:flex;padding:8px 0}::ng-deep .frequency-checkbox-list-row.year-row{flex-wrap:wrap;padding:4px 0}::ng-deep .frequency-checkbox-list-row.year-row app-cs-checkbox{display:flex;width:calc(100% / 6);padding:4px 0}::ng-deep .frequency-checkbox-list app-cs-checkbox{display:flex;width:100%}::ng-deep .frequency-checkbox-list app-cs-checkbox label.checkbox-item span.value{font-size:12px!important;color:#747576}::ng-deep .frequency-checkbox-list.no-animation circle,::ng-deep .frequency-checkbox-list.no-animation path,::ng-deep .frequency-checkbox-list.no-animation svg{-webkit-animation:fill 0s ease-in-out 0s forwards,scale 0s ease-in-out 0s both,stroke 0s cubic-bezier(.65,0,.45,1) forwards,stroke 0s cubic-bezier(.65,0,.45,1) 0s forwards!important;animation:fill 0s ease-in-out 0s forwards,scale 0s ease-in-out 0s both,stroke 0s cubic-bezier(.65,0,.45,1) forwards,stroke 0s cubic-bezier(.65,0,.45,1) 0s forwards!important}"]
12371
+ template: "<div class=\"frequency-checkbox vx-d-flex vx-align-center\" [class.year-row]=\"listArray.length === 12\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-checkbox-item vx-p-3 vx-pr-4 vx-d-flex vx-align-center\" *ngFor=\"let eachList of listArray; let i = index;\">\r\n <app-cs-checkbox [id]=\"i\" [value]=\"i\" [ngValue]=\"selectedIndex.includes(i)\" (ngValueChange)=\"selectedCheckbox.emit({checked:$event, index:i})\" [disabled]=\"id === 4 && selectedIndex.length == 2 && !selectedIndex.includes(i)\">\r\n <span class=\"vx-fs-12 vx-label-txt\">{{eachList}}</span>\r\n </app-cs-checkbox>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-checkbox-list\" [class.no-animation]=\"noAnimation\">\r\n <div class=\"frequency-checkbox-list-row\" [class.year-row]=\"listArray.length === 12\">\r\n <app-cs-checkbox \r\n *ngFor=\"let eachList of listArray; let i = index;\"\r\n [id]=\"i\" [value]=\"i\" [ngValue]=\"selectedIndex.includes(i)\" \r\n (ngValueChange)=\"selectedCheckbox.emit({checked:$event, index:i})\"\r\n [disabled]=\"id === 4 && selectedIndex.length == 2 && !selectedIndex.includes(i)\"\r\n >\r\n {{eachList}}\r\n </app-cs-checkbox>\r\n </div>\r\n</div>",
12372
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-checkbox{background:#fff;border-radius:0 0 .25rem .25rem;border:1px solid #f1f1f1;position:relative;top:-3px}::ng-deep .frequency-checkbox.year-row{flex-wrap:wrap}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item{width:calc(100% / 6)}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:first-of-type,::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(2),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(3),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(4),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(5),::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .frequency-checkbox.year-row .frequency-checkbox-item:nth-child(6){border-right:none}::ng-deep .frequency-checkbox-item{border-right:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-checkbox-item:last-of-type{border-right:none}::ng-deep .frequency-checkbox-item app-cs-checkbox{display:flex}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item{position:relative;padding-left:1.75rem!important}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .checkbox,::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .checkmark{position:absolute!important;top:0;left:0}::ng-deep .frequency-checkbox-item app-cs-checkbox .checkbox-item .value{margin:0!important;max-width:100%!important}::ng-deep .frequency-checkbox-list{padding:12px 20px;border-top:1px solid #f1f1f1}::ng-deep .frequency-checkbox-list-row{display:flex;padding:8px 0}::ng-deep .frequency-checkbox-list-row.year-row{flex-wrap:wrap;padding:4px 0}::ng-deep .frequency-checkbox-list-row.year-row app-cs-checkbox{display:flex;width:calc(100% / 6);padding:4px 0}::ng-deep .frequency-checkbox-list app-cs-checkbox{display:flex;width:100%}::ng-deep .frequency-checkbox-list app-cs-checkbox label.checkbox-item span.value{font-size:12px!important;color:#747576}::ng-deep .frequency-checkbox-list.no-animation circle,::ng-deep .frequency-checkbox-list.no-animation path,::ng-deep .frequency-checkbox-list.no-animation svg{-webkit-animation:fill 0s ease-in-out 0s forwards,scale 0s ease-in-out 0s both,stroke 0s cubic-bezier(.65,0,.45,1) forwards,stroke 0s cubic-bezier(.65,0,.45,1) 0s forwards!important;animation:fill 0s ease-in-out 0s forwards,scale 0s ease-in-out 0s both,stroke 0s cubic-bezier(.65,0,.45,1) forwards,stroke 0s cubic-bezier(.65,0,.45,1) 0s forwards!important}"]
12369
12373
  },] }
12370
12374
  ];
12371
12375
  FrequencyCheckboxListComponent.ctorParameters = function () { return []; };
@@ -12373,6 +12377,7 @@
12373
12377
  id: [{ type: i0.Input }],
12374
12378
  listArray: [{ type: i0.Input }],
12375
12379
  selectedIndex: [{ type: i0.Input }],
12380
+ mode: [{ type: i0.Input }],
12376
12381
  selectedCheckbox: [{ type: i0.Output }]
12377
12382
  };
12378
12383
 
@@ -12381,6 +12386,7 @@
12381
12386
  this.radioList = [];
12382
12387
  this.selectedIndex = -1;
12383
12388
  this.name = '';
12389
+ this.mode = '';
12384
12390
  this.noAnimation = true;
12385
12391
  this.selectedRadio = new i0.EventEmitter();
12386
12392
  }
@@ -12396,8 +12402,8 @@
12396
12402
  FrequencyRadioListComponent.decorators = [
12397
12403
  { type: i0.Component, args: [{
12398
12404
  selector: 'app-frequency-radio-list',
12399
- template: "<!-- <p>frequency-radio-list works!</p> -->\r\n<div class=\"frequency-radio-list\" [class.no-animation]=\"noAnimation\">\r\n <div class=\"frequency-radio-list-row\" [class.year-row]=\"radioList.length === 12\">\r\n <app-cs-radio \r\n *ngFor=\"let eachList of radioList; let i = index;\" \r\n [id]=\"i\" \r\n [value]=\"i\" \r\n [name]=\"name\"\r\n [checked]=\"(selectedIndex === i)\" \r\n (checkedEvent)=\"selectedRadio.emit($event)\">\r\n {{eachList}} \r\n </app-cs-radio>\r\n </div>\r\n</div>",
12400
- styles: ["::ng-deep .frequency-radio-list{padding:12px 20px;border-top:1px solid #f1f1f1}::ng-deep .frequency-radio-list-row{display:flex;padding:8px 0}::ng-deep .frequency-radio-list-row.year-row{flex-wrap:wrap;padding:4px 0}::ng-deep .frequency-radio-list-row.year-row app-cs-radio{display:flex;width:calc(100% / 6);padding:4px 0}::ng-deep .frequency-radio-list app-cs-radio{display:flex;width:100%}::ng-deep .frequency-radio-list app-cs-radio label.radio-item span.value{font-size:12px!important;color:#747576;white-space:nowrap}::ng-deep .frequency-radio-list.no-animation circle,::ng-deep .frequency-radio-list.no-animation path,::ng-deep .frequency-radio-list.no-animation svg{-webkit-animation:fill 0s ease-in-out 0s forwards,scale 0s ease-in-out 0s both,stroke 0s cubic-bezier(.65,0,.45,1) forwards,stroke 0s cubic-bezier(.65,0,.45,1) 0s forwards!important;animation:fill 0s ease-in-out 0s forwards,scale 0s ease-in-out 0s both,stroke 0s cubic-bezier(.65,0,.45,1) forwards,stroke 0s cubic-bezier(.65,0,.45,1) 0s forwards!important}"]
12405
+ template: "<div class=\"frequency-radio vx-d-flex vx-align-center\" [class.year-row]=\"radioList.length === 12\" *ngIf=\"mode !== 'policy'\">\r\n <div class=\"frequency-radio-item vx-p-3 vx-d-flex vx-align-center vx-w-100\" *ngFor=\"let eachList of radioList; let i = index;\">\r\n <app-cs-radio\r\n [id]=\"i\" \r\n [value]=\"i\" \r\n [name]=\"name\"\r\n [checked]=\"(selectedIndex === i)\" \r\n (checkedEvent)=\"selectedRadio.emit($event)\">\r\n <span class=\"vx-fs-12 vx-label-txt\">{{eachList}}</span>\r\n </app-cs-radio>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n<!-- For Policy -->\r\n<div *ngIf=\"mode === 'policy'\" class=\"frequency-radio-list\" [class.no-animation]=\"noAnimation\">\r\n <div class=\"frequency-radio-list-row\" [class.year-row]=\"radioList.length === 12\">\r\n <app-cs-radio \r\n *ngFor=\"let eachList of radioList; let i = index;\" \r\n [id]=\"i\" \r\n [value]=\"i\" \r\n [name]=\"name\"\r\n [checked]=\"(selectedIndex === i)\" \r\n (checkedEvent)=\"selectedRadio.emit($event)\">\r\n {{eachList}} \r\n </app-cs-radio>\r\n </div>\r\n</div>",
12406
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .frequency-radio{background:#fff;border-radius:0 0 .25rem .25rem;border:1px solid #f1f1f1;position:relative;top:-3px}::ng-deep .frequency-radio.year-row{flex-wrap:wrap}::ng-deep .frequency-radio.year-row .frequency-radio-item{width:calc(100% / 6)!important}::ng-deep .frequency-radio.year-row .frequency-radio-item:first-of-type,::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(2),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(3),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(4),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(5),::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(6){border-bottom:1px solid #f1f1f1}::ng-deep .frequency-radio.year-row .frequency-radio-item:nth-child(6){border-right:none}::ng-deep .frequency-radio-item{border-right:1px solid #f1f1f1;height:2.75rem}::ng-deep .frequency-radio-item:last-of-type{border-right:none}::ng-deep .frequency-radio-item app-cs-radio{display:flex}::ng-deep .frequency-radio-list{padding:12px 20px;border-top:1px solid #f1f1f1}::ng-deep .frequency-radio-list-row{display:flex;padding:8px 0}::ng-deep .frequency-radio-list-row.year-row{flex-wrap:wrap;padding:4px 0}::ng-deep .frequency-radio-list-row.year-row app-cs-radio{display:flex;width:calc(100% / 6);padding:4px 0}::ng-deep .frequency-radio-list app-cs-radio{display:flex;width:100%}::ng-deep .frequency-radio-list app-cs-radio label.radio-item span.value{font-size:12px!important;color:#747576;white-space:nowrap}::ng-deep .frequency-radio-list.no-animation circle,::ng-deep .frequency-radio-list.no-animation path,::ng-deep .frequency-radio-list.no-animation svg{-webkit-animation:fill 0s ease-in-out 0s forwards,scale 0s ease-in-out 0s both,stroke 0s cubic-bezier(.65,0,.45,1) forwards,stroke 0s cubic-bezier(.65,0,.45,1) 0s forwards!important;animation:fill 0s ease-in-out 0s forwards,scale 0s ease-in-out 0s both,stroke 0s cubic-bezier(.65,0,.45,1) forwards,stroke 0s cubic-bezier(.65,0,.45,1) 0s forwards!important}"]
12401
12407
  },] }
12402
12408
  ];
12403
12409
  FrequencyRadioListComponent.ctorParameters = function () { return []; };
@@ -12405,6 +12411,7 @@
12405
12411
  radioList: [{ type: i0.Input }],
12406
12412
  selectedIndex: [{ type: i0.Input }],
12407
12413
  name: [{ type: i0.Input }],
12414
+ mode: [{ type: i0.Input }],
12408
12415
  selectedRadio: [{ type: i0.Output }]
12409
12416
  };
12410
12417
 
@@ -17406,8 +17413,8 @@
17406
17413
  ReviewFrequencyComponent.decorators = [
17407
17414
  { type: i0.Component, args: [{
17408
17415
  selector: 'app-review-frequency',
17409
- template: "<!-- <p>review-frequency works!</p> -->\r\n<app-snack-bar></app-snack-bar>\r\n\r\n<div class=\"review-frequency\">\r\n <div class=\"review-frequency-head\">\r\n <h3><i class=\"icons\" (click)=\"close()\">&#xe91d;</i> Select a Review Frequency</h3>\r\n </div>\r\n <div class=\"review-frequency-body\">\r\n <div class=\"review-frequency-message\">\r\n <div class=\"review-frequency-icon\"><img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/bulb.svg\" alt=\"\"></div>\r\n <div class=\"review-frequency-inner\">\r\n The review period begins after the responsibility is completed. This means that if a responsibility is\r\n completed on the specified due date, the review will take place after the due date. In some\r\n circumstances this may be fine. In others, such as a responsibility with a regulatory due date, this may\r\n result in non-compliance with an external obligation. Accordingly, when adding the \u201CReview\u201D option to a\r\n responsibility, it is important to carefully consider the due date for a responsibility and how\r\n incorporating a review of the responsibility affects when a responsibility is completed.\r\n </div>\r\n </div>\r\n <div class=\"frequency-due-date\">\r\n <div class=\"frequency-due-date-row\">\r\n <p>This responsibility needs to be <i class=\"completed\">reviewed</i></p>\r\n <input [(ngModel)]=\"reviewCompleteDays\" (focusout)=\"onValueChange()\" type=\"number\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n <p>days after it has been completed.</p>\r\n </div>\r\n <div class=\"frequency-due-date-row\">\r\n <p>The review status for this responsibility will be marked as <i>not completed</i></p>\r\n <input [(ngModel)]=\"reviewNOtCompletedDays\" type=\"number\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n <p>days after the due date</p >\r\n <p>&nbsp;if not reviewed.</p>\r\n </div>\r\n </div>\r\n </div>\r\n <app-floating-bar \r\n [showWorkflow]=\"false\"\r\n [isDisabled]=\"(reviewCompleteDays<1)?true:false\"\r\n (closeEvent)=\"save()\" (closeList)=\"closeReviewFrequency.emit()\"> <span class=\"name\">This responsibility needs to be reviewed within <b>{{reviewCompleteDays}}</b> {{reviewCompleteDays > 1 ? 'days': 'day'}} after it has been completed.</span>\r\n </app-floating-bar>\r\n</div>",
17410
- styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.review-frequency{border-top:3px solid #1e5dd3;position:fixed;top:0;right:500px;bottom:0;left:0}.review-frequency-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;border-radius:2px 2px 0 0;padding:11px 12px}.review-frequency-head h3{font-size:14px;margin:0;font-weight:500;color:#161b2f;display:flex;align-items:center}.review-frequency-head h3 i{font-size:20px;margin-right:8px;cursor:pointer}.review-frequency-body{height:calc(100vh - 112px);padding:24px 36px}.review-frequency-message{position:relative}.review-frequency-inner{font-size:12px;line-height:20px;background:#fbfbfb;border:1px solid #f1f1f1;color:#747576;border-radius:4px;padding:10px 10px 10px 30px;font-weight:500;width:100%}.review-frequency-icon{background:#fff;box-shadow:1px 1px 4px 0 rgba(28,91,209,.25);border-radius:4px;width:32px;height:32px;padding:2px;position:absolute;left:-15px;top:15px}.review-frequency-icon img{width:100%}.frequency-due-date{display:block}.frequency-due-date-row{display:flex;border-top:1px solid #f1f1f1;padding:12px 20px;align-items:center;flex-wrap:wrap}.frequency-due-date p{font-size:13px;color:#747576;width:auto;margin:0;font-weight:400;line-height:20px}.frequency-due-date p i{color:#d93b41;font-style:italic;font-weight:500;padding:0 4px}.frequency-due-date p i.completed{color:#1e5dd3}.frequency-due-date p strong{font-weight:600;font-style:italic}.frequency-due-date input{-moz-appearance:textfield;-webkit-appearance:textfield;font-size:14px;color:#161b2f;border:0;border-bottom:2px solid #dcdcdc;display:inline-block;width:36px;text-align:center;padding:4px;margin:0 8px;outline:none}.frequency-due-date input::-webkit-inner-spin-button,.frequency-due-date input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}"]
17416
+ template: "<app-snack-bar></app-snack-bar>\r\n\r\n<div class=\"review-frequency\">\r\n <div class=\"review-frequency-head vx-d-flex vx-align-center vx-p-3\">\r\n <i class=\"icons arrow vx-fs-16 vx-mr-2\" (click)=\"close()\">&#xe91d;</i> <div class=\"vx-fs-14 vx-fw-500 vx-label-txt\">Select a Review Frequency</div>\r\n </div>\r\n <div class=\"review-frequency-body\">\r\n <div class=\"review-frequency-message\">\r\n <div class=\"review-frequency-icon\"><img src=\"https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/bulb.svg\" alt=\"\"></div>\r\n <div class=\"review-frequency-inner vx-fs-12 vx-paragraph-txt vx-lh-5 vx-w-100\">\r\n The review period begins after the responsibility is completed. This means that if a responsibility is\r\n completed on the specified due date, the review will take place after the due date. In some\r\n circumstances this may be fine. In others, such as a responsibility with a regulatory due date, this may\r\n result in non-compliance with an external obligation. Accordingly, when adding the \u201CReview\u201D option to a\r\n responsibility, it is important to carefully consider the due date for a responsibility and how\r\n incorporating a review of the responsibility affects when a responsibility is completed.\r\n </div>\r\n </div>\r\n <div class=\"frequency-due-date\">\r\n <div class=\"frequency-due-date-item vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">COMPLETION WINDOW OPENS:</div>\r\n <div class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\">\r\n The responsibility can be reviewed\r\n <input class=\"countNum\" [(ngModel)]=\"reviewCompleteDays\" (focusout)=\"onValueChange()\" type=\"number\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n {{ reviewCompleteDays > 1 ? 'days' : 'day' }} <span class=\"vx-fw-500\">after</span> it has been completed. Where this occurs, this will show as the review being <span class=\"completed-text vx-fw-500\">completed on time</span>.\r\n </div>\r\n </div>\r\n \r\n <div class=\"frequency-due-date-item vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">EXTENSION:</div>\r\n <div class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\">\r\n The responsibility can be reviewed\r\n <input class=\"countNum\" [(ngModel)]=\"reviewNOtCompletedDays\" type=\"number\" onkeydown=\"return event.keyCode !== 190\" min=\"0\" oninput=\"this.value = Math.abs(this.value)\">\r\n {{ reviewNOtCompletedDays > 1 ? 'days' : 'day' }}<span class=\"vx-fw-500\"> after</span> the review due date. Where this occurs, this will show as the review being <span class=\"delay-text vx-fw-500\">completed with delay</span>.\r\n </div>\r\n </div>\r\n \r\n <div class=\"frequency-due-date-item vx-mt-5\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">COMPLETION WINDOW CLOSES:</div>\r\n <div class=\"frequency-due-date-item-box vx-fs-13 vx-paragraph-txt vx-p-3 vx-pt-4 vx-pb-4 vx-d-block\">\r\n The responsibility cannot be reviewed\r\n <span class=\"vx-fw-500 vx-label-txt vx-ml-1\">2</span>\r\n days <span class=\"vx-fw-500\">after</span> the review due date. Where this occurs, this will show as the review being <span class=\"notcompleted-text vx-fw-500\">not completed</span>.\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <app-floating-bar \r\n [showWorkflow]=\"false\"\r\n [isDisabled]=\"(reviewCompleteDays<1)?true:false\"\r\n (closeEvent)=\"save()\" (closeList)=\"closeReviewFrequency.emit()\"> <span class=\"name\">This responsibility needs to be reviewed within <b>{{reviewCompleteDays}}</b> {{reviewCompleteDays > 1 ? 'days': 'day'}} after it has been completed.</span>\r\n </app-floating-bar>\r\n</div>",
17417
+ styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");@import url(\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/header/header.css\");@import url(\"https://cdn.v-comply.com/design-system/css/display/display.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\");@import url(\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\");@import url(\"https://cdn.v-comply.com/design-system/css/text/text.css\");@import url(\"https://cdn.v-comply.com/design-system/css/button/button.css\");@import url(\"https://cdn.v-comply.com/design-system/css/color/color.css\");@import url(\"https://cdn.v-comply.com/design-system/css/popover/popover.css\");@import url(\"https://cdn.v-comply.com/design-system/css/width/width.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\");@import url(\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\");::ng-deep .review-frequency{border-top:3px solid #1e5dd3;position:fixed;top:0;right:31.25rem;bottom:0;left:0}::ng-deep .review-frequency-head{background:#fbfbfb;border-bottom:1px solid #f1f1f1;height:2.75rem}::ng-deep .review-frequency-head .arrow{cursor:pointer}::ng-deep .review-frequency-body{height:calc(100vh - 7.625rem);padding:1.5rem 2.25rem;overflow:hidden;overflow-y:auto}::ng-deep .review-frequency-message{position:relative}::ng-deep .review-frequency-inner{background:#fbfbfb;border:1px solid #f1f1f1;border-radius:.25rem;padding:.5rem .5rem .5rem 1.75rem!important}::ng-deep .review-frequency-icon{background:#fff;box-shadow:1px 1px 4px 0 rgba(28,91,209,.25);border-radius:.25rem;width:2rem;height:2rem;padding:.125rem;position:absolute;left:-1rem;top:1rem}::ng-deep .review-frequency-icon img{width:100%}::ng-deep .frequency-due-date-item-box{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-due-date-item-box input.countNum{-moz-appearance:textfield;border:none;border-bottom:1px solid #dbdbdb;color:#161b2f;display:inline-block;font-size:13px;text-align:center;width:2.75rem;padding:.125rem;margin:0 .5rem;outline:none}::ng-deep .frequency-due-date-item-box input.countNum::-webkit-inner-spin-button,::ng-deep .frequency-due-date-item-box input.countNum::-webkit-outer-spin-button{-webkit-appearance:none}::ng-deep .frequency-due-date-item-box .completed-text{color:#34aa44}::ng-deep .frequency-due-date-item-box .delay-text{color:#f0b819}::ng-deep .frequency-due-date-item-box .notcompleted-text{color:#d93b41}"]
17411
17418
  },] }
17412
17419
  ];
17413
17420
  ReviewFrequencyComponent.ctorParameters = function () { return [