vcomply-workflow-engine 2.6.182 → 2.6.183

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 (53) hide show
  1. package/bundles/vcomply-workflow-engine.umd.js +42 -35
  2. package/bundles/vcomply-workflow-engine.umd.js.map +1 -1
  3. package/esm2015/lib/add-multiple-responsibility-with-tab/add-multiple-responsibility-with-tab.component.js +2 -2
  4. package/esm2015/lib/sharedComponents/floating-bar/floating-bar.component.js +3 -3
  5. package/esm2015/lib/sharedComponents/floating-bar/floating-bar.component.ngfactory.js +2 -2
  6. package/esm2015/lib/sharedComponents/frequency/frequency-annual/frequency-annual.component.js +2 -2
  7. package/esm2015/lib/sharedComponents/frequency/frequency-annual/frequency-annual.component.ngfactory.js +7 -7
  8. package/esm2015/lib/sharedComponents/frequency/frequency-biannual/frequency-biannual.component.js +2 -2
  9. package/esm2015/lib/sharedComponents/frequency/frequency-biannual/frequency-biannual.component.ngfactory.js +7 -7
  10. package/esm2015/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.js +5 -3
  11. package/esm2015/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.ngfactory.js +10 -4
  12. package/esm2015/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.ngsummary.json +1 -1
  13. package/esm2015/lib/sharedComponents/frequency/frequency-container/frequency-container.component.js +3 -3
  14. package/esm2015/lib/sharedComponents/frequency/frequency-container/frequency-container.component.ngfactory.js +65 -13
  15. package/esm2015/lib/sharedComponents/frequency/frequency-daily/frequency-daily.component.js +2 -2
  16. package/esm2015/lib/sharedComponents/frequency/frequency-daily/frequency-daily.component.ngfactory.js +6 -6
  17. package/esm2015/lib/sharedComponents/frequency/frequency-due-date/frequency-due-date.component.js +3 -3
  18. package/esm2015/lib/sharedComponents/frequency/frequency-due-date/frequency-due-date.component.ngfactory.js +99 -21
  19. package/esm2015/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.js +4 -3
  20. package/esm2015/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.ngfactory.js +74 -31
  21. package/esm2015/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.ngsummary.json +1 -1
  22. package/esm2015/lib/sharedComponents/frequency/frequency-monthly/frequency-monthly.component.js +2 -2
  23. package/esm2015/lib/sharedComponents/frequency/frequency-monthly/frequency-monthly.component.ngfactory.js +7 -7
  24. package/esm2015/lib/sharedComponents/frequency/frequency-on-completion-of/frequency-on-completion-of.component.js +3 -3
  25. package/esm2015/lib/sharedComponents/frequency/frequency-on-completion-of/frequency-on-completion-of.component.ngfactory.js +40 -4
  26. package/esm2015/lib/sharedComponents/frequency/frequency-one-time/frequency-one-time.component.js +3 -3
  27. package/esm2015/lib/sharedComponents/frequency/frequency-one-time/frequency-one-time.component.ngfactory.js +27 -19
  28. package/esm2015/lib/sharedComponents/frequency/frequency-ongoing/frequency-ongoing.component.js +4 -4
  29. package/esm2015/lib/sharedComponents/frequency/frequency-ongoing/frequency-ongoing.component.ngfactory.js +7 -7
  30. package/esm2015/lib/sharedComponents/frequency/frequency-quarterly/frequency-quarterly.component.js +2 -2
  31. package/esm2015/lib/sharedComponents/frequency/frequency-quarterly/frequency-quarterly.component.ngfactory.js +7 -7
  32. package/esm2015/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.js +5 -3
  33. package/esm2015/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.ngfactory.js +10 -4
  34. package/esm2015/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.ngsummary.json +1 -1
  35. package/esm2015/lib/sharedComponents/frequency/frequency-random/frequency-random.component.js +3 -3
  36. package/esm2015/lib/sharedComponents/frequency/frequency-random/frequency-random.component.ngfactory.js +24 -24
  37. package/esm2015/lib/sharedComponents/frequency/frequency-top/frequency-top.component.js +6 -4
  38. package/esm2015/lib/sharedComponents/frequency/frequency-top/frequency-top.component.ngfactory.js +62 -8
  39. package/esm2015/lib/sharedComponents/frequency/frequency-top/frequency-top.component.ngsummary.json +1 -1
  40. package/esm2015/lib/sharedComponents/frequency/frequency-weekly/frequency-weekly.component.js +3 -3
  41. package/esm2015/lib/sharedComponents/frequency/frequency-weekly/frequency-weekly.component.ngfactory.js +7 -7
  42. package/esm2015/lib/sharedComponents/owner-list/owner-list.component.js +1 -1
  43. package/esm2015/lib/sharedComponents/review-frequency/review-frequency.component.js +3 -3
  44. package/esm2015/lib/sharedComponents/review-frequency/review-frequency.component.ngfactory.js +12 -12
  45. package/esm2015/lib/workflow-engine.module.ngfactory.js +1 -1
  46. package/fesm2015/vcomply-workflow-engine.js +42 -35
  47. package/fesm2015/vcomply-workflow-engine.js.map +1 -1
  48. package/lib/sharedComponents/frequency/frequency-checkbox-list/frequency-checkbox-list.component.d.ts +1 -0
  49. package/lib/sharedComponents/frequency/frequency-lifecycle/frequency-lifecycle.component.d.ts +1 -0
  50. package/lib/sharedComponents/frequency/frequency-radio-list/frequency-radio-list.component.d.ts +1 -0
  51. package/lib/sharedComponents/frequency/frequency-top/frequency-top.component.d.ts +1 -0
  52. package/package.json +2 -2
  53. package/vcomply-workflow-engine.metadata.json +1 -1
@@ -7458,7 +7458,7 @@ OwnerListComponent.decorators = [
7458
7458
  { type: Component, args: [{
7459
7459
  selector: 'app-owner-list',
7460
7460
  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\">\r\n <app-cs-checkbox [disabled]=\"nonRemovableUsersList.includes(user[userIdKey])\" [ngValue]=\"selectedIds.includes(user[userIdKey])\"\r\n (ngValueChange)=\"selectUser(user[userIdKey],$event)\">\r\n <span class=\"name\" [appTooltip]=\"user[itemEmailKey]\" placement=\"bottom-left\"\r\n delay=\"0\" [tooltipMandatory]=true>{{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",
7461
- 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)}}"]
7461
+ 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)}}"]
7462
7462
  },] }
7463
7463
  ];
7464
7464
  OwnerListComponent.ctorParameters = () => [];
@@ -7620,8 +7620,8 @@ class FloatingBarComponent {
7620
7620
  FloatingBarComponent.decorators = [
7621
7621
  { type: Component, args: [{
7622
7622
  selector: 'app-floating-bar',
7623
- 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>",
7624
- 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}"]
7623
+ 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>",
7624
+ 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}"]
7625
7625
  },] }
7626
7626
  ];
7627
7627
  FloatingBarComponent.ctorParameters = () => [];
@@ -9769,8 +9769,8 @@ class FrequencyContainerComponent {
9769
9769
  FrequencyContainerComponent.decorators = [
9770
9770
  { type: Component, args: [{
9771
9771
  selector: 'app-frequency-container',
9772
- 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",
9773
- 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}"]
9772
+ 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",
9773
+ 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}"]
9774
9774
  },] }
9775
9775
  ];
9776
9776
  FrequencyContainerComponent.ctorParameters = () => [
@@ -9915,7 +9915,7 @@ class FrequencyDailyComponent {
9915
9915
  FrequencyDailyComponent.decorators = [
9916
9916
  { type: Component, args: [{
9917
9917
  selector: 'app-frequency-daily',
9918
- 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>",
9918
+ 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>",
9919
9919
  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}"]
9920
9920
  },] }
9921
9921
  ];
@@ -10093,8 +10093,8 @@ class FrequencyWeeklyComponent {
10093
10093
  FrequencyWeeklyComponent.decorators = [
10094
10094
  { type: Component, args: [{
10095
10095
  selector: 'app-frequency-weekly',
10096
- 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>",
10097
- styles: [".frequency-weekly{position:relative}"]
10096
+ 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>",
10097
+ 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}}"]
10098
10098
  },] }
10099
10099
  ];
10100
10100
  FrequencyWeeklyComponent.ctorParameters = () => [
@@ -10282,7 +10282,7 @@ class FrequencyMonthlyComponent {
10282
10282
  FrequencyMonthlyComponent.decorators = [
10283
10283
  { type: Component, args: [{
10284
10284
  selector: 'app-frequency-monthly',
10285
- 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",
10285
+ 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",
10286
10286
  styles: [".frequency-monthly{position:relative}"]
10287
10287
  },] }
10288
10288
  ];
@@ -10457,7 +10457,7 @@ class FrequencyQuarterlyComponent {
10457
10457
  FrequencyQuarterlyComponent.decorators = [
10458
10458
  { type: Component, args: [{
10459
10459
  selector: 'app-frequency-quarterly',
10460
- 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",
10460
+ 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",
10461
10461
  styles: [".frequency-quarterly{position:relative}"]
10462
10462
  },] }
10463
10463
  ];
@@ -10638,7 +10638,7 @@ class FrequencyBiannualComponent {
10638
10638
  FrequencyBiannualComponent.decorators = [
10639
10639
  { type: Component, args: [{
10640
10640
  selector: 'app-frequency-biannual',
10641
- 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",
10641
+ 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",
10642
10642
  styles: [".frequency-biannual{position:relative}"]
10643
10643
  },] }
10644
10644
  ];
@@ -10844,7 +10844,7 @@ class FrequencyAnnualComponent {
10844
10844
  FrequencyAnnualComponent.decorators = [
10845
10845
  { type: Component, args: [{
10846
10846
  selector: 'app-frequency-annual',
10847
- 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",
10847
+ 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",
10848
10848
  styles: [".frequency-annual{position:relative}"]
10849
10849
  },] }
10850
10850
  ];
@@ -10974,8 +10974,8 @@ class FrequencyOneTimeComponent {
10974
10974
  FrequencyOneTimeComponent.decorators = [
10975
10975
  { type: Component, args: [{
10976
10976
  selector: 'app-frequency-one-time',
10977
- 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",
10978
- 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}"]
10977
+ 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",
10978
+ 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}"]
10979
10979
  },] }
10980
10980
  ];
10981
10981
  FrequencyOneTimeComponent.ctorParameters = () => [
@@ -11215,8 +11215,8 @@ class FrequencyRandomComponent {
11215
11215
  FrequencyRandomComponent.decorators = [
11216
11216
  { type: Component, args: [{
11217
11217
  selector: 'app-frequency-random',
11218
- 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",
11219
- 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}"]
11218
+ 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",
11219
+ 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}"]
11220
11220
  },] }
11221
11221
  ];
11222
11222
  FrequencyRandomComponent.ctorParameters = () => [
@@ -11332,8 +11332,8 @@ class FrequencyOnCompletionOfComponent {
11332
11332
  FrequencyOnCompletionOfComponent.decorators = [
11333
11333
  { type: Component, args: [{
11334
11334
  selector: 'app-frequency-on-completion-of',
11335
- 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",
11336
- 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}"]
11335
+ 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",
11336
+ 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}"]
11337
11337
  },] }
11338
11338
  ];
11339
11339
  FrequencyOnCompletionOfComponent.ctorParameters = () => [
@@ -11351,7 +11351,7 @@ class FrequencyOngoingComponent {
11351
11351
  this.frequencyService = frequencyService;
11352
11352
  this.selectedType = 0; // selected type
11353
11353
  this.selectedOngoingType = 2; // default month selected;
11354
- this.ongoingType = ['Week', 'Month', 'Quarter'];
11354
+ this.ongoingType = ['Week', 'Month', 'Quarter', 'Every 6 month', 'Annual'];
11355
11355
  this.startDate = Math.floor(Date.now() / 1000);
11356
11356
  this.lifecycleDetails = '0000-00-00~~0';
11357
11357
  this.frequencyDetails = new EventEmitter();
@@ -11395,8 +11395,8 @@ class FrequencyOngoingComponent {
11395
11395
  FrequencyOngoingComponent.decorators = [
11396
11396
  { type: Component, args: [{
11397
11397
  selector: 'app-frequency-ongoing',
11398
- 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>",
11399
- 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}"]
11398
+ 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>",
11399
+ 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}"]
11400
11400
  },] }
11401
11401
  ];
11402
11402
  FrequencyOngoingComponent.ctorParameters = () => [
@@ -11421,6 +11421,7 @@ class FrequencyTopComponent {
11421
11421
  this.nextDisable = new EventEmitter();
11422
11422
  this.timeChanged = new EventEmitter();
11423
11423
  this.yearlyDateChanged = new EventEmitter();
11424
+ this.mode = '';
11424
11425
  this.todayDate = new Date();
11425
11426
  this.dateObjectData = new Date();
11426
11427
  this.timeData = '11:59 pm';
@@ -11493,8 +11494,8 @@ class FrequencyTopComponent {
11493
11494
  FrequencyTopComponent.decorators = [
11494
11495
  { type: Component, args: [{
11495
11496
  selector: 'app-frequency-top',
11496
- 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",
11497
- 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}"]
11497
+ 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",
11498
+ 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}"]
11498
11499
  },] }
11499
11500
  ];
11500
11501
  FrequencyTopComponent.ctorParameters = () => [];
@@ -11507,7 +11508,8 @@ FrequencyTopComponent.propDecorators = {
11507
11508
  valueChangedFirst: [{ type: Output }],
11508
11509
  nextDisable: [{ type: Output }],
11509
11510
  timeChanged: [{ type: Output }],
11510
- yearlyDateChanged: [{ type: Output }]
11511
+ yearlyDateChanged: [{ type: Output }],
11512
+ mode: [{ type: Input }]
11511
11513
  };
11512
11514
 
11513
11515
  class FrequencyLifecycleComponent {
@@ -11655,8 +11657,8 @@ class FrequencyLifecycleComponent {
11655
11657
  FrequencyLifecycleComponent.decorators = [
11656
11658
  { type: Component, args: [{
11657
11659
  selector: 'app-frequency-lifecycle',
11658
- 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",
11659
- 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}"]
11660
+ 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",
11661
+ 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}"]
11660
11662
  },] }
11661
11663
  ];
11662
11664
  FrequencyLifecycleComponent.ctorParameters = () => [
@@ -11671,6 +11673,7 @@ FrequencyLifecycleComponent.propDecorators = {
11671
11673
  occurrance: [{ type: Input }],
11672
11674
  selectedLifecycleType: [{ type: Input }],
11673
11675
  id: [{ type: Input }],
11676
+ mode: [{ type: Input }],
11674
11677
  selectedOccurance: [{ type: Output }]
11675
11678
  };
11676
11679
 
@@ -11724,8 +11727,8 @@ class FrequencyDueDateComponent {
11724
11727
  FrequencyDueDateComponent.decorators = [
11725
11728
  { type: Component, args: [{
11726
11729
  selector: 'app-frequency-due-date',
11727
- 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>",
11728
- 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}"]
11730
+ 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>",
11731
+ 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}"]
11729
11732
  },] }
11730
11733
  ];
11731
11734
  FrequencyDueDateComponent.ctorParameters = () => [];
@@ -11747,6 +11750,7 @@ class FrequencyCheckboxListComponent {
11747
11750
  this.id = -1;
11748
11751
  this.listArray = [];
11749
11752
  this.selectedIndex = [];
11753
+ this.mode = '';
11750
11754
  this.noAnimation = true;
11751
11755
  this.selectedCheckbox = new EventEmitter(); // {checked: true, index:0} checked : checkboxStatus, index: Index of list which checked/unchecked
11752
11756
  }
@@ -11759,8 +11763,8 @@ class FrequencyCheckboxListComponent {
11759
11763
  FrequencyCheckboxListComponent.decorators = [
11760
11764
  { type: Component, args: [{
11761
11765
  selector: 'app-frequency-checkbox-list',
11762
- 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>",
11763
- 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}"]
11766
+ 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>",
11767
+ 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}"]
11764
11768
  },] }
11765
11769
  ];
11766
11770
  FrequencyCheckboxListComponent.ctorParameters = () => [];
@@ -11768,6 +11772,7 @@ FrequencyCheckboxListComponent.propDecorators = {
11768
11772
  id: [{ type: Input }],
11769
11773
  listArray: [{ type: Input }],
11770
11774
  selectedIndex: [{ type: Input }],
11775
+ mode: [{ type: Input }],
11771
11776
  selectedCheckbox: [{ type: Output }]
11772
11777
  };
11773
11778
 
@@ -11776,6 +11781,7 @@ class FrequencyRadioListComponent {
11776
11781
  this.radioList = [];
11777
11782
  this.selectedIndex = -1;
11778
11783
  this.name = '';
11784
+ this.mode = '';
11779
11785
  this.noAnimation = true;
11780
11786
  this.selectedRadio = new EventEmitter();
11781
11787
  }
@@ -11789,8 +11795,8 @@ class FrequencyRadioListComponent {
11789
11795
  FrequencyRadioListComponent.decorators = [
11790
11796
  { type: Component, args: [{
11791
11797
  selector: 'app-frequency-radio-list',
11792
- 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>",
11793
- 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}"]
11798
+ 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>",
11799
+ 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}"]
11794
11800
  },] }
11795
11801
  ];
11796
11802
  FrequencyRadioListComponent.ctorParameters = () => [];
@@ -11798,6 +11804,7 @@ FrequencyRadioListComponent.propDecorators = {
11798
11804
  radioList: [{ type: Input }],
11799
11805
  selectedIndex: [{ type: Input }],
11800
11806
  name: [{ type: Input }],
11807
+ mode: [{ type: Input }],
11801
11808
  selectedRadio: [{ type: Output }]
11802
11809
  };
11803
11810
 
@@ -16522,8 +16529,8 @@ class ReviewFrequencyComponent {
16522
16529
  ReviewFrequencyComponent.decorators = [
16523
16530
  { type: Component, args: [{
16524
16531
  selector: 'app-review-frequency',
16525
- 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>",
16526
- 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}"]
16532
+ 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>",
16533
+ 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}"]
16527
16534
  },] }
16528
16535
  ];
16529
16536
  ReviewFrequencyComponent.ctorParameters = () => [
@@ -29238,7 +29245,7 @@ class AddMultipleResponsibilityWithTabComponent {
29238
29245
  // category_name: categoryName,
29239
29246
  category_name_with_tree: '',
29240
29247
  category_id: (_s = (_r = this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory).categoryId) === null || _r === void 0 ? void 0 : _r.toString()) !== null && _s !== void 0 ? _s : '',
29241
- program_cat_ids: ((_t = this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory)) === null || _t === void 0 ? void 0 : _t.programId) ? [(_u = this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory)) === null || _u === void 0 ? void 0 : _u.programId] : [],
29248
+ program_cat_ids: ((_t = this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory)) === null || _t === void 0 ? void 0 : _t.childProgramId) ? [(_u = this.getProgramId(report === null || report === void 0 ? void 0 : report.program, report === null || report === void 0 ? void 0 : report.programCategory)) === null || _u === void 0 ? void 0 : _u.childProgramId] : [],
29242
29249
  rc_name: rcDetails ? rcDetails === null || rcDetails === void 0 ? void 0 : rcDetails.name : '',
29243
29250
  rc_id: rcDetails ? rcDetails === null || rcDetails === void 0 ? void 0 : rcDetails.rcId : 0,
29244
29251
  entity_tree: (rcDetails && (rcDetails === null || rcDetails === void 0 ? void 0 : rcDetails.rcId)) ? [{